A Canvas is a dedicated, free-standing workspace that is separate from your main page or post content. Each Divi page starts with a main canvas for your primary layout, but additional canvases provide isolated spaces for builds outside the canvas. Canvases let you keep elements organized outside the canvas, safely duplicate and modify designs without affecting your live content, and can be global to site-wide components.
In this post, we’ll discuss what canvases are, how to use them, and share tips to unlock their full potential. Let’s get started.
What are canvases in Divi 5?
A Divi Canvas is a free-standing workspace within the Visual Builder where you can design and organize content. Think of it as a separate design board that exists alongside your main page layout.
Every Divi page or post automatically includes a default workspace called Headscarf. This is the primary area where you build the content of your page. In addition to the main canvas, you can also create Freestanding canvases. These are completely separate workspaces that do not appear in the Visual Builder main page area.
They’re ideal for building off-canvas design elements, such as slide-in menus, sidebars, or modals, and can be saved as reusable components without cluttering your primary layout.
Canvases can be created and assigned to a local page or as a global element, making them accessible from any page or post on your website. Global Canvases are ideal for site-wide elements such as menus, mega menus, pop-ups, cookie banners, or other components that you want to reuse consistently across multiple pages.
Key features and tools
Divi Canvases are not just insulated containers. They are deeply integrated with Divi 5’s modern toolset, making them incredibly powerful for dynamic designs. Using Divi 5’s interaction feature, you can target any free-standing canvas using triggers, such as clicking, hovering, scrolling, or entering/exiting a viewport.
This allows you to show, hide, or animate content off-canvas in response to user behavior, create advanced menus and slide-in panels, or reveal effects without custom code.
Add front end
When you create a canvas in Visual Builder, you choose to add its contents to the live page. Once added, your off-canvas designs will appear and function perfectly on the front end, even as they remain hidden and separated in the Visual Builder for an uncluttered website building experience.
Full support for Divi’s design tools
Content on each canvas supports all standard Divi 5 features, including animations and transformation effects, visibility settings (hide on phone, tablet, and desktop), responsive editing, nested modules, presets, and global design variables.
Canvas Portal module
The Canvas Portal module allows you to insert content from a standalone canvas directly into your layout within the Visual Builder or Theme Builder template. You can easily place the Canvas anywhere on the page, allowing you to connect and play reusable content anywhere on your site.
Once added, you can choose a canvas from a special drop-down menu.
Although canvases added through the Portal module cannot be edited directly, you can make changes by selecting the Portal canvas from the Canvas grid view.
How to open and manage canvases
Accessing and managing Canvases in Divi 5 is easy thanks to the special tools in Visual Builder.
Located at the top of the Visual Builder, next to the page title, it becomes Canvas drop-down menu acts as your primary hub for canvas navigation.
Click on it to see a list of all available canvases. You can quickly switch between Local And Global canvases to edit or click on the Add canvas button to create a new one.
Canvas grid view
For a broader overview, go to Canvas grid view. You’ll find it to the right of the Canvas drop-down menu.
This will display all your canvases as thumbnails, making it easy to view and manage multiple workspaces at the same time.
Management actions
Each cloth has one ellipse menu with options that allow you to perform essential actions.
The Canvas settings allow you give your canvas a namemake one global articleor add/don’t add to the headscarf.
The Export canvas option you can do this export the canvas as a JSON file for use on other Divi sites or import a new layout to replace it.
You can also edit, duplicate, or delete the canvas, or make a canvas the main canvas that appears on the page.
Common use cases and examples
Divi Canvases open up a world of creative and efficient workflows. Here are some of the most popular ways designers can use them in Divi 5.
As gathering places and playgrounds
One of the simplest yet most powerful uses for canvases is as a safe space to experiment with different designs. That’s possible duplicate your main canvas to create a new, stand-alone canvas.
From there, you can make bold changes, test new layouts, or build entirely new page variations without any risk to your live design. Once you’re happy with the results, simply set the new canvas as Headscarf. Divi 5 makes it easy to change it with one click on the front.
This is perfect for A/B testing ideas, developing presets, or iterating on customer feedback. Local canvases work great here for page-specific experiments, while you can even use global canvases for testing site-wide templates.
Canvass shine at building dynamic navigation elements that stay out of the way until they’re needed. Stay through one Global canvas especially for your menu.
Build a slide-in menu with vertical columns, icons and hidden sections.
Use the Interaction builder to target the canvas with triggers like Click.
Add Divi’s built-in animations to hidden sections for smoother slide-in, fade, or scale effects.
The canvas remains separate in the builder for a clean workspace, but is automatically added to the front-end when activated. This produces responsive, animated menus without any custom code.
Cloths are possible also be easily accessible in the Theme builderallowing you to create different looks for headers, footers, posts, archive pages and more.
Pop-ups and modals
Creating reusable, interaction-driven popups has never been easier. Build your pop-up in one Global canvas so it’s available sitewide or assign it to the Headscarf of a single page.
Activate it via the Interaction builder. Some common options include Scroll to Viewport or Click.
Enhance your popup with entrance effect animations and Visibility settings you want to hide until scrolling effects or click triggers are activated.
When set to Globala single pop-up canvas can drive exit intent modalities, newsletter signups, and more across your entire site.
These examples only scratch the surface. You can combine canvases with Divi 5’s other features to create even more advanced effects, like animated sidebars or interactive content reveals.
Tips and best practices
To get the most out of Divi Canvases, follow these simple tips below to build faster, smarter, and more reliably in Divi 5.
Start with global canvases for common elements
If you’re creating something that you’ll use on multiple pages, always build it as a global canvas. This ensures immediate site-wide availability and easy updates. You can change this once and the change will be reflected everywhere it is activated. This is perfect for navigation menus, mega menus, pop-ups, cookie notifications or promotional modalities.
Master Interactions
The real power of canvases comes from Divi 5’s Interaction Builder. Always target specific sections or the entire canvas with menu clicks or hovers. Choose scroll or viewport triggers for pop-ups or promo modalities. It’s best to start with simple triggers and then layer multiple interactions to achieve advanced effects like sequential reveals.
Combine with other Divi 5 features
Canvases fit beautifully with the rest of Divi’s toolkit. For example, you can use nested rows and modules to build complex layouts within canvases, such as multi-column mega menus or accordion-style sidebars. You can also use presets to create reusable canvas sections, apply animations, and more to create effective layouts that you can reuse throughout your site.
Always test from the front
The Visual Builder hides individual canvases for an uncluttered view, but they can be added to display on the live site. After setting interaction triggers, make sure to preview the layouts on all breakpoints, including desktop, tablet, and phone views. During testing, check the animation timing, overlay behavior and close pop-up functionality, and make adjustments as necessary.
Finally, clear your cache and test in an incognito window to find any issues. A quick front-end check saves time and ensures the best possible browsing experience.
Try Canvases in Divi 5 today!
Divi Canvases are a powerful addition to Divi 5 and will change the way designers build modern, dynamic, and interactive websites. By providing dedicated, free-standing workspaces for off-canvas elements such as menus, popups, sidebars, and other reusable components, Canvases provide a cleaner workflow, improved reusability, and greater versatility in the Builder.
Divi 5 continues to evolve in its public beta phase, and now is the perfect time to dive in and explore these features firsthand. Download Divi 5 today, experiment with building your own canvases and see how it can transform your web design experience!
#canvases #Divi