Divi Plugin Highlight: DiviMenus

Posted on November 15, 2020 by 12 Comments

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

DiviMenus is a powerful third-party menu builder module that makes it easy to build menus with unique user interfaces. The menus work well within the layouts and as navigation in the header. It also includes a popup system that displays Divi layouts from your library. In this Divi plugin highlight, we’ll look at DiviMenus to help you decide if it’s the right plugin for your needs.

Installing DiviMenus

Installing DiviMenus

Installation was straightforward. Upload the plugin in the plugins screen and activate it once it’s finished uploading. No other setup is needed.

DiviMenus Module

DiviMenus Module

A new module is added to the Divi Builder called DiviMenus. Let’s look at its settings.

Content Settings

Content Settings

The Content tab includes a section for submenu items, menu options, menu items, titles, background, and admin label. The default view shows the menu as a circled hamburger icon. The menu items appear around the icon according to the pattern you choose between circular, horizontal, and vertical. Show them opened, inline, with equal heights, and bring them to the front. All of these elements can be styled in the Design tab.

Menu Items

Menu Items

Menu items are the links in the menu and are added as submodules. Adding a menu item displays its icon with a title that appears on hover. You can change the title, icon, hide the menu item, disable the menu item, and add the link. This is the default design. I’m hovering over the menu item so it shows the title.

Menu Items

The link can be a URL, popup, or show an element. The URL can be any website link you want and you can have it to open in the same window or a new window.

Menu Items

Popup lets you select any Divi layout to use as a popup. It can include any Divi elements you want. It works only as a popup when this menu item is clicked.

Menu Items

I’ve added the first section of the contact page from the ET Realtor layout pack. It opens the layout as a popup that’s smaller than the screen and includes an overlay and a closing feature that turns the mouse cursor to an x if you hover outside of the layout.

Menu Items

The link can be a URL, popup, or show an element. The URL can be any website link you want and you can have it to open in the same window or a new window. This also allows you to create anchor links.

The Show link type can bind an element of the current page based on the CSS ID. This can be used to reveal hidden content, change the visibility state, show and hide elements, filter elements, recreate processes, etc., all on click.

DiviMenu Shape

DiviMenu Shape

Menu items can display in different shapes. This example displays the horizontal shape, which places them on a line to the right of the menu.

DiviMenu Shape

The circular shape places them in a circle based on the option you choose. The default places them around the menu.

DiviMenu Shape

You can also place them in a semicircle above, below, to the right, or the left of the menu.

Menu Button

Menu Button

The menu button includes options for placement, type, to hide the button, and to disable the button (which keeps it from being clickable). For position, you can set it to the right, left, or center. The button type can be an icon, image, or text. I’ve moved the icon to the right and selected a different icon in the example above.

Menu Button

Image lets you choose any image from your library to use in place of the menu icon. It adds a circle around the image.

Menu Button

Text allows you to enter the text you want to display. It’s also placed within a circle.

Menu Items

Menu Items

Menu Items can also be displayed as icons, images, or text, and you can disable them. This gives you control over them as a group rather than individually.

Menu Items

By selecting to show an image, each menu item’s module now has Image as the option rather than Icon. This allows you to add an image for each submenu independently.

Menu Items

The same goes for text. I’ve selected Text in the Menu Items options and now Text is the option in each of the submenus. The menu items grow to accommodate the text.

Titles

Titles

Titles give you control over the title that you give each submenu item. You can show or hide them, have them to display on hover or always display, make them clickable, and hide them on phones. I’ve selected to always show them and make them clickable.

Display Settings

Display Settings

Display Settings include options for the button, icon, menu items, text, titles, and alignment. Let’s take a closer look.

Menu Button

Menu Button

Menu Button gives you control over the background and border of the button. Change the colors, show the border, adjust the border radius and size, and enable the resizing effect. Resizing scales the button down when the menu is opened. In this example, I’ve changed the background color, added a border, adjusted the radius, and adjusted the border width.

Menu Button

The Menu Button Icon adjusts the icon color, font size, and lets you display it in bold. I’ve adjusted all three settings in this example.

Display Menu Items

Display Menu Items

Menu Items adjust the background color, border radius, border color, and border size. I’ve adjusted each setting in this example.

Menu Items Text

Menu Items Text

Menu Items Text lets you choose the font, make it bold and italic, choose the text color, and set the text size. I’ve adjusted each of these settings.

Menu Items Title

Menu Items Title

Menu Items Title adds options for the title position (choose from top, right, bottom, and left), background color, background padding, and lots of font adjustments. I’ve moved the titles to the top, adjusted the font size, added padding, and added a background color.

DiviMenu Alignment

DiviMenu Alignment

The alignment options adjust the alignment within the row. I’ve centered the menu in this example.

Submenu Content and Display Settings

Submenu Content and Display Settings

The submenu items also include Content and Display settings, but they’re limited to the types of menu settings you’ve chosen in the main settings. The Content tab includes settings for the menu item, icon, title, spacing, box shadow, and transform. I’ve adjusted the colors for the background, border, and font, changed the font size, and added a box shadow. I’ve also moved the title to the bottom.

Free DiviMenus Layouts

Free DiviMenus Layouts

There are lots of free layouts for DiviMenus to help you get started. They’re available from the publisher’s website using the link in the DonDivi dashboard menu. You’ll need to download and unzip them. Several include headers and popups. The layout is uploaded to the page itself, the header is added in the Theme Builder, and the popup is uploaded to the library.

For our examples, let’s look at a few of the free layouts and see how well they work with the Divi Builder and the Divi Theme Builder.

DiviMenus Coffee Layout

DiviMenus Coffee Layout

The Coffee layout comes with two sections and popups. This example shows the two sections added to the ET Coffee layout pack’s landing page. Both display their menus closed.

DiviMenus Coffee Layout

Clicking on the first menu opens it with a semicircle-right layout. Each of the menu items includes images and non-clickable titles.

DiviMenus Coffee Layout

Clicking one of the menu items opens the popup for that item. It includes a button so the customer can make a purchase. This popup was already linked to the popup in the library, so I didn’t have to add this myself.

DiviMenus Coffee Layout

The second section adds two modules that work independently. I’ve clicked on the first module to open its menu.

DiviMenus Coffee Layout

The popups work the same as the first section.

DiviMenus Mega Menu

DiviMenus Mega Menu

The Megamenu layout includes a layout, header, and popup. I’m only looking at the header. I’ve uploaded the header layout to the Theme Builder. There is a lot here that can be customized for my purposes including four DiviMenus modules, code, and lots of blurbs and text.

DiviMenus Mega Menu

My test site now displays the global header. This is the closed position.

DiviMenus Mega Menu

Here’s the megamenu opened. Each of the elements includes hover effects. I’m hovering over Service 2 in the example above. It’s difficult to tell in this image but it does have a shadow effect at the bottom of the menu.

Extra Tools and Help Center

Extra Tools and Help Center

A new menu item is added to the dashboard called DonDivi. Clicking this opens a screen where you can enable several extra tools and see links to the help center including documentation, support, and the free DonDivi layouts.

Extra Tools and Help Center

Visual Builder quick-link lets you go straight to the Divi Builder from your lists of pages, posts, and layouts. Rather than launching the WordPress editor and then having to select the Divi Builder, this automatically opens the page or post with the Divi Builder.

Extra Tools and Help Center

Layouts Shortcodes lets you place sections, rows, and modules within any Divi module that can take a shortcode. It adds the shortcode to each layout on the list, so all you have to do is copy it and paste it where you want it to appear.

Purchase and Expand DiviMenus

Purchase and Expand DiviMenus

DiviMenus is available in the Divi Marketplace. It costs $49 and includes unlimited website usage and one year of support and updates.

There are also several expansions available that add new features to DiviMenus.

  • DiviMenus On Media lets you place custom icons, images, or text on media such as images and videos.
  • Floating DiviMenus allows your DiviMenus to float on the page, so they remain in place with the user scrolls. You can hide, replace, or relocate it on single pages.
  • DiviMensus Sharing adds a share option that lets you create social media sharing menus using DiviMenus.

Ending Thoughts

That’s our look at the DiviMenus plugin for the Divi Builder. It’s not difficult to use and it can build some interesting menus. I especially like that it’s not just for headers. It doesn’t just feel like a menu module. It feels more link a UI module that can make menus and a lot more.

Some of the elements are limited. For example, even though the menu items use icons, images, and text, you can’t use a mix of them. You can only choose one type. Also, popups can only be tied to the menu items.

Even with these minor limitations, I’m impressed with the kind of menus that can be made with this module. If you’re interested in creating unique menus for Divi, I recommend giving DiviMenus a look.

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

Featured Image via MKdesigner / shutterstock.com

Divi Anniversary Sale

It's The Divi Anniversary Sale! Save Big For A Limited Time πŸ‘‡

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

Access The Sale
Divi Anniversary

Divi Events Calendar

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

View Product

6026 Sales

Divi Supreme Pro

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

View Product

8448 Sales

Divi Carousel Module 2.0

Robust and extremely customizable carousel module for divi.

View Product

6922 Sales

Divi Contact Form Helper

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

View Product

1630 Sales

Divi Plus

A versatile multipurpose plugin with lots of modules to design & ...

View Product

5677 Sales

DiviMenus

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

View Product

4216 Sales

Table Maker

Divi-Modules – Table Maker brings beautiful responsive tables to the ...

View Product

5412 Sales

Divi Masonry Gallery

Create awesome masonry galleries. With category filter and pagination.

View Product

3283 Sales

Premade Layouts

Check Out These Related Posts

Divi Plugin Highlight: Divi MadMenu

Divi Plugin Highlight: Divi MadMenu

Posted on March 22, 2023 in Divi Resources

Divi MadMenu is a header and menu creation plugin that expands the possibilities of your Divi headers and menus. Divi MadMenu comes with a horizontal menu module and a vertical menu module. You can fully customize every aspect of your menu with extensive design options, allowing you to create...

View Full Post
Get a Free Wellness Layout Pack for Divi

Get a Free Wellness Layout Pack for Divi

Posted on March 20, 2023 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Wellness Layout Pack that’ll help you get your next Wellness website up...

View Full Post

12 Comments

  1. πŸ’œ 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 β€οΈπŸ‘

  2. 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.

  3. 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.

  4. 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! πŸ™ƒ

  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. 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!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

πŸ‘‹ It's The Divi
Anniversary Sale!
Get The Deal
Before It's Gone!
Join To Download Today