I’m excited to introduce Divi Canvases for Divi 5.
A canvas is a workspace indifferent out of your major put up content material. You’ll use them as staging spaces for design updates, a spot to prepare off-canvas parts, or just as a protected house to experiment with new concepts. You’ll create international canvases to construct website-level off-canvas menus and popups, in addition to native canvases for explicit posts.
We additionally added a brand new Canvas Portal module!
Take a look at the next video to look the brand new characteristic in motion. 👇
How To Use Canvases In Divi 5
First off: what’s a canvas? Put merely, canvases are puts the place you’ll construct issues whilst maintaining them break free every different. Each web page includes a major canvas, representing the web page’s number one content material. New canvases are indifferent from the principle content material. They are able to be used to construct off-canvas parts focused by way of Divi’s interplay builder, or as a spot to experiment with new concepts with out affecting the web page at the entrance finish.
Managing Canvases
You’ll understand a brand new canvas dropdown menu on the best of the builder. You’ll use this to change between canvases or upload a brand new canvas. You’ll make canvases international to lead them to out there from any web page or template, and you’ll make a selection to routinely append canvases in your put up content material at the entrance finish.
As soon as within a canvas, you’ll paintings freely inside the indifferent workspace.
Click on the canvas grid view to get a field of regard of your entire canvases and turn between them. You’ll right-click to edit, reproduction, export, and delete. You’ll additionally assign any canvas as the principle canvas for that web page; it’s a pleasant solution to paintings on and set reside other web page permutations with no need to move in your library.
Canvas Staging Spaces And Playgrounds
Some of the most simple programs for canvases is to create indifferent workspaces to experiment with new concepts. Hop onto a brand new canvas and get your concepts onto the web page with out messing with the web page’s content material at the entrance finish. Use a canvas as a workspace for developing presets.
Canvases additionally function staging spaces. You’ll reproduction your major canvas, make adjustments, after which set them reside when they’re able.
Off Canvas Menus & Popups
An effective way to make use of canvases is to retailer off-canvas parts, equivalent to popups and menus, making them reusable and from your approach. That’s as a result of we up to date the Interplay Builder to paintings with off-canvas components.
As an example, you’ll create an interplay for your major canvas that goals an off-canvas popup. Canvases focused by way of interactions are routinely appended to the principle canvas at the entrance finish, however saved out of our approach within the builder.
Within the instance video beneath, I created international menu and pop-up canvases that retailer hidden sections, which I animated the usage of Divi’s animation settings. I added a click-based interplay to this icon in my header to toggle the principle segment within the menu canvas, and I added a viewport interplay to this segment to toggle the pop-up. At the entrance finish, clicking the menu icon toggles the menu, and scrolling down the web page toggles my pop-up.
Canvas Portal Module
We additionally presented a brand new module known as the Canvas Portal, which can be utilized to inject canvas content material into explicit spaces for your web page.
As an example, within the video beneath, I created an off-canvas mega menu this is toggled after I hover over an anchor hyperlink in my header the usage of Divi’s interplay builder. Since I would like the mega menu to be located relative to the hyperlink, I used a canvas portal to inject the content material throughout the textual content module, which is straightforward because of Divi 5’s nested elements.
Take a look at Divi 5 Nowadays
Divi’s off-canvas device is amazingly flexible, providing you with extra freedom than different developers to make use of canvases in distinctive techniques. It’s to be had for Divi 5 lately, so give it a try and tell us your ideas.
We rebuilt Divi from the bottom up and packed it filled with dozens of your maximum asked options. Fail to remember the whole thing you idea you knew about Divi, as a result of Divi 5 is a completely other beast.
Have You Attempted Nested Modules For Divi 5?
For those who neglected it, we just lately launched Stacked & Nested Presets for Divi 5. It’s a surprisingly robust improve that makes Divi’s preset-based design device merely the most efficient. You’ll stack a couple of presets on any component, and nest team presets within component presets. There’s a hyperlink within the video description to be informed extra.
Watch this video for all of the main points. 👇
Extra Divi 5 Updates Are On The Manner
2025 is the 12 months of Divi 5. The tedious paintings is at the back of us. We constructed the super-fast basis, and now it’s time for Divi to make its comeback.
If you happen to’re right here for the Divi comeback, do us an enormous desire and tell us by way of liking this video and leaving a comment. It method so much to us to look you cheering Divi on, and it’s crucial to feed the set of rules and unfold the phrase.
Don’t overlook to follow us on YouTube and subscribe to the Divi newsletter so that you by no means pass over an replace. I’ll see you quickly for any other Divi 5 characteristic announcement, which I promise will probably be correct across the nook. 😁
The put up Introducing Divi Canvases (Off-Canvas Menus, Popups & Canvas Portals 🤯) seemed first on Elegant Themes Blog.
Contents
- 1 How To Use Canvases In Divi 5
- 2 Take a look at Divi 5 Nowadays
- 3 Have You Attempted Nested Modules For Divi 5?
- 4 Extra Divi 5 Updates Are On The Manner
- 5 How To Transition From Block To Flex In Divi 5
- 6 8 WordPress Plugins That Use AI to Toughen Potency
- 7 17 Very best WordPress Mailchimp Plugins for 2023



0 Comments