Mega menus are a popular design element that can give your Website a burst of elegance while offering visiteurs an additional navigation layer. There are several ways to add mega-menus to Divi. One of the easiest methods I've used is toa 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 link in the menu, but you can go even further and add them to any element of a Divi layout just by adding a CSS class.
It is ideal for creating menus and popups with store modules, images, sliders, portfolios, icons, blurb, videos, blogs, etc. It also works with Extra.
Create a 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 have created and create a new menu. When you click to add a new menu, you will see an editor for the menu post type. The screen is simple, but there's a lot going on here.
Publisher - you can create the mega-menu or a tooltip using Divi Builder.
Mega Pro Background - you can select the background and font colors.
View locations - choose all pages or name specific pages, then enter exceptions.
Mega Pro Animation - select an animation. Choose from offset, offset, perspective, fade, or scale.
Mega Pro Triggers - add a trigger as a CSS selector. Once you save it, you will see the CSS class you are going to paste into the CSS class field of a menu item, module, row, or section. This is what is clicked or hovered over to display the menu. Everything can be used as a trigger and not just a menu item. This means that 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 margins in pixels, choose a percentage of width and activate an arrow. Activating the arrow reveals more customizations where you can choose the type of arrow (triangle or round), choose the color, set the width and height, and preview the arrow.
customizations the close button: activate the close button on the desktop or on the mobile and customize the close button. If you enable it, customizations for text color, background color, font size, border radius, fill, and display are previewed.
Additional parameters Mega Pro - choose the type of trigger (hovered or clicked), the type of output (hovered or clicked) and enter the exit delay.
Divi Mega Pro Models
The developer has provided several models for Divi Mega Pro. When you purchase the plugin, these templates are available in your account, in the Plugin Layout Templates tab. These are great for helping you get started with designing your mega menus. I will use a few in my examples.
Divi Mega Pro Menu
Once you create a mega menu, it will appear in the list. Here you can edit, quickly 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, be sure to paste it without additional spaces. Otherwise, all the mega-menus on the page will not work anymore.
I'm sure it wouldn't be easy to add, but a copy and edit feature would be handy. You can save the Divi layouts to your library for reuse, but this does not include the surrounding settings.
Adding a trigger
In the Mega Pro Triggers field, you will see a single Mega Pro class. Copy and paste it into the CSS Class field of the element you want to use as a trigger.
To add the CSS Class field to a menu item, you must enable CSS classes. From the menu screen, select Screen options and enable CSS Classes.
Paste the CSS class into the menu field. Now this menu item will display the mega menu on hover and take you to the page on click.
You will notice that Divi Mega Pro is also an option in the menu link options. They're great for adding a menu item to the menu that isn't actually going anywhere. Add the CSS class like any other menu item.
Contact section on the mega menu
The menu opens in hover. I can always click on the Contact link to open the contact page if I want to. If I just wanted the mega menu to show, I could just use the Contact main menu link and rename it (like in the example above).
In this one, I changed the colors slightly using the background and display settings rather than using Divi Builder. It adds a bar at the bottom of the menu.
Simple call to action with menu columns
This is one of the models that add multiple columns. I make adjustments to the background and font colors. I also added an arrow and made the width 75%.
The background color and font options add a bit more to make it stand out. I left the default alignment, which places the menu to the right of the screen. You can adjust the positioning in the settings.
tabs
The tab template includes a code module with jQuery to create the hover effect.
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
For this one, I added the CSS class to some blurb so that it opens a little pop-up on hover. The popup is just an image with a shadow below.
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 anywhere you want.
For this one, I created a popup to show an image with some 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.
The pop-up now appears to the left and top of the image when I hover over it. I added transparent background color, border color, fill and rounded outline.
License and documentation
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 one time
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.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEME [/vcex_button][/vc_column][vc_column width=” 1/2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family =”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Other Divi tutorials
- 5 websites for restaurant use Divi theme
- How to add text on a Divi WooCommerce product
- How to change the menu color between Divi pages
- How to personalize the grids of a blog with Divi
- How to use the role Divi editor on WordPress
- How to create a full screen Divi slider
- How to change the color of menus between Divi pages
- Features you probably do not know about Divi
- How to use Divi Builder on WordPress
- How to use the Divi video scrolling module
- How to use the Divi Builder Flip module
- How to add a testimonial module on Divi Builder
- How to use the Divi text module
- How to create a slider on Divi
- How to edit a Divi user role
- How to use the Divi Social Media module
- How to use the shop module on the theme WordPress Divi
- How to use the Divi sidebar module
- How to use the Divi Price Table Module
- How to use the title module of Divi publications
- How to add a video module of Divi
- How to use the article navigation module
- How to use the Divi search module
- How to use the Divi wallet module
- How to use the person module on Divi Builder
- How to use the wallet module with Divi filter
- How to use the full width slider module
- How to use the Divi Builder Image Module
- How to use the full-width navigation module of Divi Builder
- How to use the image gallery module
- How to use the Divi Builder Full-Width Card Module
- How to use the Divi Full Width Portfolio Module
- How to use the Divi full-width header module
- How to use the Divi Counter Module
- How to use the articles slider on Divi Builder
- How to use the Divi Email Optin module
Hello:
Where can I see how a pop-up window is made?
I have no way of getting it. I was only able to create a mega menu, but the pop-ups I linked do not open.
I came across a few emails with Divi Life but they didn't clarify anything to me.
Thank you very much.
Optin Monster: https://optinmonster.com