Divi Plugin Highlight: Divi Mega Pro

Posted on December 2, 2018 by in Divi Resources | 51 comments

Divi Plugin Highlight: Divi Mega Pro

Mega menus are a popular design element that can give your website an elegant boost while providing visitors with an extra layer of navigation. There are several ways to add mega menus to Divi. One of the easiest methods that I’ve used is from a third-party plugin called Divi Mega Pro.

Divi Mega Pro makes it easy to build mega menus using the 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 link in the menu, but you can go even further and add them to any element within any Divi layout simply by adding a CSS class. This is great for creating menus and popups with shop modules, images, sliders, portfolios, icons, blurbs, video, blogs, etc. It also works with Extra.

Creating a Divi Mega Pro Mega Menu

The Divi Mega Pro menu is added to the dashboard menu. Here, you can enter your license key, see the menus you’ve created, and create a new menu. When you click to add a new menu, you’ll see an editor for the menu post type. The screen is simple, but there’s actually a lot going on here.

Editor – you can create the mega menu or tooltip using the Divi Builder.

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

Display locations – choose all pages or name specific pages, and then enter exceptions.

Mega Pro Animation – select an animation. Choose from shift away, shift forward, perspective, fade, or scale.

Mega Pro Triggers – add a CSS selector trigger. Once you save it you’ll see the CSS class that you’ll paste into the CSS class field of a menu item, module, row, or section. This is what gets clicked or hovered over in order to display the menu. Anything can be used as the trigger- not just menu items. This means you can also use Divi Mega Pro to create popups or tooltips.

Mega Pro Display Settings – choose the display direction (up or down), enter the top and bottom margin in pixels, choose a width percentage, and enable an arrow. Enabling the arrow reveals more customizations where you can choose the arrow type (triangle or round), choose the color, set the width and height, and see a preview of the arrow.

Close Button Customizations – choose to enable the close button on desktop, on mobile, and to customize the close button. Selecting to enable it reveals customizations for the text color, background color, font size, border radius, padding, and shows a preview.

Mega Pro Additional Settings – choose the trigger type (from hover or click), the exit type (from hover or click), and enter the exit delay.

Divi Mega Pro Templates

The developer has provided several templates for Divi Mega Pro. When you purchase the plugin these templates will be available in your account in the Plugin Layout Templates tab. These are excellent to help you get started with designing your mega menus. I’ll use a few of these in my examples.

Divi Mega Pro Menu

Once you create a mega menu it will appear in the list. Here, you can edit, quick edit, or delete the 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 one to get the class.

  • When you copy the Class, make sure you paste it without any extra spaces. That will cause all of the mega menus on the page to stop working.

I’m sure it wouldn’t be easy to add, but a feature to copy and edit would be handy. You can save the Divi layouts to your library to reuse, but this doesn’t include the surrounding settings.

Adding a Trigger

In the Mega Pro Triggers field, you’ll see a Unique Mega Pro Class. Copy this and paste it into the CSS Class field of the item you want to be the trigger.

To add the CSS Class field to a menu item, you’ll need to enable CSS Classes. In the menu screen, select Screen Options and enable CSS Classes.

Paste the CSS Class into the menu’s field. Now, this menu item will display the mega menu on hover and it will take you to the page on click.

You’ll notice that Divi Mega Pro is also an option in the menu link options. These are great for adding a menu item to the menu that doesn’t actually go anywhere. Add the CSS Class just like any other menu item.

Contact Mega Menu

The menu opens on hover. I can still click on the Contact link to open the contact page if I want. If I only wanted the mega menu to display, I could just use the Contact Mega Menu link and rename it (like the example above). In this one, I’ve tweaked the colors a little using the background and display settings rather than the Divi Builder. It adds a bar at the bottom of the menu.

Simple Call to Action with Menu Columns

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

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

Tabs

The tabs template includes a code module with jQuery to create the hover effect.

I’ve added content to the tabs and styled them to match the site. Each of the links to the left shows a different tab in the larger part of the menu.

Tool Tips

For this one, I added the CSS Class to a blurb so that it opens a small popup on hover. The popup is just an image with a border shadow. In the image above my mouse is hovering over the words LIVE WEBSITE. I haven’t adjusted the positioning yet, but it’s easy to make it appear where you want.

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

The popup now appears to the left and at the top of the image as I hover over it. I’ve added a transparent background color, border color, padding, and rounded the border.

License and Documentation

There are four licenses to choose from:

  • Single site – $15 per year
  • Three sites – $29 per year
  • Unlimited sites – $59 per year
  • Unlimited lifetime – $129 one time

Documentation is provided by a video demonstration and an article on the site walks you through the features and shows step-by-step how to use the plugin.

You can purchase Divi Mega Pro from the developer’s website.

Ending Thoughts

Using the plugin is easy. I found all the settings to be intuitive. I like that it includes templates. The website does show that there are more templates coming soon. I hope this will include all of the mega menus and popups that are used in the demo page, as there are a lot of well-designed layouts in the demo. Designing a great mega menu is the hard part, and these help you get started with a solid design.

The demonstration is great for showing how to add the CSS classes. This is especially good for those that are not familiar with CSS. It’s not that difficult to figure out if you are familiar with CSS classes, and it doesn’t take many steps to add the CSS, so it doesn’t add much difficulty to using the plugin. It’s a common skill that Divi users should learn anyway.

You can add as many mega menus and tooltips as you want to any page. I like that you can limit them to specific pages. This means you can create custom menus on the page-level. This is excellent for landing pages or sales pages.

I’ve only scratched the surface of the types of mega menus and popup tooltips you can create with Divi Mega Pro. It’s an easy plugin to recommend to any Divi or Extra user that wants the ability to build mega menus or tooltips with the Divi Builder.

We want to hear from you. Have you tried Divi Mega Pro? Let us know what you think about it in the comments.

Featured Image via pulsar011 / shutterstock.com

51 Comments

  1. I expect similar navigation menu functionality to be finally made available as part of Divi core, the upcoming Divi theme builder. It’s been seven months now since the theme builder was announced. We should not have to implement third party plugin after plugin for what should have been part of Divi a long time ago.

    • Hey Frank,

      The functionality in Divi Mega Pro will likely never be included in Divi. We designed it in anticipation of Divi’s future header builder, and will be able to be used alongside it to extend it and make the drop downs “mega.” 🙂

      • Trust me when I say that full mega menu is coming to DIVI core. It may not show up in the first version of the header builder, but I say it is coming.

        • Actually Richard, I have it on very good authority that it isn’t something ET will be adding into Divi. Regardless, even if it did eventually make it into Divi core, that would be a very long time away. I’m curious though, what was the purpose of your comment?

          • This should be part of Divi. But at least we no know that it won’t be, for whatever reason… Thanks for confirming…

          • “what was the purpose of your comment?”

          • Maybe just this: “We should not have to implement third party plugin after plugin for what should have been part of Divi a long time ago” ;-(…

      • As soon as the competitors will put Mega Menus in their core, I guess that ET will do the same, even if they actually don’t think that they are gonna do. I would never say never and I wouldn’t for sure say for sure 😀

    • Yeah, me too like to see this functionality built into the DIVI core.

    • +1 I agree, mega menu (and alternative mobile menus) should be core to Divi.

      That and MUCH better photo gallery options!

  2. Thanks so much for the excellent write up, Randy! While Divi Mega Pro is our newest plugin, we’re excited for its potential and look forward to adding more features, and templates 😄

    • Does the Mega Pro allow the function to click open instead of the hover reveal which is particularly annoying when trying to navigate around the page when a menu has several sub items, virtually mouse navigation on the whole page reveals menu when not required

      • Yes, in the screenshots Randy showed above, I see that you have the option to reveal and hide the menu based on either clicks or hovers.

    • Randy A. Brown

      You’re welcome Tim! This is an excellent plugin! I can’t wait to see the new features and templates.

  3. Thanks so much for the excellent write up

  4. I purchased this plugin and like it but I never was able to embed the blog module in the mega menu which I really wanted to do. This was actually shown in the plugin demo page. I was told this functionality would require their additional divi library short codes plugin. After acquiring that plugin I still could not get the blog module to function properly. I was then told that they were working on releasing more detailed templates and tutorials.

    I think it has great potential and I just wish at least they would provide guidance or samples for the mockup mega menus they used on their sales pages…

    I am holding out hope that they eventually deliver though as I believe their operation is a quality one!

    • Hey Andrew,

      You can definitely add blog module inside of a Mega Menu with Divi Mega Pro without anything additional needed. What you wanted to do was add the blog modules inside of the tabbed module inside of the Mega Menu layout. Divi does not natively allow nested modules, so we created a plugin from scratch to allow this 🙂 You’re right, since our Divi Library Shortcodes plugin is brand new for Black Friday, we don’t have a tutorial for it yet. However, my support team offered to help you set it up, but you never got back to us. Reach back out and we’ll assist 🙂

  5. Hi Randy,

    Like many, I’m not always happy to see Divi promoting other plugins.

    The Divi Menu is so lacking in advanced styling and function however we have added a mega style menu following this Elegant Themes post:
    https://www.elegantthemes.com/blog/divi-resources/adding-images-to-your-divi-mega-menu

    Looks and works great however Divi Mega Pro seems to do alot more. Can you tell me out of interest? Using Divi Mega Pro, if your menu is fixed width, can Divi Mega Pro be set to be full screen width?

    Many thanks, Pete

    • Hi Pete,

      Yes, Divi Mega Pro has the option to set the width to 100%, 75%, 50%, 25%, or a custom width in pixels or percentage 🙂

  6. Wow, cool plugin. I like this demo.
    It may be worthwhile to modify the adaptive look for the smartphone. For some reason, I could not close the window with the “login demo” on the demo site. I tried to even press ESC, but the window did not close. Perhaps this is a problem on my side, but please check it.
    Thanks for the great news! I hope to buy your plugin soon

  7. Thanks to ET and Randy Brown for an excellent writeup on this plugin, and especially for working with enhancement developers like DiviLife.

    Big kudos and thanks to Tim Strifler for putting this together; I’ve been evaluating WP mega menu plugins for a long time – never got one – and have used the Divi MegaMenu capability (it’s THERE but obscure, and awkward to style), and I’m looking forward to implementing this plugin in the near future.

    However the BIGGEST PLAUDITS go to both ET and DiviLife for offering LIFETIME subscriptions. I only wish more developers did this.

    • #DiM: Not only that, but DL offered a 30% off on ALL purchases for the black sales days and I bought the Access pass. I have immediate plans for 3 of the plugins! They solved a design issue I have been cogitating on for about 6 weeks.

      # Frank: IMO, this is NOT something I would expect in the core of Divi. These plugins have so much more capabilites than simple menus.If ET were to suck up all the great plugins and incorporate them, that would destroy the incentive for non-ET folks to design new things. And then those who WERE designing them might have the attitude of “Get it now before Divi steals it.” That’s an environment that could encourage lack of design concern on creating something that lasts and has support.

      I like it like it is.

    • Hey David!

      Thanks for the feedback, and glad to hear you like the plugin! And yes, everyone loves the Lifetime membership! 😄

  8. I’m super sceptical after using several menu plugins for Divi.
    Looking through the article, playing with the demo and seeing the sales page I’m not excited. Note, I’ve NOT used DMP, and this is just my assumption based on my past bad experience.

    Because I’ve not used DMP let me brag about what I’ve learned to pay attention to, from using a fair amount of menu plugins in conjunction with Divi – especially the latest one called MHMM (terrible name by the way – makes everyone cringe as soon as the name comes out…).

    First of all, we spent $129 for a lifetime license, and now after almost a year, it is crystal clear that BeSuperfly abandoned the plugin a week after it was released. However, MHMM is not the first time we sunk money on a “lifetime license plugin”. It (sadly) appears to be a common pattern with these Divi-related companies coming out of the woodwork. For example, from DiviLife we’ve had Divi Bars LTD ($129) purchase that after months and months still messes every Divi website we put it on. With almost every design there needs to be some intervention/manual CSS tuning – sometimes different adjustments for each page (?). Never-ever had this happen with Convert Plus bars – a plugin that was never designed with “just Divi in mind”. Makes you wonder…

    Lesson 1 – be careful with throwing the big buck on the LTDs before testing them out.
    Lesson 2 – don’t assume that just because someone called their plugin “Divi Exclusive” it means that the “Divi-plugin” is suddenly better for your Divi-website than a generic, well-regarded WP plugin.

    Anyway, back to the Divi-menu…
    Here’s what came up with MHMM but may as well be relevant to DMP:
    – Number #1 and by far the most dreadful is the lack of performance optimisations. After the recent Google PageSpeed update the mobile view with MHMM drops below 50pkt (red) on all the websites with it – no matter the amount of minification and optimisation gymnastics we do. I see around 20pkt drop just on that plugin. Period. And there is no reason for it other than developer’s ignorance in refining the code. There is JS in the header – mostly for no reason – and if you touch that the menu just breaks. Of course, pathetic drops in SEO follow – I see it on SE Ranking and Ahrefs every time, beyond any doubts. Though DMP has an ok-ish GPageSpeed score (~55) on the Demo site, so it gives me some hopes…
    – We bought it on the promise of Visual Builder integration, but nothing was done for a year, so we gave up waiting.
    – The speed of building these menus just takes forever. The clumsiness in modifying/previewing the design and the need of following those sloppy-workarounds are just so “not-Divi-like” that it is actually better and faster to use default Divi menu and style it with CSS on a notepad. Looking at the article and the screenshots, I’m worried DMP is the same…
    – … which takes me to the last point – because of a terrible time/value ratio the inevitable question follows “are those plugin-gimmicks really worth all that hassle and money?”. – More often than I would like, they never are…

    So just recently, we’ve decided to completely move to the Divi default menu and apply CSS template styling with quick Microthemer refinements.
    As Frank here already mentioned, the only real solution is WP Menu integrated into the Divi core by ElegantThemes. Because all those “mega” menu plugins just ain’t “Mega” enough…

    But feel free to prove me wrong 😉

    • Hi Lucas,

      At first glance someone may think you’re talking about Divi Mega Pro, which you’re not. 🙂 Mhmm is not our plugin, so I can’t speak to any of the issues you’ve brought up. However, from what I hear in the community, a lot of people like Mhmm (despite the terrible name 😉 )

      Mhmm is a header builder, while Divi Mega Pro is a mega menu builder. So they’re very different.

      But don’t let a bad experience with a completely different plugin from a different developer sour your experience from a plugin you haven’t tried 🙂

      • Tim, – the points I’m raising stand – i.e.
        – the overall speed and performance impact,
        – compatibility with CSS/HTML optimisation plugins,
        – Visual Builder integration,
        – automated vs manual styling input,
        – and the frequency of the plugin updates (future developments)

        All these apply to your product even more so than to MHMM because yours has a “mega” scope and your customers will have to deal with those questions at some point, guaranteed…

        • Hi Lucas,

          I appreciate your response. Correct me if I’m wrong, but you’re saying because another plugin (by another company) had these specific issues, that my plugin does too? That doesn’t seem fair…

          I’ll address your concerns though—

          – the overall speed and performance impact:
          We’ve done lots of speed testing and no noticeable change in load time when the plugin is activated. We used speed testing through Pingdom for the tests. As you probably know, the same tests from the same location on Pingdom will range within a quarter of a second typically. With the plugin inactive, we saw results within the same range as when it was active. And the page size was only .1mb larger with the plugin active. It’s also worth noting that these tests were done without any speed optimizations done such as caching plugins, image compression, CDNs, etc. Reach out directly and I can send you some more specific results on our speed/performance testing.

          – Visual Builder integration:
          Divi Mega Pro isn’t a module like Mhmm is, so this isn’t really a concern. DMP is a custom post type. Currently the Visual Builder requires custom post types to be accessible on their own URL, and DMP can only be accessible on the front end when triggered. However, this will change when the Visual Builder comes to the backend (should be the next Divi update), and then DMP content can be edited directly in the VB. Currently, customers that want to design the mega menu using the Divi Builder can do so from the Divi Library, then import into the DMP custom post type.

          – automated vs manual styling input:
          I’ve never used Mhmm, so I’m not entirely sure what you’re referring to. But the styling in Divi Mega Pro is done via the Divi Builder just like a page or post. Once the VB comes to the backend as mentioned above, this will be even easier for those that prefer designing in the Visual Builder (many of our customers are still die hard backend users 😉 )

          – and the frequency of the plugin updates (future developments):
          Divi Mega Pro is still a brand new plugin, so we’re still on 1.0. We are working on better mobile control, and that will likely be the first feature update. As for bugs, we haven’t had any reported besides a couple of conflicts with some specific plugins from one customer. We’ll likely push an update in the next week for those. For our other plugins, we’ve pushed 14 public releases of Divi Overlays, and 11 of Divi Bars since they were released. Each update contains several fixes or new features each. The change logs for both are public.

          Let me know if you have any more questions/concerns. Feel free to reach out to me directly. We are committed to our products and while no software product is perfect, we work hard to make our products better and better, and we do so by customer feedback.

          • Tim, –

            “Correct me if I’m wrong, but you’re saying because another plugin (by another company) had these specific issues, that my plugin does too? ”
            – Nope. Just for you to address the basics head-on…

            … Which you did very well, thank you very much 🙂
            – now I’m tempted to try the plugin out.

            P.S.
            “– automated vs manual styling input:” I agree, this is a bit subjective and impossible for you to know as it will depend on each case.
            Though, what I’m referring to is the type of “Divi-plugin” that every time I go beyond the visuals given in the plugin’s template, I’m presented with X-amount of convoluted CSS classes I now need to figure out and adjust in my notepad. Which defies plugin’s original purpose (i.e. saving time and efforts). It’s hard to pinpoint the specifics, but I know it when I see it… 😛

  9. PLEASE ALWAYS REMEMBER TO show the end result first before you delve into the details. This is basic communication skills.

    • Yes, my first lokk (search) is allways “View Live demo” or similar.

  10. hmmm, nice,
    I just visited the Demo Page and tryed it in Mobile Viwe
    but how can I reach in the mobile view on the Menu”Tabs Demo” the single tabs?

  11. I actually just used it on a client project to create a mega menu item for a newsletter signup form. I must say, it worked very well and looks really cool with the “perspective” animation.

    • Hi Nora,

      That’s great to hear! Thank you for sharing your experience! 🙂

  12. Thank you Nick and ET for supporting your Divi lifetime members with this Divi Mega Pro tutorial. Any more you can offer on Divi Mega Pro would be much appreciated.

    I bought a lifetime membership for Divi Mega Pro last week. They don’t have any meaningful documentation for this product, nor for any other the other templates that come along with this product. I wrote them to complain and they didn’t have the professional courtesy to even respond back. This was a very bad user experience for us and with no recourse to get a refund.

    • Hi Dennis,

      Thanks for purchasing Divi Mega Pro! Did you see the Getting Started tutorial and video? We go through the entire set up process. This is still a very new plugin, and we will be adding more tutorial videos on specific features and use cases. We do have templates you can download. From within your Divi Life account, go to Purchase History > Plugin Layout Templates. I am not finding a support ticket for you in our system. We have a full time dedicated support team, and we always respond to all tickets. Log into your Divi Life account and in our support system you will see any open (or closes) tickets. Perhaps your ticket did not get successfully submitted.

  13. #DiM: Not only that, but DL offered a 30% off on ALL purchases for the black sales days and I bought the Access pass. I have immediate plans for 3 of the plugins! They solved a design issue I have been cogitating on for about 6 weeks.

    # Frank: IMO, this is NOT something I would expect in the core of Divi. These plugins have so much more capabilites than simple menus.If ET were to suck up all the great plugins and incorporate them, that would destroy the incentive for non-ET folks to design new things. And then those who WERE designing them might have the attitude of “Get it now before Divi steals it.” That’s an environment that could encourage lack of design concern on creating something that lasts and has support.

    I like it like it is.

    • Thanks Randy for purchasing our All Access Pass, and for your input here! And I agree with you 🙂

    • “If ET were to suck up all the great plugins and incorporate them…”

      This is the wrong way of putting it! Divi has been slow in adding functionality and features that have been on the backburner way too long. Other pagebuilder plugins have added many of these in the meantime.
      It is not ET ‘sucking up’ but lagging behind….this has resulted in plugin developers to take advantage to fill the void in the MEANTIME.

  14. I really like these kinds of Menus. But when do you have the new header or footer added to Divi Theme?

  15. Some good points raised in the comments above. I decided to buy DMP as part of the BF sale week and admire anyone who buys a LT licence off the bat. For the price – it’s worth a punt to get your hands dirty and see if firstly – it does what you think you’re being told it does and secondly to see if you can live with it.

    I’ve used Ubermenu on a couple of sites and doubt there is anything to match it’s functionality but using the existing/old/clunky WP menu builder is one right PITA when you have a menu system that actually uses that functionality.

    Having bought DMP I was a little disappointed to see how few of the promised templates were actually there. Yes I can build them myself but it was kinda implied in the video they’d be there. They weren’t. The instruction video is OK but is really basic and you’ve really got to find your own way.

    Would this be a good moment to mention the avalanche of emails after BF – please don’t force me into unsubbing Tim.

    Finally I don’t want to see this functionality built into the Divi core because it’s already pretty damn big already and many sites won’t need that level of functionality. I like Divi because of the ecosystem. If ET keep rolling in 3rd party functionality devs are going think – sod that for a game of soldiers.

    • Hi Richard,

      My apologies not all of the templates have been added yet! Now that Black/Cyber is over, our priority is releasing the rest of the templates and ramping up the documentation 🙂

  16. The first thing I immediately feel loud and clear from comments is the argumentative “People Skills” !! lol 🙂 sadly it distracts a little from the really great post. It also makes me notice that perhaps maybe? something may have been released without being properly prepared. This is a vibe I get. In turn this makes me not want to bother to look at a new plugin, just a thought from a Older person’s perspective 🙂 I guess you have to be on the planet a bit longer to see it this way….

    • Or perhaps it triggers for a reason….

      It’s a good article but it actually raises some important issues albeit from an angle about the role of plugins, the state of some of them and their developers and peoples expectations of both ET and Divi and their relationship with devs.

      Speaking as a mature 61 years who has been round the software block a few times I generally go into these things with an open mind and realistic expectations.

    • Hi Liz,

      I’m not sure if you’re referring to my comments specifically, but isn’t discussion what comments are for? 🙂

  17. Hello,
    I use this plugin on several website and I must say that it is a really great plugin. It really changes the way to make a website.

  18. Now that I know that ET will not be introducing this feature to Divi anytime soon I’m thinking of purchasing Divi Mega Pro. Does this plugin slow down your site in anyway?

    I’m trying to be carefully selective when adding plugins. But it looks like a really good solution for varying the look of the menu.

    • Nope 🙂 We’ve done lots of speed testing and no noticeable change in load time when the plugin is activated. Feel free to reach out to us directly if you have more questions.

Leave a Reply

Comments are reviewed and must adhere to our comments policy.

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest