Mega menus improve website navigation on content-heavy internet sites, permitting customers to get right of entry to extra choices briefly with out cluttering the header or requiring further clicks. In earlier variations of Divi, mega menus had been created the usage of the Menu module with the customized CSS magnificence mega-menu to enlarge submenus and organize pieces in columns. With Divi 5, Canvases be offering an impressive new way, enabling extra versatile and sophisticated mega menus that includes multi-column layouts, embedded photographs or icons, complete modules, and extra.
On this publish, we’ll provide an explanation for what Divi 5 Canvases are and the way you’ll use them to construct an attention-grabbing mega menu in a couple of simple steps. Let’s dive in.
What Are Divi Canvases?
Divi Canvases are indifferent workspaces in Divi 5, separate out of your major web page format. They supply a blank, remoted atmosphere for construction off-canvas parts, equivalent to mega menus, popups, sidebars, and extra, with out cluttering the main content material house.
Subscribe To Our Youtube Channel
There are two varieties of Canvases:
- Native Canvases: Those are tied to a particular web page or Theme Builder template, perfect for distinctive, one-off parts.
- World Canvases: To be had site-wide, making them absolute best for reusable elements like mega menus that seem persistently throughout your web site.
Key Options Of Divi Canvases
Canvases be offering a number of robust options for construction mega menus and paintings neatly with Divi Interactions. You’ll construct interactions that regulate how and when the mega menu seems. Use hover or click on triggers to expose menus when a menu merchandise or hamburger icon is clicked. For extra advanced designs, Nested Rows and Nested Modules allow you to construct subtle layouts immediately at the canvas, together with multi-column grids, photographs, buttons, textual content, or even dynamic content material. Those options assist you to enlarge your designs past easy hyperlink lists.
In comparison to earlier variations of Divi, the place mega menus relied at the Menu module with CSS categories, Canvases be offering awesome flexibility, higher group, exact positioning, and true reusability, getting rid of the desire for third-party plugins or customized code hacks. This ends up in cleaner builds, more uncomplicated upkeep, and extra ingenious mega menus.
Growing A Mega Menu With Divi 5 Canvases
Step 1: Set Up The Header
Step one in growing our mega menu is to create a world header within the Theme Builder. Navigate to Divi > Theme Builder and click on Upload World Header within the Default Site Template.
When the Builder opens, upload a brand new single-column row to the template.
Upload an Symbol module and Icon module to the Row. Upload your emblem to the Symbol module and assign the hamburger icon within the Icon module. Alter the Symbol measurement to fulfill your personal tastes and set the Icon Measurement to 32px.
Subsequent, navigate to the Row’s column settings. Click on the Design tab and enlarge the Format menu. Set the Format Path to Row, the Justify Content material box to Area Between, and Align Pieces to Middle.
Step 2: Create A World Canvas For The Mega Menu
The next move is to create a brand new World Canvas that can space our mega menu. Within the Theme Builder, click on the Canvas dropdown menu, positioned subsequent to the Theme Builder Format name.
Click on the Upload Canvas button to create a brand new Canvas.
Give the Canvas a identify and click on Upload Canvas.
Step 3: Design And Customise The Mega Menu Content material
On this step, we gained’t undergo all the design settings. As a substitute, we will be able to information you in growing the mega menu construction, with the working out that you’re going to make design tweaks to fit your particular wishes.
Taste The Mega Menu Phase
Within the new Canvas, let’s make some settings adjustments to the Phase already in position within the template. With the Phase decided on, click on the Design tab. Extend the Sizing tab and set the Width to 90%. Set the Phase Alignment to Middle.
Subsequent, enlarge the Spacing menu. Upload 6% Best Margin to the phase and upload 50px Padding to all 4 aspects.
Open the Border menu. Upload 10px Border Radius to the Phase.
After all, enlarge the Field Shadow dropdown menu. Make a selection Preset 3 within the Field Shadow box, 6px because the Field Shadow Vertical Place, 12px because the Field Shadow Blur Energy, and modify the Shadow Colour Opacity to 25%.
Taste The Row Settings
With the Phase kinds in position, let’s upload a 5-column Row to the Phase.
Within the Design tab, enlarge the Format menu. Set the Horizontal Hole to 3%.
Extend the Sizing tab. Set the Row’s Width to 100%.
Now we’ll want to modify the Column sizing for the Row. Make a selection the Content material tab and enlarge the Components dropdown menu. Click on the Edit Merchandise icon for the first Column.
Select the Design tab, enlarge the Sizing menu, and set the Column Magnificence to 1/3.
Return to the Row stage, click on the Content material tab, and choose the 2d Column to edit. This time, set the Column Magnificence to 1/5. Repeat those steps for the remainder Columns.
Upload Content material To The Mega Menu
Now, let’s upload some content material to our mega menu. Within the first Column, upload a Heading Module, Video Module, Textual content Module, and Button Module. Taste the modules to fit your personal tastes.
Make a selection the first Column within the Row and modify the Vertical Hole to 15px. This may tighten the spacing vertically.
Alter the Vertical Hole for the remainder Columns through copying the Column’s kinds within the Content material tab. Proper-click on the second one Column and choose Reproduction Merchandise Kinds.
From there, right-click at the closing Columns and choose Paste Merchandise Kinds.
Proceed including content material to the remainder Columns. Make certain that you’re the usage of a Heading Module for each and every Column and hyperlink it to the primary pages of your web site. To set a web page hyperlink, you’ll use Divi 5’s dynamic content material icon to choose the web page reasonably than manually linking.
As soon as clicked, choose the Web page Hyperlink possibility.
Use the Web page dropdown menu to choose a web page to your website to hyperlink to the Heading.
You’ll additionally use Divi 5’s Loop Builder so as to add weblog posts on your mega menu. On this instance, I’ve the weblog set within the 5th Column. To stay posts present, you’ll permit the Loop Builder on the column stage. Stay all choices at their defaults, apart from for Posts Consistent with Web page, which you must set to at least one.
From there, merely hyperlink the Modules within the Column to their respective dynamic content material fields. The Heading Module would hyperlink to Loop Publish Name, the Symbol Module to Loop Featured Symbol, Textual content Module to Loop Publish Excerpt, and so forth.
Step 4: Upload Interactions
With the content material in position, we will be able to set the Interactions for the mega menu. The primary Interplay we want to create is the press Interplay to release the mega menu. Whilst within the Mega Menu canvas, click on the Canvas Grid View icon to convey up the extra Canvases.
Click on anyplace at the Major Canvas to turn on it.
Make a selection the Icon Module and navigate to the Complicated tab. Extend the Interactions menu and click on the + Upload Interplay button so as to add a brand new Interplay.
Select Click on because the motion.
When the Edit Interplay modal seems, give the Interplay an Admin Label, set the Impact Motion to Toggle Visibility, and the mega menu Phase because the Goal Module. When running with Canvases, Divi 5’s Interplay Builder can goal parts on different canvases, permitting you to attach your header icon to the menu phase saved in a separate canvas.
To stop the mega menu from robotically showing at the web site’s pages, we’ll want to upload any other Interplay that hides the phase till the hamburger icon is clicked. Make a selection + Upload Interplay over again. This time, make a choice Load from the to be had choices. Assign an Admin Label, Load because the Cause Tournament, Conceal Component because the Impact Motion, and the mega menu Phase because the Goal Module.
Save the Template and preview it at the entrance finish. Your mega menu must seem whenever you click on the hamburger icon.
Step 5: Make Responsive Changes
While you’ve created your mega menu, use Divi 5’s responsive equipment to make certain that it appears flawless on each display measurement. Divi’s Customizable Responsive Breakpoints allow you to fine-tune your designs for 7 breakpoints. You’ll simply navigate each and every breakpoint and make adjustments as wanted.
However, the Responsive Editor lets you make adjustments in keeping with breakpoint on the module stage. Alter textual content sizes, trade colours, upload hover results, and extra, just by clicking thru each and every display measurement’s knowledge box.
Obtain The Recordsdata
Do you want to take a better take a look at the menu? Fill out the shape beneath to obtain the running information from this educational.
@media best display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of { border-top-color: #ffffff !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:ahead of { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 sturdy { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !vital;}
Obtain For Unfastened
Sign up for the Divi Publication and we will be able to e-mail you a duplicate of without equal Divi Touchdown Web page Format Pack, plus heaps of different wonderful and unfastened Divi assets, guidelines and methods. Apply alongside and you’re going to be a Divi grasp very quickly. In case you are already subscribed merely sort to your e-mail deal with beneath and click on obtain to get right of entry to the format pack.
You could have effectively subscribed. Please take a look at your e-mail deal with to substantiate your subscription and get get right of entry to to unfastened weekly Divi format packs!
Divi 5‘s Canvases function lets you create mega menus with unequalled flexibility, exact regulate, and inventive freedom. Via the usage of indifferent Canvases, robust Interactions, and versatile responsive equipment, you’ll construct skilled, reusable mega menus with out depending on plugins or heavy customized code.
With Divi 5 lately in Public Beta, now’s the very best time to leap in, experiment, and raise your designs. Download the latest Public Beta and get started construction with Canvases lately.
The publish How To Create Mega Menus With Divi 5’s Canvases gave the impression first on Elegant Themes Blog.
Contents
- 1 What Are Divi Canvases?
- 2 Growing A Mega Menu With Divi 5 Canvases
- 3 Obtain The Recordsdata
- 4 Obtain For Unfastened
- 5 You could have effectively subscribed. Please take a look at your e-mail deal with to substantiate your subscription and get get right of entry to to unfastened weekly Divi format packs!
- 6 Release Subsequent-Stage Navigation With Divi 5 Canvases
- 7 The right way to create a WordPress intranet: our whole information
- 8 Divi Plugin Highlight: Homepage 25 Divi Layout Pack
- 9 10 Simple Expansion Hacks to Boost up Your Startup Industry
0 Comments