Divi Mega Pro is a third-party plugin for Divi that provides the facility to create mega menus and tooltips with the Divi Builder. Because the mega menus and tooltips are created with the Divi Builder, you’ll be able to use any modules you need, together with third-party modules, shortcodes, and code, and magnificence them with Divi’s gear. On this publish, we’ll check out Divi Mega Professional to lend a hand you make a decision if Divi Mega Professional is the correct product in your wishes.

Divi Mega Professional Builder

Relatively than including modules to the Divi Builder, Divi Mega Professional provides a brand new publish kind created with Divi layouts that WordPress menus and Divi Modules can show. Create and upload as many as you need to any web page and menu. A brand new menu merchandise is added to the WordPress dashboard referred to as Divi Mega Professional. This contains the Divi Mega Professional checklist, editor, and settings. Right here, you’ll be able to create and organize your mega menus and tooltips. We’ll have a look at each and every menu merchandise in opposite order.

Divi Mega Professional Settings

The settings assist you to upload a slide transition to the header, content material, and footer. You’ll permit them independently. They’re disabled via default. The transition will trade the content material inside the menu or tooltip whilst preserving its container visual. This forces the mega menu and tooltips into hover mode. I like to recommend enabling them until you want to make use of the press mode.

Upload New

To create a mega menu merchandise or a tooltip, click on Upload New. This opens an editor the place you’ll be able to create the menu or tooltip. It contains the TinyMCE editor, and you’ll be able to permit the Divi Builder to create it with Divi Modules. You’ll wish to create a brand new merchandise for each and every mega menu component you need to show. For instance, if you need 4 other hyperlinks on your header to turn a distinct mega menu structure, you’ll wish to create 4 other pieces.

The editor contains plenty of gear in the correct sidebar and on the backside together with the usual publishing gear and customized fields choices. Let’s take an in depth have a look at each and every of the customized gear.

Show Places

Make a choice the place the mega menu can show. Make a choice between all posts and pages, all posts, all pages, or particular pages. You’ll upload exceptions for all posts or pages to the sector. If you select particular places, then you’ll be able to input them into the sector. You’ll additionally make a selection to turn the menu on creator pages and archive pages, and power render.

Mega Professional Animation

Make a choice the animation the menu or tooltip will use when it’s opened. Make a choice Shift Away, Shift Towards, Point of view, Fade, or Scale. Those give the mega menus a sublime feel and look after they’re opening and shutting.

Mega Professional Triggers

Input the CSS selector cause into the sector. It additionally presentations the Mega Professional Distinctive Elegance that you just’d input into the CSS Elegance fields to show the layouts.

Mega Professional Show Settings

The settings come with a large number of choices. Make a choice the show course, upload best and backside margin, select the width, input the utmost top, select the CSS place from absolute or fastened, and permit an arrow.

Should you permit the arrow, you’ll see some styling gear to make a choice the kind, colour, width, and top. It presentations a preview, so that you’ll know the way it seems to be at the entrance finish.

Customized Shut Button Customizations

The shut button customizations assist you to permit the shut button on desktops and telephones independently.

If you select to customise the shut button, you’ll see every other set of choices to regulate the colours, font dimension, border radius, and padding. It additionally features a preview so you’ll be able to see how it’s going to glance at the entrance finish.

Mega Professional Further Settings

The extra settings assist you to disable the menu on telephones, drugs, and desktops in my view. Selected the cause kind between hover and click on, the go out kind between hover and click on, and input the go out extend within the box.

Mega Professional Background

This one is positioned underneath the editor. It has a colour picker the place you’ll be able to specify the background colour of the menu.

Divi Mega Professional Checklist

This presentations the checklist of Divi Mega Professional pieces that you just’ve created. Each and every one contains the Distinctive Mega Professional Elegance. That is what you’ll replica to stick the place you need the mega menu or tooltip to show. You’ll wish to create and duplicate each and every menu merchandise in my view to construct your mega menu.

Including the Mega Menu

So as to add the mega menu on your WordPress header and footer menus, you’ll wish to have CSS Categories enabled. First, pass to Look > Menus within the WordPress dashboard. Make a choice Display screen Choices within the higher proper nook of the display and ensure CSS Categories is checked.

Subsequent, open the menu merchandise that you need to show the mega menu merchandise. Paste the Distinctive Mega Professional Elegance for the mega menu into the CSS Categories box.

Repeat this procedure for each and every mega menu merchandise you need to show.

Right here’s a have a look at this mega menu at the entrance finish. I’ve used one of the vital demos that’s integrated, as we’ll see later.

Including Tooltips

You’ll additionally use Divi Mega Professional to create mega tooltips. Merely upload the CSS magnificence to the component you need to turn the tooltip. You’ll set the tooltip to open on hover or click on. Any Divi Module can display a tooltip. Taste the module as standard with the Divi gear.

So as to add the tooltip, open the Divi Module you need to turn the tooltip. Cross to the Complex tab and paste the Distinctive Mega Professional Elegance into the CSS Elegance box. Save your settings and also you’re in a position to show tooltips.

Now when any person hovers over the component you’ve added the category to, the tooltip seems.

The tooltips additionally paintings to create mega menus for headers within the Divi Theme Builder. Create the menu pieces with Divi Modules akin to Textual content Modules, Button Modules, Symbol Modules, and so on. I simplest suggest the use of Menu Modules to show usual menus as each and every hyperlink will both open a submenu or the web page the menu issues to.

Upload the Distinctive Mega Professional Elegance to the CSS Elegance box in each and every component you need to have a mega menu merchandise. You’ll use this technique to create customized headers and footers. Within the instance under, I’ve created a menu the use of usual Textual content Modules because the menu hyperlinks. I’ll upload a mega menu structure to each and every one.

The menu pieces will paintings as a standard menu and show the mega menu pieces on hover or click on, relying in your settings. Within the instance under, I’ve hovered over the primary menu hyperlink and the mega menu for that Textual content Module has opened.

Divi Mega Professional Templates

Divi Mega Professional contains 15 templates to get you began. They’re equipped as JSON recordsdata. Add them on your Divi Mega Professional editor and use them to create your Divi Mega Professional layouts. They come with eCommerce banners, tabs, CTA’s, touch knowledge, a login shape, weblog posts, and a lot extra. The layouts are well-designed and paintings nice with any taste of the website online.

The templates are absolutely customizable, so you’ll be able to alter them to incorporate your branded fonts and colours. That is template quantity 9, which creates eCommerce menus for featured manufacturers. This presentations the wireframe view inside the back-end editor. You’ll additionally view the layouts at the entrance finish. Mine displayed the structure with the sidebar via default, even though I’m positive that may simply be disabled to turn the structure in complete width.

Right here’s how it will glance at the entrance finish. That is the back-end editor appearing the desktop view.

The place to Acquire Divi Mega Professional

Divi Mega Professional is available in the Divi Marketplace for $79. It contains limitless website online utilization, twelve months of improve and updates, and a 30-day money-back ensure.

Finishing Ideas

That’s our have a look at Divi Mega Professional. I discovered developing and the use of the mega menus to be intuitive. Because it makes use of any Divi Builder module, developing the menus and tooltips works the similar as construction any Divi structure. The additional options, akin to animations, buttons, and so on., supply much more regulate over the design and specify how the menus and tooltips paintings. It really works effectively with pages, posts, WooCommerce merchandise, and extra. The added templates are a good way to get began. Should you’re fascinated with developing mega menus and tooltips in your Divi internet sites, Divi Mega Professional is value a glance.

We need to pay attention from you. Have you ever attempted Divi Mega Professional? Tell us what you take into consideration it within the feedback.

The publish Divi Plugin Highlight: Divi Mega Pro gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more