Divi Plugin Highlight: DiviMenus

Last Updated on July 24, 2023 by 18 Comments

Divi Plugin Highlight: DiviMenus
Blog / Divi Resources / Divi Plugin Highlight: DiviMenus

DiviMenus is a third-party plugin for Divi. Itโ€™s a menu-builder that makes it easy to manually create new menus to use instead of the default WordPress menus. Itโ€™s now been updated with a new module to create mega menus, dropdowns using WordPress menus, and all sorts of new creative ways to navigate through your content. In this post, weโ€™ll look at DiviMenus via the Divi Popup Picnic Layout Pack to help you decide if itโ€™s the right product for your needs.

What You Get with DiviMenus

Before we dive into the module, letโ€™s take a look at some things you can expect from the DiviMenus plugin.

Features

The DiviMenus plugin includes 2 different modules: โ€œDiviMenusโ€ and โ€œDiviMenus Flexโ€. You can use the one that suits you the best and assign link types to your menu items.

An example of this is being able to toggle entire Divi Sections as a Tabs module. This allows you to reveal any Layout stored in your Divi Library as a Popup or Mega Menu. You can also reveal a WordPress Menu stored in Appearance > Menus as a Collapsible Dropdown Menu. The features are advanced and completely customizable to your needs!

DiviMenus tutorial

Free Layouts

DiviMenus also comes with a bunch of free layouts that youโ€™re able to use when signing up. Letโ€™s take a look at some examples.

DiviMenus tutorial

Example #1

The first layout example highlights different marker colors on click. You can view the demo here.

DiviMenus tutorial

Example #2

The second example lets you reveal any content by clicking on images displayed in a circular shape. View the live demo here.

DiviMenus tutorial

Example #3

The last example lets you switch between Divi Sections by recreating a versatile Tab module. You can view the live demo here.

DiviMenus tutorial

DiviMenus Modules

DiviMenus adds two modules to the Divi Builder. Firstly, is the original module called DiviMenus. Secondly, is a new module called DiviMenus Flex.

DiviMenus

DiviMenus

DiviMenus includes submodules for each of the menu items. You can also adjust the menuโ€™s shape, choose how it opens, choose the menu button type, adjust the title, choose icons, specify the URL, and more. The default is a hamburger icon within a gray circle. It can create menus that open on click or hover, menus that float in place, mega menus, and lots more.

DiviMenus

Submodule

The submodule adds the items to the menu. Iโ€™ve added three menu items in the example below. Give each one a title, choose an icon, adjust how they work, and style them individually from the submoduleโ€™s settings. On the front end, these menu items show when the user clicks the hamburger icon. Additionally, you have the option to display the DiviMenu already open when the page loads and even hide the Menu Button.

DiviMenus

The Design tab gives you control over the colors, sizes, borders, spacing, etc. If you donโ€™t use custom styles in the Design tab, the menu item will inherit the styles from the main module. In the example below, Iโ€™ve changed the background color, icon color, and icon size. I also added a border to the menu items and changed the color of the hamburger menu.

DiviMenus

DiviMenus Settings

DiviMenu Shape sets the menu in a specific layout. Choose from horizontal, vertical layout, or circular. The default is horizontal. This example shows Vertical. You can also adjust its open state, display inline, equal the heights for opened and closed, and bring the menu to the front.

DiviMenus

The Circular option opens another menu where you can choose the menu itemsโ€™ alignment. Choose from a full circle or a semicircle and choose its location. This example shows Semicircle โ€“ top. The items create a semicircle at the top of the menu icon.

Divi Menus

This example shows Semicircle โ€“ left. All the items circle the left half of the menu icon.

DiviMenus

Menu Button

The Menu Button settings let you use an icon, image, or text for the menu button and set its position within the open menu. The default is an icon. You can also hide, disable, or display it on click or hover. This example shows an image. Iโ€™ve selected a Divi logo.

DiviMenus

This is Text. Enter any text you want into the field.

DiviMenus

Menu Button Title

Menu Button Title adds a title to the menu icon. You can enter the text, choose when it displays, make it clickable, and hide it on phones.

DiviMenus

Menu Items

The menu items can also be icons, images, or text. Icons are the default. This example shows an Image.

DiviMenus

Once you select Image, the image settings open in the submodules, allowing you to specify an image for each menu item.

DiviMenus

If you choose Text, each menu item displays the title youโ€™ve given it.

DiviMenus

Menu Items Title

You can also show the menu item titles along with the icons and images. Choose to display them on hover or always. You can also make them clickable and hide them on phones. This setting did work for me in the Divi Visual Builder.

DiviMenus

DiviMenus Design Settings

The Design tab includes settings for the main menu and the menu items. Adjust the sizes, icon and text colors, background colors, border shapes, border colors, choose the text alignment, add padding, etc. For the text alignment, set the text at the top, bottom, right, or left of the menu item. Iโ€™ve adjusted many of these settings in the example below to match our layout pack better.

DiviMenus

You can also adjust the DiviMenu alignment and choose to justify the closed DiviMenu, which will move the hamburger icon when the menu is closed. For this example, Iโ€™ve justified the closed DiviMenu. The menu icon moves to the center when the menu is closed. If you choose an alignment option, the menu icon remains in that location when closed.

DiviMenus

Building Popups and Mega Menus with DiviMenus

Each submodule contains a section for links. Here, you can specify the URL, how the URL opens, enable it as active, set it to close on click, and choose the link type.

DiviMenus

Link Type

The link type allows us to create some interesting menus. This includes URL, Popup, and Show. URL opens the page youโ€™ve entered as the URL.

DiviMenus

Popup Link Type

The Popup link type lets you choose a layout from your Divi library to display when the menu item is selected. Have it show on hover, add a close icon, etc. Iโ€™ve chosen a layout called Contact Form to display on hover.

DiviMenus

When the user hovers over the menu item, the homepage layout displays as a popup. You can style the popup in the Design tab.

Show Link Type

Show provides settings to show or hide elements. It includes CSS options to bind the elements and is a little more complicated than the other settings. Itโ€™s a good setting to use because you can create submenus. You just have to know the CSS IDs of the elements you want to show. You can also add classes to the elements.

DiviMenus

DiviMenus Flex

DiviMenus Flex is the newest module. It uses CSS flexbox and the new Sub Link Type to create mega menus and dropdown menus. It also works with WooCommerce and Easy Digital Downloads, and displays the number of items in the shopping cart. In this example, Iโ€™ve already added four menu items.

DiviMenus

Submodules

The submodules create the menu items. Add a title, choose the content type, disable the click event, show the icon/image, and choose between hover and click options. It also includes link options to specify the URL and how it works, choose the link type to create popups and mega menus, or even show/hide any other element of your page content.

DiviMenus

DiviMenus Flex Settings

The settings include direction and to show opened or closed. For the direction, select between horizontal and vertical. Horizontal is the default setting. Iโ€™ve selected Vertical in this example.

DiviMenus

The logo settings let you add a logo to the menu. You can make it clickable and add the URL.

DiviMenus

The menu button settings let you set the buttonโ€™s position. Choose from first or last. You can also choose the content type. Select between icon, image, or text. Other options include hiding the button, disabling the button, and applying hover effects. Text provides a field where you can enter the text you want to display. Iโ€™ve added text and moved the button to last in this example.

DiviMenus

Text also includes an option to add an icon or an image to the button. Choose the icon or image, and the placement, add padding, hide the text on certain devices, hide the icon or image on certain devices, and apply hover options.

DiviMenus

Design Settings

The Design settings include lots of new features. Set the horizontal and vertical alignment, make the menu items fullwidth, make the menu button fullwidth, and adjust the logo. The logo settings let you choose the logo placement, alignment, width, and absolute position. Iโ€™ve adjusted the fullwidth menu button and horizontal alignment settings for the example below.

Adjust the colors, fonts, sizes, padding, position, and lots more. Adjust the menu button and menu items separately. The menu items follow the settings in the Design tab unless youโ€™ve adjusted them in their submodules. For this example, Iโ€™ve added icons, and text to the menu items and then adjusted their background and font colors. Iโ€™ve adjusted the same settings for the button.

DiviMenus

Building Popups and Mega Menus with DiviMenus Flex

The link options in the menu item submodules let us use DiviMenus Flex to build regular menus, add dropdown menus, create popups, and build mega menus. The Link Type option does this for us. If we choose URL, the default setting, the menu works as normal. Add the link, choose how it opens, choose its active state, and choose how it closes.

DiviMenus

Popup Link Type

The popup link type lets you choose a layout from your Divi Library to use as a popup. If you choose to show the close icon, youโ€™ll see an icon picker.

DiviMenus

The Design tab adds options to style the popup, allowing you to apply customizable entrance and exit animations to enhance its visual effects.

Sub Link Type

The Sub Link type is interesting. It lets you choose something to use as a dropdown menu. Choose from a WordPress menu or a Divi Library layout.

DiviMenus

If you choose a WordPress menu, you can select the menu from those youโ€™ve created. You can enable to preview it in the Builder, use a custom display, choose how the menu behaves, make it collapsible, enable accordion, show a direction arrow, choose the icon, etc. This is great for creating custom menus that also use the standard WordPress menus. Youโ€™ll need to create a different menu for each one of the menu items where you want to display a WordPress menu.

DiviMenus

If you choose Divi Library, you can select the layout to display. This allows you to use Divi layouts as mega menus. To enhance your editing experience, you have the option to enable the โ€œPreview in the Builderโ€ feature. This allows you to view the selected Divi layout within the Divi Builder itself, providing a glimpse of how it will appear outside of the builder. Itโ€™s worth noting that certain styles may appear slightly different due to the specific elements within the layout. However, this preview feature serves as a helpful aid, and the final result will be accurately displayed on the frontend.

DiviMenus tutorial

Show Link Type

DiviMenus Flex also includes the Show link type that will show elements based on the CSS IDs or CSS Class youโ€™ve included. Toggle the visibility, keep it visible, show on hover, hide on button click, hide on page click, and choose the initial state on page load. For example, when clicking on a menu item, you can reveal a specific element with a unique CSS ID, or simultaneously reveal multiple elements on your page with the same CSS Class.

DiviMenus

Where to Purchase DiviMenus

DiviMenus is available in the Divi Marketplace for $49. It includes unlimited usage and one year of support and updates and comes with a 30-day money-back guarantee.

Ending Thoughts

Thatโ€™s our look at DiviMenus. This is a powerful menu builder. Iโ€™ve only scratched the surface of what DiviMenus can do. I like that it now includes two modules and adds a logo, the ability to use WordPress menus as submenus, and the ability to easily create mega menus with Divi layouts. I found it intuitive, and it includes all the style options to customize every element of the menu. If youโ€™re interested in a powerful menu builder, DiviMenus is worth a look.

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

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time ๐Ÿ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday

Divi Plus

A versatile multipurpose plugin for Divi with 60+ new modules and ...

View Product

9200 Sales

Divi Supreme Pro

With 60+ Divi premium modules and extensions to choose from. Take ...

View Product

13014 Sales

Divi Essential

All in one set of 64+ design modules with 600+ layouts and 5 ...

View Product

5388 Sales

DiviFlash

The most powerful Divi plugin with 60+ modules, 15+ extensions, 40+ ...

View Product

2727 Sales

DiviMenus

A powerful menu builder that brings the coolest designs and popups ...

View Product

7013 Sales

Divi Events Calendar

Easily display and style events from The Events Calendar with custom ...

View Product

9742 Sales

Table Maker

Table Maker brings beautiful responsive tables to the Divi-Builder. ...

View Product

8282 Sales

Divi Contact Form Helper

Upgrade the default Divi Contact Form with tons of missing, premium, ...

View Product

4946 Sales

Premade Layouts

Check Out These Related Posts

Divi 5 Update: Public Alpha Version 5

Divi 5 Update: Public Alpha Version 5

Posted on December 10, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 5ย today. We release new Divi 5 versions every two weeks, and it gets better each time! If you haven’t tested Divi 5 yet, try it and let us know what you...

View Full Post

18 Comments

  1. I’ve been using this plugin for years, and now it’s a must for every website I develop. It’s powerful and easy to use, and not only for main menu, but you can also create floating menus that are activated on click, and work great in mobile websites. And you won’t find a better support! Ramon is a person who is always willing to help, even recording videos to show you how to fix the problem. Grande Ramรณn!

    • Can you do mobile menus with this ? I read that 60% of all users come from a mobile device but it seems to
      Be an afterthought with divi

    • Thank you Ruben! ๐Ÿ˜ Gracias!

  2. Wow, I must say, DIVI plugins have been an absolute game-changer for my web design projects! The versatility and ease of use they bring to the DIVI theme are unmatched.

  3. Itโ€™s very helpful for me. Although it looks pretty, I really wish some of these mega plugin authors considered accessibility as a priority or even a consideration. While almost every country has some sort of accessibility guidelines, none of these developers seem to give a single thought to accessibility. Navigation is pretty important.

  4. This looks so cool! I will definately give this a closer look. It looks like, this plugin can give a webdesign a completely different look.

    • Thank you Anders! ๐Ÿ˜ Happy building!

  5. WOW… $63.75 and that is yearly ROFLMAO…. all in with addon’s because everything that is shown here is not everything you get unless you buy the DiviMenus and a few additional addons… for a little menu tool…. if that doesn’t make you learn to code not sure what well…

    • Hi Noah, I’m afraid you’re wrong… DiviMenus costs $49 (even cheaper by taking advantage of the current Cyber Monday offer) and includes unlimited website usage, 1 year of support, updates, and premium layouts. Everything shown in this post is made only by using the DiviMenus module, without any other additional add-ons, although of course you can get even more amazing functionalities by expanding DiviMenus as Randy explains at the end of the post … But you are right, after all DiviMenus is just a tool to make work easier for many web designers, and end customers, since they can edit all this from just 1 module in the Visual Builder…, and you simply prefer to do all this with code instead. Great, isn’t it?

  6. The coffee menu is adorable!
    For everyday use I tried a lot of Divi Menu plugins so far and all had their weaknesses.
    I wish Divi would come with some more menu options itself. Especially the mobile menus!

    • Thank you Judith! Divi is better and more powerful every day, and surely very soon it will amaze us again with what you say and we all hope too! ๐Ÿฅณ Meanwhile from DonDivi we create tools that make waiting easier! ๐Ÿ™ƒ

  7. I have used Divi Plugins and Themes for a long time now. And I must say the plugins and the tools and even the demos are satisfactory.
    Thanks for sharing a review.

  8. Although it looks pretty, I really wish some of these mega menu/ Divi menu plugin authors considered accessibility as a priority or even a consideration. While almost every country has some sort of accessibility guidelines, none of these developers seem to give a single thought to accessibility. Navigation is pretty important.

    • In Canada we have AODA, which stipulates heavy fines for websites that are not WCAG 2.0 compliant as of January 2021. Divi’s menu isn’t currently 100% compliant as it is, I can’t even consider adding something that decreases accessibility even further.

  9. ๐Ÿ’œ T H A N K ยท Y O U ๐Ÿ’œ
    Really proud to read this great review of our DiviMenus plugin on ET Blog. Thanks Randy!. More stunning features coming soon! ๐Ÿฅณ

    • +1 โค๏ธ๐Ÿ‘

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

๐Ÿ‘‹ It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today