Divi Mega Menu is a plugin for the Divi Builder that permits you to construct Mega Menus on your website online. With this device, you’ll be able to create complicated mega menus with menu goods, dynamic tabs, and some other Divi modules you want. Divi Mega Menu harnesses the ability of the Divi Builder, supplying you with entire keep an eye on over the design of each and every component for your menu. On this plugin spotlight, we can take a better have a look at the Divi Mega Menu plugin to lend a hand you make a decision if it’s the fitting answer on your wishes.

Let’s get began!

Putting in Divi Mega Menu

Divi Mega Menu comes as a .ZIP plugin record. To put in the plugin, open the plugin web page for your WordPress dashboard and click on Upload New. Click on Select Document, choose the plugin record out of your laptop, then click on Set up Now.

As soon as the plugin is put in, click on turn on.

Prior to running with the Divi Mega Menu plugin, there are a couple of further steps to take to make certain that the plugin works as it should be to your website online. First, the plugin writer recommends disabling all different plugins, particularly caching plugins, to your web site all through construction. Moreover, you must take away any customized CSS that can battle with the mega menu.

Subsequent, navigate to Divi > Theme Choices > Builder > Complex and disable the Static CSS Document Era choice.

Transfer over to the Basic tab, then choose the Efficiency segment. Disable the choices associated with dynamic JQuery, CSS, and Javascript.

In spite of everything, flush your permalink construction by way of navigating to Settings > Permalinks and saving the settings two times.

With all the setup out of the best way, let’s check out the Mega Menu plugin.

Divi Mega Menu

Divi Mega Menu provides two new modules to the Divi Builder, the Mega Drop-Down module and the Mega Tabs module. It additionally provides two new pages to the WordPress dashboard – Mega Menu Settings, the place you’ll be able to adjust the plugin choices, and Mega Menu, the place you’ll be able to upload and edit your entire mega menus. Moreover, there are 3 format packs that you’ll be able to obtain from the plugin website online to jumpstart your design.

Divi Mega Menu Builder

Upload a New Mega Menu

The Mega Menu web page, positioned underneath the Divi Engine segment, is the place you’ll be able to create and adjust your Mega Menus. Click on Upload New to get began.

Set a identify on your mega menu, input a customized identifier, and click on Use The Divi Builder.

Now you’ll be able to use the Divi Builder to create a singular format for the mega menu. With the whole features of the Divi Builder to hand, you’ll be able to create complicated designs that come with the Divi Mega Menu modules in addition to the default Divi Builder modules.

Mega Menu Choices

Beneath the Divi Builder, there are 3 sections with choices to taste and adjust the Mega Menu.

Mega Menu Taste

Within the common taste choices, you’ll be able to set the placement to default or tooltip, exchange the tooltip route, and make a choice if the menu is activated on hover or click on. You’ll be able to set the open and shut hover lengthen time, allow shut on scroll, and set the doorway animation and period.

You’ll be able to additionally set the menu to show complete width or set a customized width. The menu relative place choice means that you can set the menu dropdown relative to the menu merchandise, and you’ll be able to fine-tune the menu place from the left, the highest, the highest on scroll, and the highest on cell. In spite of everything, you’ll be able to disable the menu on cell.

Mega Menu Triangle Taste

Within the Mega Menu Triangle Taste settings, you’ll be able to allow a triangle or underline above the mega menu and set the site, colour, top, and positioning.

Mega Menu Shut Icon Taste

Right here you’ll be able to allow or disable the shut icon, make a choice the icon that looks, set the icon colour, and adjust sizing and positioning choices.

Mega Drop-Down Module

Let’s take a better have a look at the Mega Drop-Down module. This module means that you can upload a vertical menu module in your mega menu. Within the content material tab, you’ll be able to choose the menu you wish to have to show, set the utmost menu width, and make a choice the route from which the menu seems. You’ll be able to additionally set the mum or dad and again menu icons, set a module hyperlink, and alter the background.

Within the design tab, you’ll be able to adjust the icon colours and sizes, set the background colour, border colour, and padding for the mum or dad menu and sub-menu goods, customise the mum or dad menu and sub-menu merchandise textual content, and regulate the sizing, spacing, border, box-shadow, and different default design choices.

The complicated tab options all the conventional choices you can look forward to finding in a Divi module.

Designing a Mega Menu with the Mega Drop-Down Module

Now let’s design a mega menu segment the use of the Mega Drop-Down module. This design will function content material from Divi’s Town format pack and can drop down underneath a “Products and services” menu merchandise to function some town services and products.

Segment and Row Setup

First, open the segment settings and alter the next choices:

• Background: #000000
• Width: 100%
• Max-Width: 100%
• Padding-Most sensible: 0px
• Padding-Backside: 0px

Subsequent, upload a row with 5 columns. Open the row settings and navigate to the Design tab, then exchange the spacing settings as follows:

• Equalize Column Heights: Sure
• Width: 100%
• Max Width: 100%

Adjust the padding:

• Padding-Most sensible: 0px
• Padding-Backside: 0px
• Padding-Left: 30px

In spite of everything, transfer to the Complex tab and upload the next customized CSS to the principle component:

 

align-items:middle;

 

Menu Name and Divider

Upload a textual content module to the primary column and upload the textual content “Town Products and services” in H3. This would be the heading textual content for the menu.

Customise the styling as follows:

• H3 Font: Roboto Condensed
• H3 Font Weight: Daring
• H3 Textual content Colour: #FFFFFF
• H3 Textual content Dimension: 27px
• Margin-Backside: 0px

Upload a divider module underneath the header textual content and adjust the types:

• Line Colour: #b1040e
• Divider Weight: 3px
• Width: 40%
• Module Alignment: Left
• Margin-Backside: 0px

Mega Drop-Down Module

Upload the Mega Drop-Down Module to the primary column, underneath the divider. Within the content material tab, choose the menu you wish to show. Moreover, set the module background to clear.

Transfer over to the design tab and open the mum or dad menu goods segment. Adjust the padding and border settings.

• Guardian Menu Padding Most sensible: 6px
• Guardian Menu Padding Backside: 6px
• Guardian Menu Padding Left: 0px
• Guardian Menu Border Colour: Clear

Subsequent, adjust the mum or dad menu merchandise textual content choices.

• Guardian Menu Merchandise Font: Poppins
• Guardian Menu Merchandise Textual content Colour: #FFFFFF
• Guardian Menu merchandise Textual content Dimension: 18px

In spite of everything, upload some backside padding within the spacing settings.

• Padding-Backside: 30px

Blurb Modules

Upload six blurb modules to the format, two in every of the center columns. Upload a identify and a picture to every blurb and customise the styling within the design tab.

Within the symbol and icon segment, adjust the next:

• Symbol/Icon Background Colour: #FFFFFF
• Symbol/Icon Placement: Most sensible
• Symbol/Icon Width: 60px
• Symbol/Icon Alignment: Middle
• Symbol/Icon Rounded Corners: 100px
• Symbol/Icon Padding: 8px 8px 8px 8px

Subsequent, adjust the identify textual content choices.

• Name Font: Poppins
• Name Font Weight: Daring
• Name Textual content Alignment: Middle
• Name Textual content Colour: #FFFFFF
• Name Textual content Dimension: 20px

In spite of everything, set the ground margin to 30px.

Symbol Module

Within the final column, upload a picture module and set the picture.

Within the design tab, adjust the next settings:

• Display House Beneath the Symbol: No

Adjust the Mega Menu Taste Settings

Now our format is entire. Scroll right down to the Mega Menu Taste choices and adjust the next choices:

• Complete Width: Sure
• Front Menu Animation: Slide Down
• Regulate from Most sensible: 30px

Ultimate End result

Here’s the general results of the mega menu with the Mega Drop-Down module.

Mega Tabs Module

Now let’s take a better have a look at the Mega Tabs module. This module means that you can upload tabbed content material in your web page, both in a dropdown mega menu or in other places for your design. The Mega Tabs module can’t be considered within the visible builder, however you’ll be able to use the wireframe view to construct the segment and preview the design at the reside web site.

Within the content material segment of the module settings, you’ll be able to upload every of your tabs. Every tab has its personal settings web page the place you’ll be able to adjust the styling for that tab, or you’ll be able to adjust the types of all tabs in combination within the common module settings. Underneath the Tab Extras segment, you’ll be able to upload hyperlinks and pictures to every of your tabs.

Within the design tab, you’ll be able to adjust the frame and tab textual content types in addition to the sizing, spacing, border, field shadow, filter out, turn into, and animation choices.

The complicated tab additionally accommodates the standard parts to additional customise the design.

Designing a Mega Menu with the Mega Tabs Module

For this case, we’re going to design a dropdown mega tab menu to move along side the Town format pack we’re the use of. Upload a row with a unmarried column to the Mega Menu web page, then upload the Mega Tabs module.

Content material Settings

Within the Mega Tabs settings, upload 4 new tabs. Upload a identify to every tab, then upload a left-aligned symbol and a few textual content to the frame.

Again within the common module settings, open the Tab Extras segment and upload the tab photographs for every tab. Rearrange the photographs in order that the order corresponds with the tab order above.

Subsequent, set the module background to black.

Design Settings

Open the Frame Textual content settings and adjust the next:

• Frame Font: Poppins
• Frame Textual content Colour: #FFFFFF
• Frame Textual content Dimension: 16px

Within the Tab Textual content choices, exchange the next choices:

• Energetic Tab Background Colour: #FFFFFF
• Inactive Tab Background Colour: #000000
• Energetic Tab Textual content Colour: #000000
• Tab Textual content Colour: #FFFFFF
• Tab Font: Poppins
• Tab Font Weight: Daring
• Tab Textual content Dimension: 20px

Adjust the Mega Menu Taste Settings

Now the format is entire, scroll right down to the Mega Menu Taste choices and alter the next:

• Front Menu Animation: Slide Down
• Regulate from Most sensible: 30px

Ultimate End result

Here’s the finished design of the Mega Tabs menu.

Divi Mega Menu Settings

The Mega Menu settings web page is the place you’ll be able to keep an eye on one of the vital choices in terms of the plugin. Right here you’ll be able to choose the kind of navigation you’re the use of, set the header to be mounted, prevent mum or dad menu merchandise click on thru, allow a background overlay, and alter the plugin removing settings.

Within the Cell Settings tab, you’ll be able to allow or disable the plugin on cell, specify the cell menu breakpoint, allow a set cell menu, prevent mum or dad menu merchandise click on thru, and specify a cell menu ID.

Including the Divi Mega Menu

There are lots of techniques so as to add a mega menu format in your web site. You’ll be able to set it to look in a menu, or you’ll be able to assign it to a module for your format, reminiscent of a button or icon, the place it may well seem on hover or click on. Moreover, you’ll be able to upload the Mega Drop-Down module and the Mega Tabs module to any format you construct with Divi identical to some other module, so that you don’t seem to be restricted to making drop-down menus – you’ll be able to upload them all over your format as you favor.

Prior to including the mega menu in your web site, ensure that the mega menu has a customized identifier set. Move forward and duplicate the customized identifier as you are going to want this so as to add the mega menu to the web site. Moreover, ensure that the mega menu is ready to printed in order that it seems that at the entrance finish of your web site.

Including a Mega Menu to a Menu Merchandise

So as to add a mega menu format in your menu, navigate to the Menus web page underneath Look. Enlarge the thing you wish to have to set because the mum or dad merchandise for the mega menu, then paste the customized identifier you copied to the CSS Categories box. Right here, I’m including the Mega Dropdown format to the Products and services menu merchandise and the Mega Tabs format to the About menu merchandise.

If you happen to don’t see the CSS Categories box, click on Display Choices on the best of the web page and allow CSS Categories.

Here’s what the Mega Dropdown format looks as if within the menu.

And here’s the Mega Tab format.

Including a Mega Menu to a Module

So as to add a mega menu to a module, merely paste the customized identifier into the CSS Elegance box within the Complex tab of the module. The mega menu format will seem on hover or on click on, relying at the settings you put. Right here, I’m including the mega tabs format to the “Plan a Discuss with” button.

At the entrance finish, the mega menu seems on hover.

The use of Divi Mega Menu Modules in a Structure

So as to add the Mega Drop-Down or Mega Tabs module immediately to any format, merely upload a brand new module to the web page and choose the required module.

Here’s what it looks as if at the entrance finish.

Divi MegaMenu Examples

Divi MegaMenu comes with get admission to to a few format examples that experience a number of attention-grabbing mega menu designs that you’ll be able to use to jumpstart your design. Let’s check out the mega menu layouts that include the Trade format pack.

The 4 columns format options two columns with a picture, textual content, and a button, an empty column, and a big menu at the proper.

The goods format is a straightforward, colourful menu format that highlights other merchandise.

That is the vertical tabs format, which makes use of the Mega Tabs module.

The Mega Drop-Down format options 4 columns of drop-down menu modules with sub-menu goods.

The listing format options 4 columns with titles, dividers, and blurb modules that function an icon.

The weblog menu format shows the most recent publish and a publish slider.

The media format has two gallery modules, a picture, two video sliders, and two video modules.

In spite of everything, the touch menu format has some blurbs with touch knowledge, a touch shape, and a map module.

Acquire Divi Mega Menu

Divi Mega Menu is to be had within the Divi Marketplace. It prices $46 for limitless website online utilization and 365 days of reinforce and updates. The associated fee additionally features a 30-day money-back ensure.

Ultimate Ideas

Divi Mega Menu provides some nice capability to the Divi Builder, permitting you to construct inventive and distinctive Mega Menu layouts with the whole vary of design choices to be had in Divi. One among its benefits is the facility to include local Divi modules into the Mega Menu layouts, leading to drop-down menus that supply extra than simply menu goods. Divi Mega Menu additionally makes it simple so as to add mega menus to the header, to a module, or immediately to a format, supplying you with a number of flexibility within the design and site. If you’re searching for a plugin that can can help you simply construct mega menus with complicated options and layouts, Divi Mega Menu could be an excellent choice for you.

We would like to listen to from you! Have you ever attempted Divi Mega Menu? Tell us what you take into accounts it within the feedback!

The publish Divi Product Highlight: Divi Mega Menu gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more