Mega menus are a well-liked design part that may give your web page a chic spice up whilst offering guests with an additional layer of navigation. There are a number of techniques so as to add mega menus to Divi. Probably the most best strategies that I’ve used is from a third-party plugin called Divi Mega Pro.
Divi Mega Professional makes it simple to construct mega menus the usage of the Divi Builder. Every menu may also be added to any part the usage of a CSS magnificence. Because of this you’ll upload a Divi structure to any hyperlink within the menu, however you’ll pass even additional and upload them to any part inside any Divi structure just by including a CSS magnificence. That is nice for growing menus and popups with store modules, pictures, sliders, portfolios, icons, blurbs, video, blogs, and so on. It additionally works with Additional.
Making a Divi Mega Professional Mega Menu
The Divi Mega Professional menu is added to the dashboard menu. Right here, you’ll input your license key, see the menus you’ve created, and create a brand new menu. While you click on so as to add a brand new menu, you’ll see an editor for the menu publish kind. The display screen is inconspicuous, however there’s in truth so much occurring right here.
Editor – you’ll create the mega menu or tooltip the usage of the Divi Builder.
Mega Professional Background – you’ll make a choice the background and font colours.
Show places – make a choice all pages or identify particular pages, after which input exceptions.
Mega Professional Animation – make a choice an animation. Choose between shift away, shift ahead, viewpoint, fade, or scale.
Mega Professional Triggers – upload a CSS selector set off. Whenever you reserve it you’ll see the CSS magnificence that you simply’ll paste into the CSS magnificence box of a menu merchandise, module, row, or segment. That is what will get clicked or hovered over with the intention to show the menu. The rest can be utilized because the trigger- no longer simply menu pieces. This implies you’ll additionally use Divi Mega Professional to create popups or tooltips.
Mega Professional Show Settings – make a choice the show course (up or down), input the highest and backside margin in pixels, make a choice a width share, and allow an arrow. Enabling the arrow finds extra customizations the place you’ll make a choice the arrow kind (triangle or spherical), make a choice the colour, set the width and peak, and spot a preview of the arrow.
Shut Button Customizations – make a choice to allow the shut button on desktop, on cellular, and to customise the shut button. Deciding on to allow it finds customizations for the textual content colour, background colour, font dimension, border radius, padding, and presentations a preview.
Mega Professional Further Settings – make a choice the set off kind (from hover or click on), the go out kind (from hover or click on), and input the go out lengthen.
Divi Mega Professional Templates
The developer has supplied a number of templates for Divi Mega Professional. While you acquire the plugin those templates will likely be to be had on your account within the Plugin Format Templates tab. Those are superb that will help you get began with designing your mega menus. I’ll use a couple of of those in my examples.
Divi Mega Professional Menu
Whenever you create a mega menu it’s going to seem within the record. Right here, you’ll edit, fast edit, or delete the menus. You’ll be able to additionally seek, clear out by means of date, view by means of standing, and so on. It additionally supplies the Distinctive Mega Professional Elegance so you’ll replica them from right here as a substitute of opening every one to get the category.
- While you replica the Elegance, you should definitely paste it with none additional areas. That may motive all the mega menus at the web page to prevent operating.
I’m positive it wouldn’t be simple so as to add, however a characteristic to duplicate and edit could be to hand. You’ll be able to save the Divi layouts on your library to reuse, however this doesn’t come with the encompassing settings.
Including a Cause
Within the Mega Professional Triggers box, you’ll see a Distinctive Mega Professional Elegance. Replica this and paste it into the CSS Elegance box of the object you need to be the set off.
So as to add the CSS Elegance box to a menu merchandise, you’ll wish to allow CSS Categories. Within the menu display screen, make a choice Display Choices and allow CSS Categories.
Paste the CSS Elegance into the menu’s box. Now, this menu merchandise will show the mega menu on hover and it’s going to take you to the web page on click on.
You’ll understand that Divi Mega Professional could also be an choice within the menu hyperlink choices. Those are nice for including a menu merchandise to the menu that doesn’t in truth pass anyplace. Upload the CSS Elegance identical to some other menu merchandise.
Touch Mega Menu
The menu opens on hover. I will be able to nonetheless click on at the Touch hyperlink to open the touch web page if I need. If I best sought after the mega menu to show, I may just simply use the Touch Mega Menu hyperlink and rename it (like the instance above). On this one, I’ve tweaked the colours slightly the usage of the background and show settings moderately than the Divi Builder. It provides a bar on the backside of the menu.
Easy Name to Motion with Menu Columns
This is likely one of the templates that upload a couple of columns. I’m making changes to the background and font colours. I additionally added an arrow and made the width 75%.
The background and font colour choices upload slightly extra to it so it sticks out. I left the alignment at default, which puts the menu at the proper of the display screen. You’ll be able to alter the location within the settings.
Tabs
The tabs template features a code module with jQuery to create the hover impact.
I’ve added content material to the tabs and styled them to check the website online. Every of the hyperlinks to the left presentations a distinct tab within the higher a part of the menu.
Software Guidelines
For this one, I added the CSS Elegance to a blurb in order that it opens a small popup on hover. The popup is simply a picture with a border shadow. Within the symbol above my mouse is soaring over the phrases LIVE WEBSITE. I haven’t adjusted the location but, nevertheless it’s simple to make it seem the place you need.
For this one, I created a popup to turn a picture with textual content. I set the show course to Down and, with the intention to make it seem subsequent to the picture I wish to upload it to, I added a margin of -300.
The popup now seems to the left and on the most sensible of the picture as I hover over it. I’ve added a clear background colour, border colour, padding, and rounded the border.
License and Documentation
There are 4 licenses to choose between:
- Unmarried website online – $15 in keeping with 12 months
- 3 websites – $29 in keeping with 12 months
- Limitless websites – $59 in keeping with 12 months
- Limitless lifetime – $129 one time
Documentation is equipped by means of a video demonstration and a piece of writing at the website online walks you in the course of the options and presentations step by step use the plugin.
You’ll be able to acquire Divi Mega Professional from the developer’s website.
Finishing Ideas
The use of the plugin is simple. I discovered the entire settings to be intuitive. I really like that it contains templates. The web page does display that there are extra templates coming quickly. I’m hoping this may come with all the mega menus and popups which can be used within the demo web page, as there are numerous well-designed layouts within the demo. Designing a super mega menu is the laborious section, and those assist you to get began with a forged design.
The demonstration is excellent for appearing upload the CSS categories. That is particularly excellent for those who don’t seem to be acquainted with CSS. It’s no longer that tricky to determine if you’re acquainted with CSS categories, and it doesn’t take many steps so as to add the CSS, so it doesn’t upload a lot issue to the usage of the plugin. It’s a not unusual talent that Divi customers must be informed anyway.
You’ll be able to upload as many mega menus and tooltips as you need to any web page. I really like that you’ll prohibit them to express pages. This implies you’ll create customized menus at the page-level. This is superb for touchdown pages or gross sales pages.
I’ve best scratched the skin of the forms of mega menus and popup tooltips you’ll create with Divi Mega Professional. It’s a very simple plugin to suggest to any Divi or Additional consumer that wishes the power to construct mega menus or tooltips with the Divi Builder.
We wish to pay attention from you. Have you ever attempted Divi Mega Professional? Tell us what you take into consideration it within the feedback.
Featured Symbol by way of pulsar011 / shutterstock.com
The publish Divi Plugin Highlight: Divi Mega Pro seemed first on Elegant Themes Blog.
WordPress Web Design