Divi 5 offers you a a lot more versatile method to construct navigation than older Divi workflows. With the Hyperlink and Dropdown modules, plus options like Canvases, the Loop Builder, Interactions, and visibility settings, you’ll create customized dropdowns and mega menus without delay within Divi with out depending on third-party plugins or customized code.
On this put up, we’ll stroll thru a step by step solution to constructing a customized mega menu in Divi 5, together with a separate cellular model.
Let’s get began.
Contents
- 1 What Is The Dropdown Module?
- 2 How To Use Divi 5’s Menu Options In combination
- 3 How To Construct A Mega Menu With Divi 5
- 4 Construct Customized Mega Menus With Divi 5 Nowadays!
What Is The Dropdown Module?
The Dropdown module in Divi 5 is a devoted container for constructing dropdown menus and mega menus. While you position a Dropdown module within a mum or dad part, corresponding to a Hyperlink module, Divi connects the dropdown’s conduct to that mum or dad part. That suggests the Dropdown module can paintings as a part of a navigation merchandise as an alternative of feeling like a separate floating format.
Subscribe To Our Youtube Channel
This can be a primary exchange from older Divi menu workflows, the place extra complicated dropdown layouts incessantly intended depending on the usual Menu module, the Theme Customizer, or customized code. In Divi 5, the Dropdown module offers you a versatile house the place you’ll position Teams, Rows, Columns, Hyperlinks, loops, and different modules to create the precise submenu format you want.
For easy navigation, you’ll upload a couple of Hyperlink modules throughout the Dropdown to create a blank submenu. For extra complicated layouts, you’ll construct out more than one columns, featured content material, icons, or looped content material to create a complete mega menu.
The Dropdown module additionally offers you direct keep an eye on over positioning, alignment, offset, format route, and cause conduct, which makes it a lot more straightforward to tailor your menus throughout the Visible Builder.
The result’s a menu-building workflow this is extra visible, extra versatile, and far more straightforward to customise than the older all-in-one way.
How To Use Divi 5’s Menu Options In combination
Divi 5’s menu equipment paintings perfect whilst you recall to mind them as separate constructing blocks. For some menus, the Hyperlink and Dropdown modules are sufficient. For extra complicated navigation, Canvases, Interactions, Loop Builder, and visibility settings can help you extend the construction with out leaving the builder.
Right here’s how each and every piece suits into the method:
Hyperlink Module
The Hyperlink module acts because the navigation merchandise itself. You’ll use it for static hyperlinks, dynamic web page hyperlinks, and menu-based pieces. It’s the start line for many customized menu constructions in Divi 5.
Dropdown Module
The Dropdown module is the submenu container. You set it within a mum or dad part, typically a Hyperlink module, after which construct the submenu content material within it. That content material will also be as easy or as complicated as you want.
Canvases
Canvases can help you create indifferent layouts that are living out of doors the primary web page construction. They’re particularly helpful for such things as cellular menus, off-canvas menus, slide-ins, and overlays. On this educational, we’ll use a Canvas to construct a separate cellular menu fairly than forcing each menu studies into one format.
Interactions
Interactions deal with the conduct round your menu. The Dropdown module already covers the elemental opening and shutting conduct for same old dropdowns, however Interactions change into helpful when you need to release a cellular menu, cause a Canvas, or conceal and display parts at particular breakpoints.
Loop Builder
The Loop Builder makes a menu dynamic. Inside of a Dropdown or Canvas, you’ll use loop-enabled modules to tug in posts, tasks, merchandise, pages, or different content material robotically. That makes it conceivable to construct a submenu that updates itself as content material adjustments for your website.
Visibility Settings
Visibility settings assist keep an eye on what seems when and the place. They’re helpful when you need to cover desktop menu parts on smaller displays, stay a cellular menu hidden till induced, or simplify which items are energetic at other breakpoints.
While you mix those equipment, you’ll construct the whole lot from a easy dropdown to a multi-column, content-driven mega menu with a separate cellular revel in.
How To Construct A Mega Menu With Divi 5
Now that we’ve got the core items in position, we will construct the menu. By way of the top of this educational, you’ll have a desktop header with customized dropdowns and a separate cellular menu inbuilt a Canvas.
Step 1: Create The Desktop Header
Get started through growing a brand new World Header template within the Theme Builder.
When the Visible Builder rather a lot, make a choice the Segment and upload a Background Colour within the Content material tab. Then transfer to the Design tab and upload 15px of padding to the height and backside.
Subsequent, open the Complicated tab, extend the Place settings, and set the Z Index to 999. This is helping stay the header and dropdowns above the web page content material once they open.
In spite of everything, open Scroll Results and set the phase to Keep on with Most sensible.
Now upload a single-column Row to the phase and edit the Row’s Column settings.
Within the Design tab, extend the Format settings and set Format Route to Row, Justify Content material to House Between, and Align Pieces to Heart. This offers you a blank horizontal header format with room for an emblem, navigation, and supporting parts.
Get started through including an Symbol module in your emblem. Use the Sizing settings within the Design tab to regulate it throughout breakpoints. Use the Customizable Responsive Breakpoints function and the Responsive Editor to fine-tune its dimension for various units.
Prior to transferring on, return to the Content material tab and assign a dynamic homepage hyperlink to the emblem.
Upload A Staff Module
Subsequent, upload a Staff module to the row to carry the desktop navigation hyperlinks. This offers you a cleaner method to arrange the desktop menu as one unit, particularly whilst you later come to a decision what must seem or disappear at smaller breakpoints.
Within the Staff’s Design tab, extend Format and set Format Route to Row, Justify Content material to House Between, and Align Pieces to Heart.
Upload Hyperlink Modules
Now get started including your navigation hyperlinks. Upload a Hyperlink module and input a label within the Textual content box.
Increase the Hyperlink settings and use the dynamic content material icon if you wish to assign a dynamic Web page Hyperlink.
When the modal seems, select Web page Hyperlink.
Use the web page selector to make a choice the suitable web page, then click on Follow.
Transfer to the Design tab to taste the hyperlink, together with font, weight, taste, colour, and textual content dimension.
Use Divi’s hover controls if you need the hyperlink look to switch on hover.
Set a hover Colour and Border if desired.
While you end styling the hover state, transfer again to the default desktop state sooner than proceeding. That helps to keep your long run edits from being implemented simplest to the hover model.
As soon as one Hyperlink module is styled, replica it to create the remainder of your top-level hyperlinks, then replace the textual content and vacation spot for each and every one.
Upload Further Header Modules
To complete the top-level header, upload a Button and an Icon module. The Icon will act because the cellular menu cause later, so select one thing recognizable, corresponding to a hamburger icon, and elegance each modules to check the remainder of your header.
Step 3: Construct The Dropdown Menus
With the top-level navigation in position, we will now construct the real dropdowns. On this educational, we’ll create one conventional dropdown manufactured from hyperlinks and one content-driven submenu that makes use of the Loop Builder to show contemporary Initiatives.
Upload A Dropdown Module
Get started with the second one menu merchandise. Open its Hyperlink module, move to the Components house within the Content material tab, and click on + Upload Component.
Choose the Dropdown module from the module picker.
Within the Dropdown, upload a Staff. Then upload a Hyperlink module within that Staff.
Prior to configuring the interior Hyperlink module, taste the Dropdown itself. Open the Dropdown module and move to the Design tab. In Format, set the Horizontal Hole to 60px and the Format Route to Row.
Then open the Dropdown settings and set Dropdown Alignment to Heart and Dropdown Offset to 15px.
In spite of everything, open Border and assign a 10px border radius to the ground corners.
Taste The Staff Module
Now open the Staff throughout the Dropdown. Within the Design tab, extend Format and set the Vertical Hole to 15px.
Taste The Internal Hyperlink Module
Choose the interior Hyperlink module. Upload a textual content label and assign a web page hyperlink or different vacation spot. If you need an icon subsequent to each and every hyperlink, select one within the Icon settings.
Within the Design tab, taste the icon with a colour and dimension, then upload a proper margin to split it from the textual content. If you need the icon colour to switch on hover, use the hover controls there as neatly.
Then taste the hyperlink textual content within the Textual content settings.
As soon as the primary inside hyperlink is styled, replica it as again and again as wanted.
Then replace the textual content, vacation spot, and icon for each and every merchandise. After that, replica the Staff itself if you need more than one vertical hyperlink stacks within the similar dropdown. The ones Teams will sit down subsequent to one another, growing the mega-menu impact.
Step 4: Upload A Undertaking Loop To Every other Dropdown
Subsequent, we’ll create some other submenu that makes use of the Loop Builder to show the 3 most up-to-date tasks. The similar thought works for posts or different put up sorts too.
Make a choice the top-level Hyperlink module the place you need this submenu. In its Components house, upload some other Dropdown module. Follow the similar core dropdown settings you used within the earlier step:
- Format Route: Row
- Dropdown Alignment: Heart
- Dropdown Offset: 15px
- Backside Border Radius: 10px
Now upload a Blurb module throughout the Dropdown.
Within the Blurb module’s Content material tab, open the Loop settings and allow Loop Component.
Set the Put up Kind to Initiatives. Should you simplest wish to display pieces from a undeniable class or time period, use the time period filter out there as neatly.
Taste the Blurb within the Design tab so the name and excerpt have compatibility the remainder of your menu design.
Map The Dynamic Fields
Now map the Blurb fields to loop-based dynamic content material. Within the Blurb’s Content material tab, use dynamic content material at the Name box and make a choice Loop Put up Name.
For the frame content material, make a choice Loop Excerpt.
In Symbol & Icon, use dynamic content material to make a choice Loop Featured Symbol.
In spite of everything, within the Hyperlink settings, map the Module Hyperlink URL to Loop Hyperlink.
Save the template sooner than transferring on.
Step 5: Construct The Cellular Menu In A Canvas
For the cellular model, we’ll use a Canvas so the menu can are living one at a time from the desktop header. Get started through clicking the Canvas Grid View button within the builder toolbar.
Click on + Upload Canvas.
Give the Canvas a reputation, set its Z Index to 999999, and click on Upload Canvas.
The builder will suggested you so as to add format construction. Make a choice a single-column Row.
Prior to including modules, configure the canvas format. Choose the Segment, assign a Background Colour, and upload 15px of height and backside padding.
Then edit the Row’s Column and set the Vertical Hole to 15px.
Upload Modules To The Cellular Menu
Upload a Hyperlink module to the column. Set its textual content and assign a vacation spot, then taste it to check your cellular design.
Replica the Hyperlink module to construct out the top-level cellular navigation. Replace the textual content and vacation spot for each and every merchandise. For menu pieces that are supposed to extend to show extra choices, it’s incessantly higher to not assign a vacation spot to the top-level cause itself. That stops unintended redirects when the person is attempting to open the submenu.
For a type of expandable pieces, upload a Dropdown module within the Hyperlink module’s Components house. Taste it with a border radius and height border if desired.
Then open the Dropdown settings and set Display Dropdown On to Click on. This is typically the easier cause on contact units.
Upload as many inside Hyperlink modules as wanted and elegance them to finish the submenu.
Repeat this procedure for any further cellular submenus.
Upload The Backside Buttons
To complete the cellular menu, upload a Staff under the hyperlinks and position two Button modules within it. This sort of buttons will act because the shut cause for the cellular menu.
As a result of expanded dropdowns would possibly make the canvas more difficult to paintings with, the Layers View will also be one of the simplest ways to position this Staff without delay underneath the hyperlink checklist.
Set the Staff’s Format Route to Row and Align Pieces to Heart.
Now taste the 2 buttons. At this level, the cellular menu canvas must be totally constructed.
Save the canvas sooner than transferring on.
Step 6: Upload The Interactions
With each the desktop header and cellular canvas constructed, the final step is to glue the whole lot with Interactions and visibility settings.
Cellular Menu Interactions
Get started within the cellular menu canvas. Choose the second one Button module within the backside Staff and move to the Complicated tab. Open Interactions and upload a brand new interplay.
Make a choice Click on because the cause.
Give the interplay an Admin Label, set the impact motion to Disguise Component, and select the canvas phase as the objective. This makes that button shut the cellular menu.
Now make a choice the canvas Segment and use its Visibility settings to stay it hidden through default till it’s induced.
Save the canvas and use Canvas Grid View to go back to the primary header.
Desktop Header Interactions
Now come to a decision how you need the desktop navigation to act on smaller displays.
For the desktop hyperlink Staff, you’ll use both breakpoint-based interactions or more practical breakpoint visibility controls. If the purpose is simplest to cover the desktop nav at pill and under, visibility settings are incessantly the cleaner choice. If you need the display and conceal conduct tied to resizing occasions, breakpoint interactions are the easier have compatibility.
To apply the interaction-based course used on this educational, make a choice the Staff that comprises the desktop hyperlinks and upload a Breakpoint Input interplay set to Disguise Component at Pill Broad.
Then upload a 2nd Breakpoint Input interplay set to Display Component at Desktop so it reappears when the format returns to the desktop breakpoint.
Repeat the similar two interactions at the desktop Button module for those who additionally need it hidden on smaller displays.
In spite of everything, make a choice the hamburger Icon in the primary header. An important interplay this is the Click on cause that unearths the cellular menu canvas phase.
You’ll then use both breakpoint visibility settings or breakpoint interactions to stay the icon hidden on desktop and visual simplest at the smaller display screen sizes the place the cellular menu must take over.
At this level, you will have a operating desktop mega menu and a separate cellular menu canvas.
Construct Customized Mega Menus With Divi 5 Nowadays!
Development a customized mega menu in Divi 5 is a lot more versatile now for the reason that Hyperlink and Dropdown modules paintings along Canvases, Loop Builder, Interactions, and visibility settings. As an alternative of forcing the whole lot thru a unmarried conventional menu construction, Divi 5 means that you can construct the navigation development that matches your venture.
Whether or not you need a easy dropdown, a multi-column mega menu, a dynamic content-driven submenu, or a separate cellular overlay, those equipment come up with a visible method to construct it throughout the Visible Builder.
Obtain the newest unlock of Divi 5, get started experimenting with customized menus, and adapt this construction to suit your personal website’s navigation.
The put up How To Construct Mega Menus With Divi 5’s Dropdown Module seemed first on Chic Topics Weblog.
WordPress Web Design