DiviMenus is a third-party plugin for Divi. It’s a menu-builder that makes it easy to manually create new menus to use as a substitute of the default WordPress menus. It’s now been up-to-the-minute with a brand spanking new module to create mega menus, dropdowns using WordPress menus, and all sorts of new inventive tactics to navigate via your content material subject material. In this publish, we’ll check out DiviMenus by way of the Divi Popup Picnic Format Pack to have the same opinion you decide if it’s the most efficient product on your needs.

What You Get with DiviMenus

Previous than we dive into the module, let’s take a look at some problems you’ll be capable of expect from the DiviMenus plugin.

Choices

The DiviMenus plugin incorporates 2 different modules: “DiviMenus” and “DiviMenus Flex”. You’ll use the one that suits you the best and assign link sorts on your menu items.

An example of this is having the ability to toggle whole Divi Sections as a Tabs module. This allows you to reveal any Layout stored on your Divi Library as a Popup or Mega Menu. You’ll moreover reveal a WordPress Menu stored in Glance > Menus as a Collapsible Dropdown Menu. The choices are difficult and completely customizable on your needs!

Free Layouts

DiviMenus moreover comes with a bunch of free layouts that you just’re able to use when signing up. Let’s take a look at some examples.

Example #1

The principle construction example highlights different marker colors on click on on. You’ll view the demo right here.

Example #2

The second example lets you reveal any content material subject material by the use of clicking on photos displayed in a spherical shape. View the live demo right here.

Example #3

The general example lets you switch between Divi Sections by the use of recreating a versatile Tab module. You’ll view the live demo right here.

DiviMenus Modules

DiviMenus supplies two modules to the Divi Builder. To start with, is the original module referred to as DiviMenus. Secondly, is a brand spanking new module referred to as DiviMenus Flex.

DiviMenus

DiviMenus incorporates submodules for each and every of the menu items. You’ll moreover modify the menu’s shape, choose how it opens, choose the menu button sort, modify the establish, choose icons, specify the URL, and additional. The default is a hamburger icon inside a gray circle. It might create menus that open on click on on or hover, menus that go with the flow in place, mega menus, and somewhat a little bit further.

Submodule

The submodule supplies the items to the menu. I’ve added 3 menu items throughout the example underneath. Give each and every one a establish, choose an icon, modify how they artwork, and magnificence them in my opinion from the submodule’s settings. On the front end, the ones menu items show when the individual clicks the hamburger icon. Additionally, it’s good to have the option to display the DiviMenu already open when the internet web page so much and even hide the Menu Button.

The Design tab will give you keep watch over over the colors, sizes, borders, spacing, and so on. Whilst you don’t use custom designed types throughout the Design tab, the menu products will inherit the categories from the main module. Throughout the example underneath, I’ve changed the background color, icon color, and icon size. I moreover added a border to the menu items and changed the color of the hamburger menu.

DiviMenus Settings

DiviMenu Shape gadgets the menu in a decided on construction. Choose from horizontal, vertical construction, or spherical. The default is horizontal. This example presentations Vertical. You’ll moreover modify its open state, display inline, identical the heights for opened and closed, and produce the menu to the doorway.

The Spherical chance opens another menu where you’ll be capable of choose the menu items’ alignment. Choose from a whole circle or a semicircle and choose its location. This example presentations Semicircle – highest. The items create a semicircle on the most efficient of the menu icon.

This example presentations Semicircle – left. The entire items circle the left a part of the menu icon.

Menu Button

The Menu Button settings mean you can use an icon, image, or text for the menu button and set its position throughout the open menu. The default is an icon. You’ll moreover hide, disable, or display it on click on on or hover. This example presentations an image. I’ve made up our minds on a Divi emblem.

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

Menu Button Identify

Menu Button Identify supplies a establish to the menu icon. You’ll enter the text, choose when it shows, make it clickable, and hide it on phones.

Menu Items

The menu items can be icons, photos, or text. Icons are the default. This example presentations an Image.

Once you select Image, the image settings open throughout the submodules, allowing you to specify an image for each and every menu products.

If you choose Text, each and every menu products shows the establish you’ve given it.

Menu Items Identify

You’ll moreover show the menu products titles along side the icons and pictures. Choose to turn them on hover or always. You’ll moreover lead them to clickable and hide them on phones. This environment did artwork for me throughout the Divi Visual Builder.

DiviMenus Design Settings

The Design tab incorporates 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, and so on. For the text alignment, set the text on the most efficient, bottom, correct, or left of the menu products. I’ve adjusted a lot of the ones settings throughout the example underneath to match our construction pack upper.

You’ll moreover modify the DiviMenu alignment and choose to justify the closed DiviMenu, which will switch 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 chance, the menu icon remains in that location when closed.

Development Popups and Mega Menus with DiviMenus

Each and every submodule comprises a work for links. Proper right here, you’ll be capable of specify the URL, how the URL opens, allow it as full of life, set it to close on click on on, and choose the link sort.

Link Kind

The link sort we could in us to create some crowd pleasing menus. This incorporates URL, Popup, and Show. URL opens the internet web page you’ve entered since the URL.

Popup Link Kind

The Popup link sort lets you choose a construction from your Divi library to turn when the menu products is selected. Have it show on hover, add an in depth icon, and so on. I’ve decided on a construction referred to as Contact Form to turn on hover.

When the individual hovers over the menu products, the homepage construction shows as a popup. You’ll style the popup throughout the Design tab.

Show Link Kind

Show provides settings to show or hide portions. It incorporates CSS alternatives to bind the elements and is a little more subtle than the other settings. It’s a superb environment to use because of you’ll be capable of create submenus. You merely have to know the CSS IDs of the elements you want to show. You’ll moreover add classes to the elements.

DiviMenus Flex

DiviMenus Flex is the most recent module. It uses CSS flexbox and the new Sub Link Kind to create mega menus and dropdown menus. It moreover works with WooCommerce and Easy Digital Downloads, and shows the number of items throughout the purchasing groceries cart. In this example, I’ve already added 4 menu items.

Submodules

The submodules create the menu items. Add a establish, choose the content material subject material sort, disable the click fit, show the icon/image, and choose from hover and click on on alternatives. It moreover incorporates link alternatives to specify the URL and how it works, choose the link sort to create popups and mega menus, or even show/hide each and every different a part of your internet web page content material subject material.

DiviMenus Flex Settings

The settings include direction and to show opened or closed. For the direction, choose from horizontal and vertical. Horizontal is the default environment. I’ve made up our minds on Vertical in this example.

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

The menu button settings mean you can set the button’s position. Choose from first or ultimate. You’ll moreover choose the content material subject material sort. Choose between icon, image, or text. Other alternatives include hiding the button, disabling the button, and applying hover effects. Text provides a field where you’ll be capable of enter the text you want to turn. I’ve added text and moved the button to ultimate in this example.

Text moreover incorporates an chance in an effort to upload an icon or an image to the button. Choose the icon or image, and the placement, add padding, hide the text on certain gadgets, hide the icon or image on certain gadgets, and practice hover alternatives.

Design Settings

The Design settings include quite a few new choices. Set the horizontal and vertical alignment, make the menu items fullwidth, make the menu button fullwidth, and change the logo. The logo settings mean you can choose the logo placement, alignment, width, and absolute position. I’ve adjusted the fullwidth menu button and horizontal alignment settings for the example underneath.

Adjust the colors, fonts, sizes, padding, position, and somewhat a little bit further. Adjust the menu button and menu items one after the other. The menu items follow the settings throughout the Design tab till 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 equivalent settings for the button.

Development Popups and Mega Menus with DiviMenus Flex

The link alternatives throughout the menu products submodules permit us to make use of DiviMenus Flex to build commonplace menus, add dropdown menus, create popups, and assemble mega menus. The Link Kind chance does this for us. If we choose URL, the default environment, the menu works as common. Add the link, choose how it opens, choose its full of life state, and choose how it closes.

Popup Link Kind

The popup link sort lets you choose a construction from your Divi Library to use as a popup. If you choose to show the close icon, you’ll see an icon picker.

The Design tab supplies alternatives to style the popup, allowing you to make use of customizable entrance and move out animations to make stronger its visual effects.

Sub Link Kind

The Sub Link sort is crowd pleasing. It lets you choose something to use as a dropdown menu. Choose from a WordPress menu or a Divi Library construction.

If you choose a WordPress menu, you’ll be in a position to make a choice the menu from those you’ve created. You’ll allow to preview it throughout the Builder, use a custom designed display, choose how the menu behaves, make it collapsible, allow accordion, show a direction arrow, choose the icon, and so on. This is great for creating custom designed menus that also use the standard WordPress menus. You’ll want to create a singular menu for each and every one of the vital menu items where you want to turn a WordPress menu.

If you choose Divi Library, you’ll be in a position to make a choice the construction to turn. This allows you to use Divi layouts as mega menus. To make stronger your bettering revel in, it’s good to have the option to allow the “Preview throughout the Builder” function. This allows you to view the selected Divi construction throughout the Divi Builder itself, providing a glimpse of how it’s going to appear outdoor of the builder. It’s price noting that certain types would most likely appear rather different as a result of the specific portions throughout the construction. However, this preview function serves as an invaluable make stronger, and the overall finish outcome may well be correctly displayed on the frontend.

Show Link Kind

DiviMenus Flex moreover incorporates the Show link sort that can show portions in line with the CSS IDs or CSS Elegance you’ve built-in. Toggle the visibility, keep it visible, show on hover, hide on button click on on, hide on internet web page click on on, and choose the initial state on internet web page load. As an example, when clicking on a menu products, you’ll be capable of reveal a decided on phase with a novel CSS ID, or at the same time as reveal a few portions for your internet web page with the equivalent CSS Elegance.

Where to Achieve DiviMenus

DiviMenus is available throughout the Divi Market for $49. It incorporates countless usage and 365 days of beef up and updates and springs with a 30-day money-back be sure.

Completing Concepts

That’s our check out DiviMenus. This is a tricky menu builder. I’ve best scratched the outside of what DiviMenus can do. I like that it now incorporates two modules and gives a logo, the power to use WordPress menus as submenus, and the power to easily create mega menus with Divi layouts. I came upon it intuitive, and it incorporates all the style alternatives to customize each a part of the menu. Whilst you’re thinking about an excellent menu builder, DiviMenus is price a look.

We want to pay attention from you. Have you ever ever tried DiviMenus? Let us know what you take into accounts it throughout the comments.

The publish Divi Plugin Spotlight: DiviMenus gave the impression first on Chic Topics Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more