A powerful menu builder that brings the coolest designs and popups to Divi!
The Divimenus module is included in the DiviMenus Divi extension. If you have already installed DiviMenus, you can skip this section and start using the module.
I have purchased through Elegant Themes Marketplace
Products purchased from The Divi Marketplace will work under your current Divi License, so no additional license is required. Just install your plugin, activate it and start using it!
The only difference between the “Divi Marketplace” version and the “DonDivi version” on our site is the License key.
Nothing to worry about!
I have purchased through DonDivi
If you have purchased this product at DonDivi, you will receive an email with the download link and your license key.
- Install the ZIP file into your website and Activate it.
- Introduce your License Key at DonDivi > Licenses and Activate it.
- Use the Check License button whenever you want to check the status of your License.
After installing this Divi extension, two new modules are added to the Divi Builder called DiviMenus and DiviMenus Flex.
You can think of them as two different approaches for creating the final menu-like design.
DiviMenus Flex uses CSS Flexbox and lets the browser to position the elements. This is the recommended menu builder for those who are used to work with Divi built-in modules.
DiviMenus, on the other hand, is the responsible for positioning the elements. This is the recommended menu builder for those who want to go one step further with absolute-positioned menus, such as circular ones or menus with titles near the menu items.
Please, choose the one that best fit your project. Whichever approach you use, you will be able to bring the coolest designs to Divi.
This is the documentation for the DiviMenus module. The DiviMenus Flex module documentation is available here.
The DiviMenus module allows you to create* beautiful Divi designs using a menu-like builder in real time.
DiviMenus is not just a menu module as the name suggests. Actually, you can use it to build a menu, a grid, a custom layout creator, a button inside an image or video, a social sharing tool, a filter system, or even a popup generator. The possibilities are almost endless.
You can have a look at some pre-made layouts here.
DiviMenus is fully responsive and compatible with the latest versions of Divi, the Visual Builder and the Theme Builder. Also, you can also take advantage of the coolest Divi features, such as the mobile options, the hover options, dynamic content for the destination links, etc.
* DiviMenus is a powerful menu builder (i.e. you can use it to create new menus, not to render your WordPress menus). This module will allow you to create and customize new kinds of menus instead of only customizing existing WordPress menus as most menu modules do.
1. Go to the Visual Builder and choose the DiviMenus module from the Divi modules list.
2. Click “Add New Menu Item”. This way, a dummy Menu Item will be added next to the Menu Button.
3. That’s it! Start editing your DiviMenu template by using the module fields as described below!
This option is the most commonly used as you probably will want the Menu Item to open a destination URL.
You can enter manually the URL. In case you want to enter a existing post, page, project or any WordPress post, you can take advantage of the Dynamic Content option that the plugin offers, as shown in the following screenshots.
Once the Dynamic Content is selected, we only have to choose the link we want to add. For this example we will select the Post link and a list with the existing posts will be displayed as shown below.
This is the recommended way of entering your website URLs. Please, use this option whenever possible and enter manually the link for custom and external URLs.
Enable Active State
If this toggle field is enabled, the Menu Item will become active when the introduced URL matches the current page URL.
This is also useful when creating anchor links, as the Menu Item active state will change on page scroll.
Remember that in order to display active Menu Items, you first have to apply hover styles to them. This way, when the Menu Item URL matches the current page URL, the hover styles will be applied and the Menu Item will be highlighted.
See also the Popup Link Type documentation
This option allows you to show a popup rather than opening a destination URL.
You can pop up any layout saved in the Divi Library by selecting them from the Divi Layout select field.
Since a popup is a Divi layout being displayed over the page content, you can create your popup in the Visual Builder, and afterwards save it into the Divi Library.
Popups can be a either a Section, a Row or simply a Module.
In order to ensure the best popup experience, the popup will keep all the styles and animations even when they are clicked over and over as showing here or here (please, click on some menu item and close the popup several times).
You can use the Location field to change the popup position (there are 9 options). Default is center.
The popup will take up to 80% of the screen width. You can change this default value by going to the Design Tab -> Popup -> Popup Max Width (as of diviMenus 1.3). For example, if you want the popup to be full width, you have to change this field value to 100%. Same for decreasing the popup width.
DiviMenus will set automatically the width to the layout (Section / Row / Module) if necessary so that you don’t have to adjust anything in order to display the popup correctly.
Also, DiviMenus will restrict the width of the layout in order for the popup width to be smaller than the screen width on larger screen sizes. You can disable this limit behavior by going to the Design Tab -> Popup -> Limit Width on Large Screens.
Of course, you can go to the Divi Library and use the Divi Settings Modal to customize the popup size:
- Design Tab > Sizing > Max Width: For example, you may want your popup to be only 400px in desktop.
- Design Tab > Spacing > Margin & Padding: You may also want to change or remove the spacing around, especially in sections and rows layouts.
Note: The padding is part of the popup size, so we recommend that you use a background color in case your popup includes outer padding, in order to recognize all the popup parts.
All Popups have a space around by default which is required to close them (you can add them a close button as well). You will notice that the pointer becomes an X there.
The default overlay color is Black 40%: rgba(0,0,0, 0.4)
You can customize the Overlay in the Design Tab.
Enter and Exit Effects
You can animate the popup both when opening and when dismissing.
See also the Show Link Type documentation.
This option allows you to show an element rather than opening a destination URL.
This opens up a lot of possibilities related to visibility. Basically, you can design the elements of your page and decide which ones to show or hide when clicking or hovering a Menu Item.
For example, you can create buttons to show and hide elements, content toggles and visibility filters. You can also recreate menu sublevels, which are very convenient when it comes to menus! (remember that DiviMenus is not a module to render WordPress menus, it is a powerful tool that brings to Divi the coolest designs using a menu-like builder).
How to show and hide elements
Even though using this Link Type is pretty straightforward, we are going to guide you through all the steps so you can see how it works.
First, you have to select the Show option from the Link Type dropdown:
Element CSS ID
Type here the CSS ID of the element you want to associate with this item. You can bind any element of the current page to the Menu Item. Since DiviMenus 2.1, you can also bind multiple elements by typing their CSS IDs separated by commas.
Element CSS Class
Type here the CSS Class of the element (or elements) you want to associate with this item. You can bind any CSS class to the Menu Item, as well as multiple CSS classes separated by commas.
Show On Hover
Here you can choose whether or not this Link Type should be triggered when hovering over the menu item. If enabled, the element will be displayed on Menu Item hover and click.
This is the expected behavior of the element when you click the Menu Item.
If the Toggle Visibility field is turned on, the element will become visible if it was hidden and the other way around.
If you turn off the Toggle Visibility field, you will show the element, no matter the previous visibility state.
Here you can define the expected behavior once the element has been shown. If you turn on this module field, the element will be visible even though you click on another Menu Item, otherwise the element will be invisible.
This option is useful to reproduce the different steps of a procedure.
Hide On Menu Button Click
Here you can choose whether or not to hide the element when closing the DiviMenu. This module field is enabled by default
Hide On Page Click
Here you can choose whether or not to hide the element by clicking outside.
Finally, you might want to set the element initial visibility state when page is loaded. By default is hidden.
This field will be visible if the Show On Hover field is enabled and will allow you to open the URL introduced in the URL field rather than showing an element (or elements) when clicking the Menu Item.
This way you will be able to open a URL on Menu Item click and show an element (or elements) on Menu Item hover.
Keep in mind that this option won’t work on touch screen devices (mobiles, tablets, etc) in order to be able to show elements when tapping the Menu Item.
Also, if the Enable Active State toggle field is enabled, the Menu Item will become active when the introduced URL matches the current page URL. This is also useful when creating anchor links, as the Menu Item active state will change on page scroll.
Enter and Exit Effects
You can animate the element both when showing and when disappearing.
Bring to Front doesn’t work
If you have enabled this field for a DiviMenu and some Menu Items are being displayed under other elements, go to those elements column and check if this column contains a DiviMenu. If so, check if that second DiviMenu has the Bring to front field enabled as well. As the field description says: Check to display this DiviMenu over other columns content (DiviMenus in those other columns must have this option uncheked).
Popup Link Type not showing up
Problem: The popup option is not being displayed in the Link Type select field.
Possible cause: 1. You don’t have any layouts in the Divi Library. 2. You do have, but all of them contain DiviMenus.
Solution: Add layouts to the Divi Library.
Saved layouts not being displayed in the popup select
Problem: The popup select is not displaying a layout you created and saved in the Divi Library.
Possible cause: Your layout contains a DiviMenu.
Solution: Use layouts that do not contain Divimenus for your popups.
Menu Button / Menu Button background
Menu Button TEXT
.dd-divimenu .dd-menu-button-content > .dd-text
Menu Item / Menu Item background
Menu Item TEXT
.dd-divimenu .dd-menu-item-content > .dd-text
Menu Item TITLES
Menu Item TITLES span
.dd-divimenu .dd-title > span
Active Menu Item
Active Menu Item TEXT
.dd-divimenu .dd-menu-item-content.active > .dd-text
Active Menu Item TITLE
.dd-divimenu .dd-tooltip.active > .dd-title
Active Menu Item TITLE span
.dd-divimenu .dd-tooltip.active > .dd-title > span
1. Define the ELEMENTS
- Menu Button
- Menu Items
2. Define the STYLE
- Customizing MB & MI
- Size, Colors, Fonts
- Padding, Shadow
3. Define the LINKS
- Post / Page
4. Define the POSITION