{"id":817993,"date":"2020-11-15T16:00:26","date_gmt":"2020-11-15T16:00:26","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/divi-plugin-highlight-divimenus\/"},"modified":"2022-12-10T13:48:35","modified_gmt":"2022-12-10T13:48:35","slug":"divi-plugin-highlight-divimenus","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/divi-plugin-highlight-divimenus\/","title":{"rendered":"Divi Plugin Highlight: DiviMenus"},"content":{"rendered":"\n
\n

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\u2019ll look at DiviMenus to help you decide if it\u2019s the right plugin for your needs.<\/p>\n

Installing DiviMenus<\/h2>\n

\"Installing<\/p>\n

Installation was straightforward. Upload the plugin in the plugins screen and activate it once it\u2019s finished uploading. No other setup is needed.<\/p>\n

DiviMenus Module<\/h2>\n

\"DiviMenus<\/p>\n

A new module is added to the Divi Builder called DiviMenus. Let\u2019s look at its settings.<\/p>\n

Content Settings<\/h3>\n

\"Content<\/p>\n

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.<\/p>\n

Menu Items<\/h4>\n

\"Menu<\/p>\n

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\u2019m hovering over the menu item so it shows the title.<\/p>\n

\"Menu<\/p>\n

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.<\/p>\n

\"Menu<\/p>\n

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.<\/p>\n

\"Menu<\/p>\n

I\u2019ve added the first section of the contact page from the ET Realtor layout pack. It opens the layout as a popup that\u2019s 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.<\/p>\n

\"Menu<\/p>\n

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.<\/p>\n

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.<\/p>\n

DiviMenu Shape<\/h4>\n

\"DiviMenu<\/p>\n

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.<\/p>\n

\"DiviMenu<\/p>\n

The circular shape places them in a circle based on the option you choose. The default places them around the menu.<\/p>\n

\"DiviMenu<\/p>\n

You can also place them in a semicircle above, below, to the right, or the left of the menu.<\/p>\n

Menu Button<\/h4>\n

\"Menu<\/p>\n

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\u2019ve moved the icon to the right and selected a different icon in the example above.<\/p>\n

\"Menu<\/p>\n

Image lets you choose any image from your library to use in place of the menu icon. It adds a circle around the image.<\/p>\n

\"Menu<\/p>\n

Text allows you to enter the text you want to display. It\u2019s also placed within a circle.<\/p>\n

Menu Items<\/h4>\n

\"Menu<\/p>\n

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.<\/p>\n

\"Menu<\/p>\n

By selecting to show an image, each menu item\u2019s module now has Image as the option rather than Icon. This allows you to add an image for each submenu independently.<\/p>\n

\"Menu<\/p>\n

The same goes for text. I\u2019ve 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.<\/p>\n

Titles<\/h4>\n

\"Titles\"<\/p>\n

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\u2019ve selected to always show them and make them clickable.<\/p>\n

Display Settings<\/h3>\n

\"Display<\/p>\n

Display Settings include options for the button, icon, menu items, text, titles, and alignment. Let\u2019s take a closer look.<\/p>\n

Menu Button<\/h4>\n

\"Menu<\/p>\n

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\u2019ve changed the background color, added a border, adjusted the radius, and adjusted the border width.<\/p>\n

\"Menu<\/p>\n

The Menu Button Icon adjusts the icon color, font size, and lets you display it in bold. I\u2019ve adjusted all three settings in this example.<\/p>\n

Display Menu Items<\/h4>\n

\"Display<\/p>\n

Menu Items adjust the background color, border radius, border color, and border size. I\u2019ve adjusted each setting in this example.<\/p>\n

Menu Items Text<\/h4>\n

\"Menu<\/p>\n

Menu Items Text lets you choose the font, make it bold and italic, choose the text color, and set the text size. I\u2019ve adjusted each of these settings.<\/p>\n

Menu Items Title<\/h4>\n

\"Menu<\/p>\n

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\u2019ve moved the titles to the top, adjusted the font size, added padding, and added a background color.<\/p>\n

DiviMenu Alignment<\/h4>\n

\"DiviMenu<\/p>\n

The alignment options adjust the alignment within the row. I\u2019ve centered the menu in this example.<\/p>\n

Submenu Content and Display Settings<\/h2>\n

\"Submenu<\/p>\n

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

Free DiviMenus Layouts<\/h2>\n

\"Free<\/p>\n

There are lots of free layouts for DiviMenus to help you get started. They\u2019re available from the publisher\u2019s website using the link in the DonDivi dashboard menu. You\u2019ll 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.<\/p>\n

For our examples, let\u2019s look at a few of the free layouts and see how well they work with the Divi Builder and the Divi Theme Builder.<\/p>\n

DiviMenus Coffee Layout<\/h3>\n

\"DiviMenus<\/p>\n

The Coffee layout comes with two sections and popups. This example shows the two sections added to the ET Coffee layout pack\u2019s landing page. Both display their menus closed.<\/p>\n

\"DiviMenus<\/p>\n

Clicking on the first menu opens it with a semicircle-right layout. Each of the menu items includes images and non-clickable titles.<\/p>\n

\"DiviMenus<\/p>\n

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\u2019t have to add this myself.<\/p>\n

\"DiviMenus<\/p>\n

The second section adds two modules that work independently. I\u2019ve clicked on the first module to open its menu.<\/p>\n

\"DiviMenus<\/p>\n

The popups work the same as the first section.<\/p>\n

DiviMenus Mega Menu<\/h3>\n

\"DiviMenus<\/p>\n

The Megamenu layout includes a layout, header, and popup. I\u2019m only looking at the header. I\u2019ve 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.<\/p>\n

\"DiviMenus<\/p>\n

My test site now displays the global header. This is the closed position.<\/p>\n

\"DiviMenus<\/p>\n

Here\u2019s the megamenu opened. Each of the elements includes hover effects. I\u2019m hovering over Service 2 in the example above. It\u2019s difficult to tell in this image but it does have a shadow effect at the bottom of the menu.<\/p>\n

Extra Tools and Help Center<\/h2>\n

\"Extra<\/p>\n

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.<\/p>\n

\"Extra<\/p>\n

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.<\/p>\n

\"Extra<\/p>\n

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.<\/p>\n

Purchase and Expand DiviMenus<\/h2>\n

\"Purchase<\/p>\n

DiviMenus is available in the Divi Marketplace. It costs $49 and includes unlimited website usage and one year of support and updates.<\/p>\n

There are also several expansions available that add new features to DiviMenus.<\/p>\n