Mega menus toughen website online navigation on content-heavy web websites, allowing consumers to get admission to further alternatives briefly without cluttering the header or requiring further clicks. In previous permutations of Divi, mega menus were created using the Menu module with the custom designed CSS elegance mega-menu to increase submenus and get ready items in columns. With Divi 5, Canvases offer an outstanding new approach, enabling further flexible and complex mega menus that incorporates multi-column layouts, embedded footage or icons, whole modules, and further.
In this submit, we’ll provide an explanation for what Divi 5 Canvases are and the way in which you’ll be capable to use them to build an eye-catching mega menu in a few easy steps. Let’s dive in.
What Are Divi Canvases?
Divi Canvases are detached workspaces in Divi 5, separate from your number one internet web page layout. They provide a clean, isolated environment for construction off-canvas portions, comparable to mega menus, popups, sidebars, and further, without cluttering the primary content material subject matter house.
Subscribe To Our Youtube Channel
There are two types of Canvases:
- Local Canvases: The ones are tied to a decided on internet web page or Theme Builder template, perfect for unique, one-off portions.
- World Canvases: Available site-wide, making them absolute best for reusable portions like mega menus that appear continuously right through your internet web site.
Key Choices Of Divi Canvases
Canvases offer quite a few tough choices for construction mega menus and artwork well with Divi Interactions. You’ll be capable to assemble interactions that keep an eye on how and when the mega menu turns out. Use hover or click on on triggers to reveal menus when a menu products or hamburger icon is clicked. For added difficult designs, Nested Rows and Nested Modules will let you assemble refined layouts straight away on the canvas, in conjunction with multi-column grids, footage, buttons, text, and even dynamic content material subject matter. The ones choices assist you to prolong your designs previous simple link lists.
Compared to previous permutations of Divi, where mega menus relied on the Menu module with CSS classes, Canvases offer superior flexibility, upper team, precise positioning, and true reusability, eliminating the need for third-party plugins or custom designed code hacks. This ends up in cleaner builds, easier upkeep, and further creative mega menus.
Rising A Mega Menu With Divi 5 Canvases
Step 1: Set Up The Header
The first step in rising our mega menu is to create an international header inside the Theme Builder. Navigate to Divi > Theme Builder and click on on Add World Header inside the Default Internet web page Template.
When the Builder opens, add a brand spanking new single-column row to the template.
Add an Image module and Icon module to the Row. Add your logo to the Image module and assign the hamburger icon inside the Icon module. Adjust the Image size to meet your own tastes and set the Icon Size to 32px.
Next, navigate to the Row’s column settings. Click on at the Design tab and prolong the Construction menu. Set the Construction Route to Row, the Justify Content material subject matter field to Area Between, and Align Items to Middle.
Step 2: Create A World Canvas For The Mega Menu
The next step is to create a brand spanking new World Canvas that can house our mega menu. Inside the Theme Builder, click on at the Canvas dropdown menu, situated next to the Theme Builder Construction title.
Click on at the Add Canvas button to create a brand spanking new Canvas.
Give the Canvas a identify and click on on Add Canvas.
Step 3: Design And Customize The Mega Menu Content material subject matter
In this step, we won’t go through all of the design settings. As an alternative, we will data you in rising the mega menu building, with the understanding that you just’re going to make design tweaks to suit your specific needs.
Style The Mega Menu Section
Right through the brand new Canvas, let’s make some settings changes to the Section already in place inside the template. With the Section determined on, click on at the Design tab. Make larger the Sizing tab and set the Width to 90%. Set the Section Alignment to Middle.
Next, prolong the Spacing menu. Add 6% Absolute best Margin to the segment and add 50px Padding to all 4 aspects.
Open the Border menu. Add 10px Border Radius to the Section.
After all, prolong the Box Shadow dropdown menu. Make a selection Preset 3 inside the Box Shadow field, 6px since the Box Shadow Vertical Position, 12px since the Box Shadow Blur Energy, and change the Shadow Color Opacity to 25%.
Style The Row Settings
With the Section sorts in place, let’s add a 5-column Row to the Section.
Inside the Design tab, prolong the Construction menu. Set the Horizontal Hollow to 3%.
Make larger the Sizing tab. Set the Row’s Width to 100%.
Now we’ll need to modify the Column sizing for the Row. Make a selection the Content material subject matter tab and prolong the Elements dropdown menu. Click on at the Edit Products icon for the first Column.
Select the Design tab, prolong the Sizing menu, and set the Column Class to 1/3.
Go back to the Row level, click on at the Content material subject matter tab, and choose the 2d Column to edit. This time, set the Column Class to 1/5. Repeat the ones steps for the rest Columns.
Add Content material subject matter To The Mega Menu
Now, let’s add some content material subject matter to our mega menu. Inside the first Column, add a Heading Module, Video Module, Text Module, and Button Module. Style the modules to suit your preferences.
Make a selection the first Column inside the Row and change the Vertical Hollow to 15px. This will increasingly more tighten the spacing vertically.
Adjust the Vertical Hollow for the rest Columns by the use of copying the Column’s sorts inside the Content material subject matter tab. Correct-click on the second Column and choose Reproduction Products Sorts.
From there, right-click on the final Columns and choose Paste Products Sorts.
Continue together with content material subject matter to the rest Columns. Be sure that you’re using a Heading Module for each Column and link it to the principle pages of your internet web site. To set a internet web page link, you’ll be capable to use Divi 5’s dynamic content material subject matter icon to select the internet web page reasonably than manually linking.
Once clicked, choose the Internet web page Link selection.
Use the Internet web page dropdown menu to select a internet web page on your website online to link to the Heading.
You’ll be capable to moreover use Divi 5’s Loop Builder with the intention to upload blog posts on your mega menu. In this example, I’ve the blog set inside the fifth Column. To stick posts provide, you’ll be capable to allow the Loop Builder at the column level. Keep all alternatives at their defaults, with the exception of for Posts In keeping with Internet web page, which you should set to at least one.
From there, simply link the Modules inside the Column to their respective dynamic content material subject matter fields. The Heading Module would link to Loop Submit Determine, the Image Module to Loop Featured Image, Text Module to Loop Submit Excerpt, and plenty of others.
Step 4: Add Interactions
With the content material subject matter in place, we will be able to set the Interactions for the mega menu. The principle Interaction we need to create is the press Interaction to unlock the mega menu. While inside the Mega Menu canvas, click on at the Canvas Grid View icon to put across up the additional Canvases.
Click on on anyplace on the Main Canvas to activate it.
Make a selection the Icon Module and navigate to the Advanced tab. Make larger the Interactions menu and click on at the + Add Interaction button with the intention to upload a brand spanking new Interaction.
Select Click on on since the movement.
When the Edit Interaction modal turns out, give the Interaction an Admin Label, set the Affect Movement to Toggle Visibility, and the mega menu Section since the Objective Module. When operating with Canvases, Divi 5’s Interaction Builder can objective portions on other canvases, allowing you to connect your header icon to the menu segment stored in a separate canvas.
To prevent the mega menu from robotically appearing on the internet web site’s pages, we’ll need to add another Interaction that hides the segment until the hamburger icon is clicked. Make a selection + Add Interaction in every single place once more. This time, select Load from the available alternatives. Assign an Admin Label, Load since the Reason Event, Duvet Phase since the Affect Movement, and the mega menu Section since the Objective Module.
Save the Template and preview it on the front end. Your mega menu should appear whilst you click on at the hamburger icon.
Step 5: Make Responsive Adjustments
In the event you’ve created your mega menu, use Divi 5’s responsive apparatus to ensure that it sort of feels to be flawless on each and every visual display unit size. Divi’s Customizable Responsive Breakpoints will let you fine-tune your designs for 7 breakpoints. You’ll be capable to merely navigate each breakpoint and make changes as sought after.
However, the Responsive Editor signifies that you’ll make changes in keeping with breakpoint at the module level. Adjust text sizes, trade colors, add hover effects, and further, simply by clicking via each visual display unit size’s data field.
Download The Knowledge
Do you wish to have to take a greater take a look on the menu? Fill out the form beneath to acquire the operating information from this tutorial.
@media only visual display unit and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:forward of { border-top-color: #ffffff !essential; border-left-color: transparent !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: transparent !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:forward of { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .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 robust { 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 robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}
Download For Unfastened
Join the Divi Newsletter and we will electronic mail you a replica of the ultimate Divi Landing Internet web page Construction Pack, plus plenty of other glorious and free Divi assets, pointers and guidelines. Apply along and also you’re going to be a Divi clutch in no time. In the event you’re already subscribed simply sort on your electronic mail deal with beneath and click on on download to get admission to the layout pack.
You’ve successfully subscribed. Please check out your electronic mail deal with to make sure your subscription and get get admission to to free weekly Divi layout packs!
Divi 5‘s Canvases feature signifies that you’ll create mega menus with unmatched flexibility, precise keep an eye on, and artistic freedom. By the use of using detached Canvases, tough Interactions, and flexible responsive apparatus, you’ll be capable to assemble professional, reusable mega menus without relying on plugins or heavy custom designed code.
With Divi 5 at the present time in Public Beta, now’s the perfect time to jump in, experiment, and raise your designs. Obtain the most recent Public Beta and get began construction with Canvases at the present time.
The submit How To Create Mega Menus With Divi 5’s Canvases gave the impression first on Sublime Topics Weblog.
0 Comments