Off canvas menus seem in all places on the internet, however development person who works easily on desktop continuously approach preventing with customized CSS or patching in combination mega-menu workarounds. Divi 5 handles this in a different way with Canvases and Interactions.
We’ll construct an international off canvas services and products menu precipitated from a Theme Builder header template. The menu sits in its personal canvas, totally separate out of your web page format, and remains mounted whilst guests scroll. On cellular, it will get a max-height and inside scroll so the entirety remains out there on smaller monitors.
What Are Canvases In Divi 5?
A canvas in Divi 5 is a separate workspace that exists out of doors your major web page format. Your web page content material lives in the principle builder space, however canvases function independently and keep hidden till precipitated.
Bring to mind them as devoted boxes for interface components that most effective seem when wanted. You construct off canvas menus, slide-in panels, popups, or drawers within a canvas, they usually wait within the background till a button click on or interplay pulls them into view. The web page doesn’t sign in their presence till that second.
After updating your Divi 5 theme to the newest model, you’ll see a brand new Canvas dropdown within the height bar.
The dropdown allows you to transfer between canvases you’ve created. The Canvas Grid View possibility displays all canvases in one dashboard for fast get right of entry to.
You’ll be able to create each native and international canvases. Native canvases belong to a selected web page or template. International canvases paintings throughout all of your website, so that you construct a navigation panel as soon as and reuse it in all places with out duplicating design paintings.
Canvases attach without delay to Divi’s Interplay device. Cause them with clicks, hovers, scrolls, or different occasions. They seem dynamically at the entrance finish however stay arranged within the builder as their very own layer, so updating a menu design doesn’t ripple into the pages the place it sounds as if.
Why Use Divi Canvas For Off Canvas Menus?
The previous way to mega menus continuously intended embedding them without delay into your header format. A spacing tweak or responsive adjustment may spoil the menu completely, and solving it intended digging via nested sections to untangle navigation good judgment from format code. Canvases get rid of this via giving the menu its personal remoted house.
This separation makes upkeep more straightforward as your website grows. Replace the menu’s format, hyperlinks, or styling as soon as in an international canvas, and the adjustments take impact in all places. Canvases additionally get rid of the desire for workarounds equivalent to customized CSS, adverse margins, or third-party plugins. Cause the menu via Divi’s Interplay device and let the builder deal with the remaining.
Be informed The entirety About Divi 5 Canvases
What We’re Development
We’re development an international off canvas slide-in menu precipitated via a button within the website header. The button sits in a Theme Builder header template, this means that the menu works site-wide with out rebuilding it on particular person pages.
The menu lives in a canvas set to “Don’t Append”, so it remains from your web page format till an interplay unearths it. When precipitated, it sounds as if as a set overlay that continues to be on-screen as guests scroll. On cellular, we’ll upload a max-height and inside scroll container so the menu stays out there even if content material extends past the viewport.
Via the tip, you’ll have a menu that behaves persistently throughout breakpoints and doesn’t intrude with web page layouts.
1. Create The Header In Theme Builder (And Upload The Button)
Open Divi > Theme Builder and edit your present International Header. We’re running on the template stage so the menu button seems on each and every web page with out guide placement.
Within the header format, upload a Button module and position it within an present header row subsequent for your Menu module. Label it View Products and services and elegance it to compare your header design. This button will cause the off canvas menu, so its placement and styling will have to really feel herbal inside your navigation.
2. Create A New Canvas For The Menu
With the cause button in position, we’d like someplace for the menu to are living. Within the Visible Builder, open the Canvas dropdown from the highest bar and click on Upload Canvas.
Title the canvas Submenu, so it’s simple to spot when putting in place interactions later. Make it International so it’s out there throughout all of your website, and set it to Don’t Append.
This surroundings helps to keep the canvas totally indifferent out of your web page construction, which prevents it from interfering with web page layouts whilst nonetheless making it to be had for interactions to focus on. Click on Upload Canvas when achieved.
Divi routinely switches you into the canvas workspace. You presently have a clean space the place you’ll construct the menu construction.
3. Design The Off Canvas Menu Format
Get started via including a typical segment with a black background colour set to 70% opacity. This creates the overlay impact that dims the web page content material when the menu opens.
Set the segment’s Width to 100vw and Top to 100vh so it covers all the viewport. Within the segment, upload a single-column row. This row will grasp the true menu content material. Set the Background to White and upload a 10px Border Radius for visible polish. Pass to Design > Format and set each Horizontal and Vertical Gaps to clamp(20px, 4vw, 50px).
This fluid spacing price helps to keep the format respiring naturally throughout display sizes with out guide breakpoint changes.
Upload a Textual content module on the height for a heading like “All Options”, then position an Icon module subsequent to it for the shut button. This shut button will cause the interplay that hides the menu, so stay it visually distinct and out there.
Underneath the header row, upload a 4-column row to construction your provider choices. Divi 5’s Flexbox device handles the column format, so the 4-column format routinely becomes two and single-column layouts in accordance with to be had house.
In every column, upload a Blurb module with the provider title because the identify and a brief description within the frame textual content. Underneath every blurb, upload a Button module classified “Be informed Extra.”
Repeat this trend throughout the rest menu pieces to finish the menu construction.
4. Set The Menu To Fastened Place
The menu wishes to stick anchored on display whilst guests scroll the web page underneath it. With out mounted positioning, the menu would scroll with the web page content material, breaking the overlay habits.
Make a choice the Segment and set Place to Fastened. Then set the Z Index to 9999 so the menu seems above all different web page components, together with sticky headers or different mounted components.
In case your panel shifts whilst scrolling, observe the similar positioning settings to the Row that holds the menu panel. This is helping take care of the layered construction.
5. Optimize The Menu For Cell With Max Top And Scroll
With the menu construction and positioning in position, we want to deal with the way it behaves on smaller monitors. The header row wishes changes to forestall stacking on cellular.
Transfer to pill view and make a selection the header row. Pass to Design > Format, set Align Pieces to Middle for constant vertical alignment, and allow No Wrap to stay those components side-by-side slightly than stacking vertically.
This helps to keep the heading and shut button in one horizontal row throughout all display sizes.
Now we want to cope with the entire top. On smaller monitors, all the menu panel can exceed the viewport top, pushing content material off-screen. Make a choice the Row that accommodates the entire menu content material (the white container with the heading row and menu pieces), and set the Max Top to 80%.
This constrains the menu to 80% of the viewport top, leaving respiring room on the height and backside. Now cross to Complex > Visibility > Vertical Overflow and make a selection Scroll.
This creates an inside scroll container. Guests can now scroll throughout the menu content material with out the panel itself extending past the display limitations.
Practice those identical settings (Max Top 80% and Vertical Overflow Scroll) to cellular view to verify the menu works persistently throughout all small display sizes.
6. Cover The Canvas On All Breakpoints
The menu is constructed and optimized, however it’s these days visual within the builder. Since that is an off canvas menu that are meant to most effective seem when precipitated, we want to disguise it via default throughout all breakpoints.
Open the Segment settings, cross to the Complex tab, and to find the Visibility choices. Disable visibility on desktop, pill, telephone, and different breakpoints.
This hides the menu from view, however interactions can nonetheless goal it and toggle its visibility. When you’re within the Segment settings, additionally set Complex > Visibility > Vertical Overflow to Auto so the segment itself can deal with overflow gracefully if wanted.
Choice Approach: You’ll be able to additionally disguise the segment the usage of customized CSS. Pass to Complex > CSS > Module Parts and kind show: none; within the Major Component box. This achieves the similar outcome the usage of CSS slightly than visibility controls.
This helps to keep the menu hidden throughout all breakpoints. Even though interactions haven’t fired but, the menu gained’t seem. Bring to mind this as your baseline state: hidden until advised in a different way.
7. Upload Interactions To Open And Shut The Menu
With the menu constructed and hidden, we want to cord up the interactions that keep an eye on its visibility. Divi’s Interactions device works via 3 elements: a cause (what initiates the motion), an impact (what occurs), and a goal (what component is affected). We’ll arrange two interactions, one to turn the menu when the button is clicked and one to cover it when the shut icon is clicked.
First, give the menu segment a transparent Admin Label so it’s simple to focus on within the interplay settings. Make a choice the Segment that holds your menu content material, cross to Settings > Content material > Admin Label, and title it Submenu Segment.
This label makes the segment identifiable while you’re settling on goals throughout other canvases.
Now transfer again to the Major Canvas the usage of the dropdown on the height of the builder. This takes you to the web page the place your header lives.
Make a choice the View Products and services button for your header. Pass to Settings > Complex > Interactions and click on Upload Interplay.
Within the interplay editor, set the Cause Tournament to Click on. This tells Divi to start up the interplay when any individual clicks the button. For Impact Motion, make a choice Display Component, which makes a hidden component visual. Then make a selection Submenu Segment because the Goal Module.
That is the place the Admin Label you place previous turns into very important. Go away the Time Prolong at 0ms for fast reaction, then click on Save.
When the interplay runs at the entrance finish, Divi a lot the canvas content material and toggles the segment’s visibility. The menu seems as a set overlay with out disrupting the web page construction.
Earlier than shifting on, upload yet one more interplay to keep an eye on the menu’s default state.
Make a choice the View Products and services Button once more and upload a brand new interplay. Set the Cause Tournament to Load, make a choice Cover Component because the Impact Motion, and stay Submenu Segment because the Goal Module.
This forces the menu right into a hidden state on each and every web page load. Even though the canvas used to be visual right through preview or a prior interplay, it resets on refresh and not flashes on display. The sooner visibility settings outline the baseline, and this interplay controls the menu’s state at runtime so it at all times begins closed.
Now arrange the shut interplay. Transfer again to the Submenu Canvas the usage of the dropdown, and make a selection the shut icon subsequent to the “All Options” heading.
Pass to Settings > Complex > Interactions and upload some other interplay. Set the Cause Tournament to Click on, make a choice Cover Component because the Impact Motion, and make a selection Submenu Segment because the Goal Module. Stay the Time Prolong at 0ms, then save.
This interplay reverses the visibility toggle. When clicked, the menu disappears, and the canvas detaches from the web page till precipitated once more.
The interactions at the moment are are living. The button displays the menu, the shut icon hides it, and each paintings throughout all of your website for the reason that canvas is international and the button lives within the Theme Builder header.
Preview The Menu On The Entrance Finish (Desktop & Cell)
With the interactions configured, save each the Theme Builder header and the canvas. Now take a look at the menu at the entrance finish to substantiate it behaves appropriately throughout units.
Open any web page in your website and click on the View Products and services button within the header. The menu will have to slide in as a set overlay that sits above the web page content material. Scroll the web page whilst the menu is open to ensure it remains anchored in position as an alternative of shifting with the web page. This confirms that the mounted positioning is operating and the menu purposes as a real overlay, no longer as a part of the web page format.
Transfer to a cellular software or use your browser’s responsive view, then faucet the View Products and services button once more. The menu will have to keep contained throughout the viewport with out extending past the display limitations. If the content material is taller than the display, you will have to be capable to scroll throughout the menu pieces throughout the overlay whilst the overlay stays mounted.
Checking out on each desktop and cellular validates that the canvas device, Flexbox settings, and interactions paintings in combination correctly. The menu now purposes as a certified navigation element that adapts to any display measurement with out breaking your web page construction.
Obtain The Educational Template
If you wish to use this instructional’s header template, you’ll be able to obtain it underneath!
@media most effective 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 !essential; border-left-color: clear !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: clear !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 { colour: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:ahead 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 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 !essential;}
Obtain For Loose
Sign up for the Divi E-newsletter and we will be able to e mail you a duplicate of without equal Divi Touchdown Web page Format Pack, plus heaps of alternative wonderful and unfastened Divi assets, pointers and tips. Apply alongside and you are going to be a Divi grasp very quickly. In case you are already subscribed merely sort for your e mail cope with underneath and click on obtain to get right of entry to the format pack.
You have got effectively subscribed. Please test your e mail cope with to substantiate your subscription and get get right of entry to to unfastened weekly Divi format packs!
Check out Canvases In Divi 5 As of late!
Canvases and Interactions in Divi 5 deal with off canvas menus cleanly. The canvas helps to keep the menu separate out of your web page construction, mounted positioning makes it behave like an overlay, and Flexbox handles responsive habits with out customized CSS. Set it up as soon as in an international canvas, cause it out of your Theme Builder header, and it really works site-wide.
This identical way applies to product menus, characteristic showcases, or any navigation component that should slide in on call for. The mechanics keep the similar: construct in a canvas, set visibility regulations, and twine up the interactions.
The put up How To Create An Off Canvas Products and services Popup In Divi 5 gave the impression first on Chic Issues Weblog.
WordPress Web Design