Skip to Main Content

WordPress plugin review: Divi Mega Pro

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Mega menus are a popular design element that can give your website a boost of elegance while providing visitors with an extra layer of navigation. There are several ways to add mega-menus to Divi. One of the simplest methods I've used is that ofa third-party plug-in called Divi Mega Pro .

Divi Mega Pro makes it easy to create mega menus using Divi Builder. Each menu can be added to any element using a CSS class. This means that you can add a Divi layout to any menu link, but you can go one step further and add them to any element of a Divi layout simply by adding a CSS class.

It's great for creating menus and popups with store modules, images, sliders, portfolios, icons, presentation texts, videos, blogs, and more. It also works with Extra.

Create a Mega Pro Mega Menu

create a mega menu divi with divi mega.png

The Divi Mega Pro menu is added to the dashboard menu. Here you can enter your license key, view the menus you have created and create a new menu. When you click to add a new menu, you will see an editor for the type of menu publication. The screen is simple, but a lot of things are happening here.

design of a Mega Pro.png menu

Publisher - you can create the mega-menu or a tooltip using Divi Builder.

change the background of the mega menu.png

Mega Pro Background - you can select the background and colors of the font.

choose the location of the menu.png

View locations - choose all pages or name specific pages, then enter exceptions.

choose the animation of the menu.png

Mega Pro Animation - select an animation. Choose from offset, offset, perspective, fade or scale.

choose trigger css.png

Mega Pro Triggers - add a trigger as a CSS selector. Once you have saved it, you will see the CSS class that you will paste into the CSS class field of a menu item, module, row, or section. This is clicked or flown to display the menu. Everything can be used as a trigger and not just as a menu item. This means that you can also use Divi Mega Pro to create popups or tooltips.

configuration menu style divi.png

Mega Pro Display Settings : choose the display direction (up or down), enter the top and bottom margins in pixels, choose a percentage of width and activate an arrow. Turning on the arrow reveals more customizations in which you can choose the type of arrow (triangle or round), choose the color, set the width and height, and preview the arrow.

Start promoting your blog

Download dozens of Logos, banners, website templates and many other marketing tools to market your WordPress Blog. [Recommended]

customization of divi.png buttons

customizations the close button: Activate the close button on the desktop or on the mobile and customize the close button. If you turn it on, the text color, background color, font size, border radius, fill, and display customizations are previewed.

additional configuration divi mega pro.png

Additional parameters Mega Pro - choose the type of trigger (hovered or clicked), the type of output (hovered over or clicked) and enter the exit delay.

Divi Mega Pro Models

different templates available divi mega pro.png

The developer has provided several models for Divi Mega Pro. When you buy the plugin, these templates are available in your account, in the Layout templates tab of the plugins. These are great for helping you start designing your mega menus. I will use some of them in my examples.

Divi Mega Pro Menu

divi mega pro.png menu

Once you create a mega-menu, it will appear in the list. Here you can edit, edit quickly or delete menus. You can also search, filter by date, view by status, etc. It also provides the unique Mega Pro class so you can copy them from here instead of opening each of them to get the class.

When you copy the class, be sure to paste it without additional spaces. Otherwise, all the mega-menus on the page will not work anymore.

I'm sure it would not be easy to add, but a copy and edit function would be convenient. You can save Divi layouts to your library for reuse, but this does not include surrounding settings.

Adding a trigger

choose the selector divi.png

In the Mega Pro Triggers field you will see a unique Mega Pro class. Copy and paste it into the CSS Class field of the item you want to use as a trigger.

classes css.jpg

To add the CSS Class field to a menu item, you must enable CSS classes. In the menu screen, select Screen options and enable CSS Classes.

add a class css menu divi.png

Paste the CSS class in the menu field. Now, this menu item will show the mega-menu by hovering and take you to the click-to-click page.

divi mega menu design pro.png

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

You will notice that Divi Mega Pro is also an option in the menu link options. They are great for adding a menu item to the menu that is not really going anywhere. Add the CSS class just like any other menu item.

Contact section on the mega menu

contact section mega menu pro.png

The menu opens in hover. I can always click on the Contact link to open the contact page if I wish. If I only wanted the mega-menu to be displayed, I could simply use the Contact main menu link and rename it (as in the example above).

In this one, I slightly changed the colors using the background and display settings rather than using Divi Builder. He adds a bar at the bottom of the menu.

Simple call to action with menu columns

design contact section divi mega pro.png

This is one of the templates that add multiple columns. I make adjustments to background and font colors. I also added an arrow and made the width of 75%.

change background color divi mega pro.png

The background color and font options add a little more to make it stand out. I left the default alignment, which places the menu on the right side of the screen. You can adjust the positioning in the settings.

tabs

menu design with tabs mega menu divi.png

The tab template includes a code module with jQuery to create the rollover effect.

demo menu with tab divi mega pro.png

I added content to the tabs and adapted them to the site. Each of the links on the left shows a different tab in most of the menu.

Info Bubbles configurations

demo infobulles divi.png

For this one, I added the CSS class to a presentation text so that it opens a small pop-up window. The popup is just an image with a shadow underneath.

In the image above, my mouse hovers over the words LIVE WEBSITE. I have not adjusted the positioning yet, but it's easy to make it appear where you want it.

design info bull divi mega pro.png

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

For this one, I created a popup to show an image with text. I set the display direction to Low and, in order to make it appear next to the image I want to add, I added a margin of -300.

result info bubble divi.png

The pop-up window now appears to the left and top of the image when I fly over it. I added a transparent background color, a border color, a fill, and a rounded outline.

License and documentation

license and demonstration.png

You have the choice between four licenses:

  • Single site - 15 $ per year
  • Three sites - $ 29 per year
  • Unlimited sites - 59 $ per year
  • Unlimited lifetime - 129 $ once

Documentation is provided by a video demonstration and an article on the site explains the features and explains, step by step, how to use the plugin.

Other Divi tutorials

This article features 2 comments
  1. Hello:
    Where can I see how a pop-up window is made?
    I have no way to get it. I could only create a mega menu, but the popups I linked do not open.
    I met some emails with Divi Life but they did not clarify anything.
    Thank you very much.

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
4 shares
Share4
tweet
Save