Divi Mega Menu is a plugin for the Divi Builder that permits you to assemble Mega Menus to your site. With this software, you’ll create complex mega menus with menu items, dynamic tabs, and a few different Divi modules you wish to have. Divi Mega Menu harnesses the power of the Divi Builder, giving you entire control over the design of each part in your menu. In this plugin highlight, we will be able to take a greater check out the Divi Mega Menu plugin to help making a decision if it’s the right kind answer to your needs.

Let’s get started!

Setting up Divi Mega Menu

Divi Mega Menu comes as a .ZIP plugin record. To position within the plugin, open the plugin internet web page in your WordPress dashboard and click on on Add New. Click on on Choose Document, select the plugin record from your pc, then click on on Arrange Now.

As quickly because the plugin is installed, click on on activate.

Previous to working with the Divi Mega Menu plugin, there are a few additional steps to take to make sure that the plugin works accurately on your site. First, the plugin author recommends disabling all other plugins, in particular caching plugins, on your internet web page all through development. Additionally, you’ll have to remove any custom designed CSS that may struggle with the mega menu.

Next, navigate to Divi > Theme Possible choices > Builder > Difficult and disable the Static CSS Document Era selection.

Switch over to the Customary tab, then select the Potency section. Disable the selections related to dynamic JQuery, CSS, and Javascript.

Finally, flush your permalink development thru navigating to Settings > Permalinks and saving the settings two occasions.

With the entire setup out of the way in which wherein, let’s take a look at the Mega Menu plugin.

Divi Mega Menu

Divi Mega Menu supplies two new modules to the Divi Builder, the Mega Drop-Down module and the Mega Tabs module. It moreover supplies two new pages to the WordPress dashboard – Mega Menu Settings, where you’ll regulate the plugin alternatives, and Mega Menu, where you’ll add and edit all your mega menus. Additionally, there are 3 construction packs that you simply’ll download from the plugin site to jumpstart your design.

Divi Mega Menu Builder

Add a New Mega Menu

The Mega Menu internet web page, located underneath the Divi Engine section, is where you’ll create and change your Mega Menus. Click on on Add New to get started.

Set a establish to your mega menu, enter a custom designed identifier, and click on on Use The Divi Builder.

Now you’ll use the Divi Builder to create a novel construction for the mega menu. With the whole purposes of the Divi Builder at hand, you’ll create complex designs that include the Divi Mega Menu modules along with the default Divi Builder modules.

Mega Menu Possible choices

Underneath the Divi Builder, there are 3 sections with alternatives to style and change the Mega Menu.

Mega Menu Style

Throughout the elementary style alternatives, you’ll set the site to default or tooltip, business the tooltip trail, and select if the menu is activated on hover or click on on. You’ll have the ability to set the open and close hover lengthen time, allow close on scroll, and set the entrance animation and length.

You’ll have the ability to moreover set the menu to turn whole width or set a custom designed width. The menu relative position selection allows you to set the menu dropdown relative to the menu products, and also you’ll fine-tune the menu position from the left, the very best, the very best on scroll, and the very best on cell. Finally, you’ll disable the menu on cell.

Mega Menu Triangle Style

Throughout the Mega Menu Triangle Style settings, you’ll allow a triangle or underline above the mega menu and set the web page, color, height, and positioning.

Mega Menu Close Icon Style

Proper right here you’ll allow or disable the close icon, select the icon that appears, set the icon color, and change sizing and positioning alternatives.

Mega Drop-Down Module

Let’s take a greater check out the Mega Drop-Down module. This module allows you to add a vertical menu module in your mega menu. Throughout the content material subject matter tab, you’ll select the menu you wish to have to turn, set the maximum menu width, and select the trail from which the menu turns out. You’ll have the ability to moreover set the mummy or dad and once more menu icons, set a module link, and change the background.

Throughout the design tab, you’ll regulate the icon colors and sizes, set the background color, border color, and padding for the mummy or dad menu and sub-menu items, customize the mummy or dad menu and sub-menu products text, and keep watch over the sizing, spacing, border, box-shadow, and other default design alternatives.

The difficult tab choices the entire same old alternatives chances are you’ll 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 section the use of the Mega Drop-Down module. This design will function content material subject matter from Divi’s The town construction pack and will drop down underneath a “Services and products and merchandise” menu products to function some the town services and products.

Phase and Row Setup

First, open the section settings and change the following alternatives:

• Background: #000000
• Width: 100%
• Max-Width: 100%
• Padding-Best: 0px
• Padding-Bottom: 0px

Next, add a row with 5 columns. Open the row settings and navigate to the Design tab, then business the spacing settings as follows:

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

Modify the padding:

• Padding-Best: 0px
• Padding-Bottom: 0px
• Padding-Left: 30px

Finally, switch to the Difficult tab and add the following custom designed CSS to the principle part:

 

align-items:heart;

 

Menu Determine and Divider

Add a text module to the principle column and add the text “The town Services and products and merchandise” in H3. This will be the heading text for the menu.

Customize the styling as follows:

• H3 Font: Roboto Condensed
• H3 Font Weight: Bold
• H3 Text Color: #FFFFFF
• H3 Text Size: 27px
• Margin-Bottom: 0px

Add a divider module underneath the header text and change the categories:

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

Mega Drop-Down Module

Add the Mega Drop-Down Module to the principle column, underneath the divider. Throughout the content material subject matter tab, select the menu you wish to have to turn. Additionally, set the module background to transparent.

Switch over to the design tab and open the mummy or dad menu items section. Modify the padding and border settings.

• Father or mother Menu Padding Best: 6px
• Father or mother Menu Padding Bottom: 6px
• Father or mother Menu Padding Left: 0px
• Father or mother Menu Border Color: Transparent

Next, regulate the mummy or dad menu products text alternatives.

• Father or mother Menu Products Font: Poppins
• Father or mother Menu Products Text Color: #FFFFFF
• Father or mother Menu products Text Size: 18px

Finally, add some bottom padding throughout the spacing settings.

• Padding-Bottom: 30px

Blurb Modules

Add six blurb modules to the construction, two in each of the middle columns. Add a establish and an image to each blurb and customize the styling throughout the design tab.

Throughout the image and icon section, regulate the following:

• Image/Icon Background Color: #FFFFFF
• Image/Icon Placement: Best
• Image/Icon Width: 60px
• Image/Icon Alignment: Center
• Image/Icon Rounded Corners: 100px
• Image/Icon Padding: 8px 8px 8px 8px

Next, regulate the establish text alternatives.

• Determine Font: Poppins
• Determine Font Weight: Bold
• Determine Text Alignment: Center
• Determine Text Color: #FFFFFF
• Determine Text Size: 20px

Finally, set the bottom margin to 30px.

Image Module

Inside the remainder column, add an image module and set the image.

Throughout the design tab, regulate the following settings:

• Show Space Underneath the Image: No

Modify the Mega Menu Style Settings

Now our construction is entire. Scroll the entire manner right down to the Mega Menu Style alternatives and change the following alternatives:

• Whole Width: Positive
• Entrance Menu Animation: Slide Down
• Modify from Best: 30px

Final Finish consequence

That is the overall result of the mega menu with the Mega Drop-Down module.

Mega Tabs Module

Now let’s take a greater check out the Mega Tabs module. This module allows you to add tabbed content material subject matter in your internet web page, each in a dropdown mega menu or in other places in your design. The Mega Tabs module can’t be observed throughout the visual builder, alternatively you’ll use the wireframe view to build the section and preview the design on the live internet web page.

Throughout the content material subject matter section of the module settings, you’ll add each of your tabs. Each tab has its non-public settings internet web page where you’ll regulate the styling for that tab, otherwise you’ll regulate the forms of all tabs together throughout the elementary module settings. Beneath the Tab Extras section, you’ll add links and photographs to each of your tabs.

Throughout the design tab, you’ll regulate the body and tab text sorts along with the sizing, spacing, border, box shadow, filter, develop into, and animation alternatives.

The difficult tab moreover comprises the usual parts to further customize the design.

Designing a Mega Menu with the Mega Tabs Module

For this example, we’re going to design a dropdown mega tab menu to transport along side the The town construction pack we’re the use of. Add a row with a single column to the Mega Menu internet web page, then add the Mega Tabs module.

Content material subject matter Settings

Throughout the Mega Tabs settings, add 4 new tabs. Add a establish to each tab, then add a left-aligned image and a couple of text to the body.

Once more throughout the elementary module settings, open the Tab Extras section and add the tab footage for each tab. Rearrange the images so that the order corresponds with the tab order above.

Next, set the module background to black.

Design Settings

Open the Body Text settings and change the following:

• Body Font: Poppins
• Body Text Color: #FFFFFF
• Body Text Size: 16px

Throughout the Tab Text alternatives, business the following alternatives:

• Lively Tab Background Color: #FFFFFF
• Inactive Tab Background Color: #000000
• Lively Tab Text Color: #000000
• Tab Text Color: #FFFFFF
• Tab Font: Poppins
• Tab Font Weight: Bold
• Tab Text Size: 20px

Modify the Mega Menu Style Settings

Now the construction is entire, scroll the entire manner right down to the Mega Menu Style alternatives and change the following:

• Entrance Menu Animation: Slide Down
• Modify from Best: 30px

Final Finish consequence

That is the completed design of the Mega Tabs menu.

Divi Mega Menu Settings

The Mega Menu settings internet web page is where you’ll control probably the most important alternatives in the case of the plugin. Proper right here you’ll select the type of navigation you may well be the use of, set the header to be fixed, prevent dad or mum menu products click on on through, allow a background overlay, and change the plugin removal settings.

Throughout the Mobile Settings tab, you’ll allow or disable the plugin on cell, specify the cell menu breakpoint, allow a collection cell menu, prevent dad or mum menu products click on on through, and specify a cell menu ID.

Together with the Divi Mega Menu

There are many techniques so that you can upload a mega menu construction in your internet web page. You’ll have the ability to set it to appear in a menu, otherwise you’ll assign it to a module in your construction, similar to a button or icon, where it is going to neatly appear on hover or click on on. Additionally, you’ll add the Mega Drop-Down module and the Mega Tabs module to any construction you assemble with Divi an identical to a couple different module, in order that you don’t appear to be limited to creating drop-down menus – you’ll add them all through your construction as you like.

Previous to together with the mega menu in your internet web page, make certain that the mega menu has a custom designed identifier set. Go ahead and replica the custom designed identifier as you’ll need this so that you can upload the mega menu to the internet web page. Additionally, make certain that the mega menu is ready to published so that it sounds as if on the front end of your internet web page.

Together with a Mega Menu to a Menu Products

To be able to upload a mega menu construction in your menu, navigate to the Menus internet web page underneath Glance. Make larger the item you wish to have to set since the dad or mum products for the mega menu, then paste the custom designed identifier you copied to the CSS Classes field. Proper right here, I’m together with the Mega Dropdown construction to the Services and products and merchandise menu products and the Mega Tabs construction to the About menu products.

If you happen to occur to don’t see the CSS Classes field, click on on Visual display unit Possible choices on the most productive of the internet web page and allow CSS Classes.

Right here’s what the Mega Dropdown construction seems like throughout the menu.

And that is the Mega Tab construction.

Together with a Mega Menu to a Module

To be able to upload a mega menu to a module, simply paste the custom designed identifier into the CSS Magnificence field throughout the Difficult tab of the module. The mega menu construction will appear on hover or on click on on, depending on the settings you set. Proper right here, I’m together with the mega tabs construction to the “Plan a Talk over with” button.

On the front end, the mega menu turns out on hover.

The use of Divi Mega Menu Modules in a Structure

To be able to upload the Mega Drop-Down or Mega Tabs module instantly to any construction, simply add a brand spanking new module to the internet web page and select the desired module.

Right here’s what it seems like on the front end.

Divi MegaMenu Examples

Divi MegaMenu comes with get right to use to a couple of construction examples that have numerous eye-catching mega menu designs that you simply’ll use to jumpstart your design. Let’s take a look at the mega menu layouts that come with the Business construction pack.

The 4 columns construction choices two columns with an image, text, and a button, an empty column, and a large menu at the right kind.

The products construction is a simple, vibrant menu construction that highlights different products.

That’s the vertical tabs construction, which uses the Mega Tabs module.

The Mega Drop-Down construction choices 4 columns of drop-down menu modules with sub-menu items.

The tick list construction choices 4 columns with titles, dividers, and blurb modules that function an icon.

The blog menu construction presentations the newest put up and a put up slider.

The media construction has two gallery modules, an image, two video sliders, and two video modules.

Finally, the contact menu construction has some blurbs with contact information, a slightly form, and a map module.

Achieve Divi Mega Menu

Divi Mega Menu is available throughout the Divi Market. It costs $46 for endless site usage and 300 and sixty 5 days of fortify and updates. The price moreover includes a 30-day money-back make certain.

Final Concepts

Divi Mega Menu supplies some great capacity to the Divi Builder, allowing you to build creative and unique Mega Menu layouts with the whole range of design alternatives available in Divi. Regarded as certainly one of its advantages is the ability to incorporate native Divi modules into the Mega Menu layouts, resulting in drop-down menus that provide additional than just menu items. Divi Mega Menu moreover makes it easy so that you can upload mega menus to the header, to a module, or instantly to a construction, giving you moderately numerous flexibility throughout the design and web page. If you happen to’re on the lookout for a plugin that can assist you to merely assemble mega menus with complex choices and layouts, Divi Mega Menu is usually a in reality very best selection for you.

We want to pay attention to from you! Have you ever ever tried Divi Mega Menu? Let us know what you take into consideration it throughout the comments!

The put up Divi Product Spotlight: Divi Mega Menu appeared first on Sublime Topics Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more