DiviMenus is a third-party plugin for Divi. It’s a menu-builder that makes it simple to manually create new menus to make use of as an alternative of the default WordPress menus. It’s now been up to date with a brand new module to create mega menus, dropdowns the usage of WordPress menus, and all types of new inventive tactics to navigate thru your content material. On this put up, we’ll take a look at DiviMenus by means of the Divi Popup Picnic Layout Pack to lend a hand you make a decision if it’s the fitting product in your wishes.

What You Get with DiviMenus

Sooner than we dive into the module, let’s check out some issues you’ll be able to be expecting from the DiviMenus plugin.

Options

The DiviMenus plugin comprises 2 other modules: “DiviMenus” and “DiviMenus Flex”. You’ll be able to use the person who fits you the most productive and assign hyperlink varieties in your menu pieces.

An instance of that is having the ability to toggle whole Divi Sections as a Tabs module. This lets you divulge any Format saved to your Divi Library as a Popup or Mega Menu. You’ll be able to additionally divulge a WordPress Menu saved in Look > Menus as a Collapsible Dropdown Menu. The options are complex and entirely customizable in your wishes!

Loose Layouts

DiviMenus additionally comes with a host of loose layouts that you simply’re ready to make use of when signing up. Let’s check out some examples.

Instance #1

The primary format instance highlights other marker colours on click on. You’ll be able to view the demo here.

Instance #2

The second one instance permits you to divulge any content material through clicking on pictures displayed in a round form. View the reside demo here.

Instance #3

The closing instance permits you to transfer between Divi Sections through recreating a flexible Tab module. You’ll be able to view the reside demo here.

DiviMenus Modules

DiviMenus provides two modules to the Divi Builder. In the beginning, is the unique module referred to as DiviMenus. Secondly, is a brand new module referred to as DiviMenus Flex.

DiviMenus

DiviMenus comprises submodules for every of the menu pieces. You’ll be able to additionally alter the menu’s form, select the way it opens, select the menu button kind, alter the name, select icons, specify the URL, and extra. The default is a hamburger icon inside of a grey circle. It could create menus that open on click on or hover, menus that flow in position, mega menus, and quite a bit extra.

Submodule

The submodule provides the pieces to the menu. I’ve added 3 menu pieces within the instance underneath. Give every one a name, select an icon, alter how they paintings, and magnificence them for my part from the submodule’s settings. At the entrance finish, those menu pieces display when the consumer clicks the hamburger icon. Moreover, you may have the way to show the DiviMenu already open when the web page so much or even conceal the Menu Button.

The Design tab will give you regulate over the colours, sizes, borders, spacing, and many others. Should you don’t use customized types within the Design tab, the menu merchandise will inherit the types from the primary module. Within the instance underneath, I’ve modified the background colour, icon colour, and icon measurement. I additionally added a border to the menu pieces and adjusted the colour of the hamburger menu.

DiviMenus Settings

DiviMenu Form units the menu in a selected format. Choose between horizontal, vertical format, or round. The default is horizontal. This situation presentations Vertical. You’ll be able to additionally alter its open state, show inline, equivalent the heights for opened and closed, and produce the menu to the entrance.

The Round possibility opens every other menu the place you’ll be able to select the menu pieces’ alignment. Choose between a complete circle or a semicircle and select its location. This situation presentations Semicircle – best. The pieces create a semicircle on the best of the menu icon.

This situation presentations Semicircle – left. All of the pieces circle the left part of the menu icon.

Menu Button

The Menu Button settings allow you to use an icon, symbol, or textual content for the menu button and set its place throughout the open menu. The default is an icon. You’ll be able to additionally conceal, disable, or show it on click on or hover. This situation presentations a picture. I’ve decided on a Divi emblem.

That is Textual content. Input any textual content you need into the sector.

Menu Button Identify

Menu Button Identify provides a name to the menu icon. You’ll be able to input the textual content, select when it shows, make it clickable, and conceal it on telephones.

Menu Pieces

The menu pieces may also be icons, pictures, or textual content. Icons are the default. This situation presentations an Symbol.

As soon as you choose Symbol, the picture settings open within the submodules, permitting you to specify a picture for every menu merchandise.

If you select Textual content, every menu merchandise shows the name you’ve given it.

Menu Pieces Identify

You’ll be able to additionally display the menu merchandise titles in conjunction with the icons and photographs. Select to show them on hover or all the time. You’ll be able to additionally cause them to clickable and conceal them on telephones. This environment did paintings for me within the Divi Visible Builder.

DiviMenus Design Settings

The Design tab comprises settings for the primary menu and the menu pieces. Modify the sizes, icon and textual content colours, background colours, border shapes, border colours, select the textual content alignment, upload padding, and many others. For the textual content alignment, set the textual content on the best, backside, proper, or left of the menu merchandise. I’ve adjusted many of those settings within the instance underneath to check our format pack higher.

You’ll be able to additionally alter the DiviMenu alignment and select to justify the closed DiviMenu, which is able to transfer the hamburger icon when the menu is closed. For this situation, I’ve justified the closed DiviMenu. The menu icon strikes to the middle when the menu is closed. If you select an alignment possibility, the menu icon stays in that location when closed.

Construction Popups and Mega Menus with DiviMenus

Every submodule incorporates a bit for hyperlinks. Right here, you’ll be able to specify the URL, how the URL opens, permit it as lively, set it to near on click on, and select the hyperlink kind.

Hyperlink Kind

The hyperlink kind lets in us to create some fascinating menus. This comprises URL, Popup, and Display. URL opens the web page you’ve entered because the URL.

Popup Hyperlink Kind

The Popup hyperlink kind permits you to select a format out of your Divi library to show when the menu merchandise is chosen. Have it display on hover, upload a detailed icon, and many others. I’ve selected a format referred to as Touch Shape to show on hover.

When the consumer hovers over the menu merchandise, the homepage format shows as a popup. You’ll be able to taste the popup within the Design tab.

Display Hyperlink Kind

Display supplies settings to turn or conceal components. It comprises CSS choices to bind the weather and is a bit more sophisticated than the opposite settings. It’s a excellent environment to make use of as a result of you’ll be able to create submenus. You simply have to understand the CSS IDs of the weather you need to turn. You’ll be able to additionally upload categories to the weather.

DiviMenus Flex

DiviMenus Flex is the latest module. It makes use of CSS flexbox and the brand new Sub Hyperlink Kind to create mega menus and dropdown menus. It additionally works with WooCommerce and Simple Virtual Downloads, and shows the choice of pieces within the buying groceries cart. On this instance, I’ve already added 4 menu pieces.

Submodules

The submodules create the menu pieces. Upload a name, select the content material kind, disable the press match, display the icon/symbol, and make a choice from hover and click on choices. It additionally comprises hyperlink choices to specify the URL and the way it works, select the hyperlink kind to create popups and mega menus, and even display/conceal every other part of your web page content material.

DiviMenus Flex Settings

The settings come with path and to turn opened or closed. For the path, make a choice between horizontal and vertical. Horizontal is the default environment. I’ve decided on Vertical on this instance.

The emblem settings allow you to upload a symbol to the menu. You’ll be able to make it clickable and upload the URL.

The menu button settings allow you to set the button’s place. Choose between first or closing. You’ll be able to additionally select the content material kind. Make a choice between icon, symbol, or textual content. Different choices come with hiding the button, disabling the button, and making use of hover results. Textual content supplies a box the place you’ll be able to input the textual content you need to show. I’ve added textual content and moved the button to closing on this instance.

Textual content additionally comprises an possibility so as to add an icon or a picture to the button. Select the icon or symbol, and the location, upload padding, conceal the textual content on positive units, conceal the icon or symbol on positive units, and practice hover choices.

Design Settings

The Design settings come with plenty of new options. Set the horizontal and vertical alignment, make the menu pieces fullwidth, make the menu button fullwidth, and alter the brand. The emblem settings allow you to select the brand placement, alignment, width, and absolute place. I’ve adjusted the fullwidth menu button and horizontal alignment settings for the instance underneath.

Modify the colours, fonts, sizes, padding, place, and quite a bit extra. Modify the menu button and menu pieces one by one. The menu pieces apply the settings within the Design tab except you’ve adjusted them of their submodules. For this situation, I’ve added icons, and textual content to the menu pieces after which adjusted their background and font colours. I’ve adjusted the similar settings for the button.

Construction Popups and Mega Menus with DiviMenus Flex

The hyperlink choices within the menu merchandise submodules allow us to use DiviMenus Flex to construct common menus, upload dropdown menus, create popups, and construct mega menus. The Hyperlink Kind possibility does this for us. If we select URL, the default environment, the menu works as commonplace. Upload the hyperlink, select the way it opens, select its lively state, and select the way it closes.

Popup Hyperlink Kind

The popup hyperlink kind permits you to select a format out of your Divi Library to make use of as a popup. If you select to turn the shut icon, you’ll see an icon picker.

The Design tab provides choices to taste the popup, permitting you to use customizable front and go out animations to strengthen its visible results.

Sub Hyperlink Kind

The Sub Hyperlink kind is fascinating. It permits you to select one thing to make use of as a dropdown menu. Choose between a WordPress menu or a Divi Library format.

If you select a WordPress menu, you’ll be able to make a choice the menu from the ones you’ve created. You’ll be able to permit to preview it within the Builder, use a customized show, select how the menu behaves, make it collapsible, permit accordion, display a path arrow, select the icon, and many others. That is nice for growing customized menus that still use the usual WordPress menus. You’ll want to create a distinct menu for every one of the vital menu pieces the place you need to show a WordPress menu.

If you select Divi Library, you’ll be able to make a choice the format to show. This lets you use Divi layouts as mega menus. To strengthen your modifying revel in, you may have the way to permit the “Preview within the Builder” function. This lets you view the chosen Divi format throughout the Divi Builder itself, offering a glimpse of ways it’s going to seem out of doors of the builder. It’s price noting that positive types might seem rather other because of the particular components throughout the format. Alternatively, this preview function serves as a useful assist, and the general consequence can be correctly displayed at the frontend.

Display Hyperlink Kind

DiviMenus Flex additionally comprises the Display hyperlink kind that may display components in response to the CSS IDs or CSS Magnificence you’ve incorporated. Toggle the visibility, stay it visual, display on hover, conceal on button click on, conceal on web page click on, and select the preliminary state on web page load. As an example, when clicking on a menu merchandise, you’ll be able to divulge a selected part with a singular CSS ID, or concurrently divulge more than one components for your web page with the similar CSS Magnificence.

The place to Acquire DiviMenus

DiviMenus is to be had within the Divi Marketplace for $49. It comprises limitless utilization and three hundred and sixty five days of give a boost to and updates and is derived with a 30-day money-back ensure.

Finishing Ideas

That’s our take a look at DiviMenus. This can be a tough menu builder. I’ve handiest scratched the skin of what DiviMenus can do. I love that it now comprises two modules and provides a symbol, the facility to make use of WordPress menus as submenus, and the facility to simply create mega menus with Divi layouts. I discovered it intuitive, and it comprises all of the taste choices to customise each part of the menu. Should you’re occupied with a formidable menu builder, DiviMenus is price a glance.

We wish to pay attention from you. Have you ever attempted DiviMenus? Tell us what you consider it within the feedback.

The put up Divi Plugin Highlight: DiviMenus seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more