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
Divi Marketplace customers
Once you have purchased your plugin on the Divi Marketplace you will get the ZIP file. In order to install DiviMenus, please follow these steps:
- Navigate to the WordPress Dashboard > Plugins > Add New.
- Click the Upload Plugin button and select the plugin file (divimenus.zip).
- Click install now and activate the plugin.
Once you have purchased your plugin at dondivi.com you will receive an email with the download link and your license key.
Install your new plugin & Activate 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.
The DiviMenus plugin is a Divi extension that 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 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.
They are informative names that are displayed along with your Menu Items. You can choose either to hide or display them, and also define whether or not they should be only displayed on hover.
Activate this option if you want the DiviMenu to be opened on page load. This might be useful if you want to display all the Menu Items when the page is loaded.
If this option is disabled, your DiviMenu elements will be displayed over the page content. If enabled, the plugin will make room to display the DiviMenu, so it will be displayed inside the module.
When displaying a DiviMenu inline, you might want to increase/reduce the module height depending on the DiviMenu status (opened / closed). You can handle this with the Equal Height Opened/closed field.
Bring to front
In most cases you don’t need to enable this option. However, the Menu Items might be placed over other columns and be under that other column elements. If you want the DiviMenu to ve over those elements you need to enable this option.
The Menu Item Titles give information to the Menu Item. As mentioned in the definition, a title is a informative name associate with a Menu Item.
This toggle field allows you to display Menu Item titles. Titles are enabled by default.
This select field allows you to choose whether display the Menu Item titles always or when hovering over the Menu Item.
If you select Always, you can make the titles clickables by activating the Make Clickable field. This way, the title will be a link rather than just an informative name.
If you select Hover, you can make the title behave as always on mobile and tablets.
Hide On Phone
No matter the option selected in the Display field, you can hide the titles on phone devices by using this toggle field.
You can set a background for the entire DiviMenu by using this Divi field.
The border radius will be automagically adjusted depending on the DiviMenu shape. However, if you don’t want a rounded background, you can switch on the Square Corners toggle field.
The Menu Button background is optional. You can disable by using this toggle field.
If enabled, you can style the background color and border.
This option will reduce the Menu Button size when the DiviMenu is open. Take this into account when using paddings. For eample, if this option is enabled and the DiviMenu Opening Padding value is 0, there will be a gap because of this effect, same happens with the Menu Button Padding.
Please watch the videos above to check out the stunning and easy way to align your DiviMenus (Left Center, Right, Justify).
The DiviMenu elements spacing can be set in the DiviMenus design tab.
Also, the entire DiviMenu padding and margin can be set in the Divi margin and padding fields.
The following screenshot shows the default style and spacing of a DiviMenu with text Menu Items.
Let’s go over each spacing field:
The DiviMenu Opening Padding field allows you to set the distance between the Menu Button and the Menu Items. The default value is 25px.
The Menu Button Padding field allows you to set the distance between the Menu Button content and the Menu Button Background. The default value is 15px.
The Menu Item Padding field allows you to set the distance between the Menu Item content and the Menu Item Background. This will be applied to each Menu Item, unless otherwise specified for custom Menu Items. Remember that you can override this field for each Menu Item. The default value is 15px.
The Equal Padding for Menu Items field allows you to display all the Menu Items equal in size. Please, disable this option to keep the Menu Items padding.
The following screnshot shows the previous DiviMenu with this option disabled.
The Background Padding field allows you to set the distance between the DiviMenu elements and the DiviMenu background. You can set a DiviMenu background in the DiviMenus content tab.
Finally, as mentioned above, you can set the DiviMenu margin and padding using the Divi fields.
Menu Item fields
If you turn on the Hide Menu Item toggle field, the Menu Item will be removed on the device(s) that you choose. If you also turn on the Preserve Space field, the Menu Item will be hidden instead.
When you click a Menu Item, something occurs. You can define this behavior by selecting a Link Type option as shown in the screenshot 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.
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).
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%.
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: This is the recommended way to reduce the popup size. 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.
Show (as of DiviMenus 1.2)
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 post and decide which ones show or hide when clicking a Menu Item or a clickable Menu Item Title.
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 is done.
First, you have to select the Show option from the Link Type dropdown:
Type here the CSS ID of the element you want to be associated with this item. You can bind any element of the current page / post to the Menu Item.
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 behaviour 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.
Finally, you might want to set the element initial visibility state when page is loaded. By default is hidden.
Menu Item Style
You can use custom style for a Menu Item from the Menu Item design tab. If not, the style will be inherited from the style set in the DiviMenus design tab.
You can override the Menu Item title in the Menu Item TITLE toggle.
You can also override the Menu Item Padding in the spacing toggle. Note: You don’t need to use custom style to set the padding.
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).
Deprecations & breaking changes
DiviMenus 1.1. removes the ALT field, located in the DiviMenus Design tab. Please use the new fields Menu Button Image ALT and Menu Items Image ALT instead.
DiviMenus 1.2. removes the Post, Page, Project and Product options of the Menu Item Link Type field, located in the Menu Item Content tab. Please use the URL dynamic field instead.