Mega menus reinforce website navigation on content-heavy internet sites, permitting customers to get entry to extra choices temporarily with out cluttering the header or requiring additional 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 extend submenus and prepare pieces in columns. With Divi 5, Canvases be offering an impressive new manner, enabling extra versatile and sophisticated mega menus that includes multi-column layouts, embedded pictures or icons, complete modules, and extra.
On this publish, we’ll give an explanation for what Divi 5 Canvases are and the way you’ll be able to use them to construct an crowd pleasing 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 primary web page format. They supply a blank, remoted surroundings for development off-canvas parts, corresponding to mega menus, popups, sidebars, and extra, with out cluttering the main content material space.
Subscribe To Our Youtube Channel
There are two varieties of Canvases:
- Native Canvases: Those are tied to a selected web page or Theme Builder template, supreme for distinctive, one-off parts.
- International Canvases: To be had site-wide, making them highest for reusable parts like mega menus that seem constantly throughout your web site.
Key Options Of Divi Canvases
Canvases be offering a number of robust options for development mega menus and paintings neatly with Divi Interactions. You’ll be able to 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 complicated designs, Nested Rows and Nested Modules allow you to construct subtle layouts immediately at the canvas, together with multi-column grids, pictures, buttons, textual content, or even dynamic content material. Those options permit you to extend 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, actual positioning, and true reusability, getting rid of the will for third-party plugins or customized code hacks. This leads to cleaner builds, more straightforward repairs, 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 International Header within the Default Web page 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. Modify the Symbol dimension 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 extend the Structure menu. Set the Structure Course to Row, the Justify Content material box to House Between, and Align Pieces to Heart.
Step 2: Create A International Canvas For The Mega Menu
The next move is to create a brand new International Canvas that may area our mega menu. Within the Theme Builder, click on the Canvas dropdown menu, positioned subsequent to the Theme Builder Structure name.
Click on the Upload Canvas button to create a brand new Canvas.
Give the Canvas a title 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 can information you in growing the mega menu construction, with the figuring out that you’re going to make design tweaks to fit your particular wishes.
Taste The Mega Menu Phase
Throughout 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. Make bigger the Sizing tab and set the Width to 90%. Set the Phase Alignment to Heart.
Subsequent, extend the Spacing menu. Upload 6% Best Margin to the phase and upload 50px Padding to all 4 facets.
Open the Border menu. Upload 10px Border Radius to the Phase.
In the end, extend the Field Shadow dropdown menu. Choose Preset 3 within the Field Shadow box, 6px because the Field Shadow Vertical Place, 12px because the Field Shadow Blur Power, and alter 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, extend the Structure menu. Set the Horizontal Hole to 3%.
Make bigger the Sizing tab. Set the Row’s Width to 100%.
Now we’ll wish to alter the Column sizing for the Row. Choose the Content material tab and extend the Components dropdown menu. Click on the Edit Merchandise icon for the first Column.
Make a choice the Design tab, extend the Sizing menu, and set the Column Elegance to 1/3.
Return to the Row stage, click on the Content material tab, and make a choice the 2nd Column to edit. This time, set the Column Elegance 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.
Choose the first Column within the Row and alter the Vertical Hole to 15px. This may increasingly tighten the spacing vertically.
Modify the Vertical Hole for the remainder Columns by means of copying the Column’s kinds within the Content material tab. Proper-click on the second one Column and make a choice Replica Merchandise Types.
From there, right-click at the ultimate Columns and make a choice Paste Merchandise Types.
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 be able to use Divi 5’s dynamic content material icon to make a choice the web page somewhat than manually linking.
As soon as clicked, make a choice the Web page Hyperlink choice.
Use the Web page dropdown menu to make a choice a web page for your website to hyperlink to the Heading.
You’ll be able to additionally use Divi 5’s Loop Builder so as to add weblog posts in your mega menu. On this instance, I’ve the weblog set within the 5th Column. To stay posts present, you’ll be able to permit the Loop Builder on the column stage. Stay all choices at their defaults, excluding for Posts In step with Web page, which you must set to 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 Identify, the Symbol Module to Loop Featured Symbol, Textual content Module to Loop Publish Excerpt, and many others.
Step 4: Upload Interactions
With the content material in position, we will set the Interactions for the mega menu. The primary Interplay we wish to create is the clicking 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 any place at the Major Canvas to turn on it.
Choose the Icon Module and navigate to the Complex tab. Make bigger the Interactions menu and click on the + Upload Interplay button so as to add a brand new Interplay.
Make a choice 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 forestall the mega menu from routinely showing at the web site’s pages, we’ll wish to upload any other Interplay that hides the phase till the hamburger icon is clicked. Choose + Upload Interplay all over again. This time, make a selection Load from the to be had choices. Assign an Admin Label, Load because the Cause Tournament, Cover Part 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 when you click on the hamburger icon.
Step 5: Make Responsive Changes
If you’ve created your mega menu, use Divi 5’s responsive equipment to make sure that it seems to be flawless on each display screen dimension. Divi’s Customizable Responsive Breakpoints allow you to fine-tune your designs for 7 breakpoints. You’ll be able to simply navigate each and every breakpoint and make adjustments as wanted.
On the other hand, the Responsive Editor means that you can make adjustments according to breakpoint on the module stage. Modify textual content sizes, alternate colours, upload hover results, and extra, just by clicking thru each and every display screen dimension’s information box.
Obtain The Information
Do you want to take a better have a look at the menu? Fill out the shape underneath to obtain the running recordsdata from this educational.
@media handiest display screen 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 { shade: #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 Loose
Sign up for the Divi Publication and we can e-mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus lots of different wonderful and unfastened Divi sources, guidelines and tips. Practice alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely kind for your e-mail cope with underneath and click on obtain to get entry to the format pack.
You’ve effectively subscribed. Please take a look at your e-mail cope with to verify your subscription and get get entry to to unfastened weekly Divi format packs!
Free up Subsequent-Stage Navigation With Divi 5 Canvases
Divi 5‘s Canvases characteristic means that you can create mega menus with unequalled flexibility, actual regulate, and inventive freedom. Via the usage of indifferent Canvases, robust Interactions, and versatile responsive equipment, you’ll be able to construct skilled, reusable mega menus with out depending on plugins or heavy customized code.
With Divi 5 these days in Public Beta, now’s the very best time to leap in, experiment, and carry your designs. Obtain the most recent Public Beta and get started development with Canvases these days.
The publish How To Create Mega Menus With Divi 5’s Canvases seemed first on Sublime Topics Weblog.
WordPress Web Design