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
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.
Publisher - you can create the mega-menu or a tooltip using Divi Builder.
Mega Pro Background - you can select the background and colors of the font.
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 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.
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]
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 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
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
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
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.
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.
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.
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
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
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%.
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.
The tab template includes a code module with jQuery to create the rollover 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 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.
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.
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
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
- 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