A canvas in Divi 5 is a workspace detached from your main post content. You can use canvases as staging areas for design updates, a place to organize off-canvas components, or simply as a safe space to experiment with new ideas without touching what visitors see on the front end.
Every page has a main canvas, which represents the page's primary content. Any new canvases you create are detached from that main content, but still live inside the same page or template.
You can create global canvases that are available everywhere across your site, and local canvases that belong only to a specific page or template. Divi 5 also adds a new Canvas Portal module that lets you inject canvas content into specific spots in your layout.
What Is a Canvas in Divi 5
You can think of a canvas as its own mini workspace:
The main canvas holds your page's visible content.
Additional canvases are detached workspaces where you can build other layouts.
Those detached canvases can be used for off-canvas elements (like menus and popups), for staging alternate versions of a page, or for design experiments and preset creation.
Canvases stay separate in the builder, but they can be automatically appended to your page on the front end when needed.
How to manage canvases in Divi 5
When you open the Divi 5 Visual Builder, you will see a new canvas dropdown at the top of the builder. This is where you manage your canvases.
From the canvas dropdown, you can:
Switch between canvases
Add a new canvas
Mark a canvas as global so it can be reused on other pages or templates
Choose to automatically append specific canvases to your post content on the front end
Once you switch into a canvas, you work inside a detached workspace. You can design sections, rows, and modules just like you would on the main canvas.
Still, those changes do not affect the main page until you intentionally connect them (for example, with interactions or Canvas Portals).
You can also open a canvas grid view to see a visual overview of all canvases attached to the current page or template. From the grid view, you can:
Quickly switch between canvases
Right-click a canvas to edit, duplicate, export, or delete it
Assign any canvas as the main canvas for that page
Assigning a canvas as the main canvas is an easy way to work on different page variations and then set one live when it's ready, without having to manage separate library layouts.
Canvas Staging Areas and Playgrounds
One of the simplest ways to use canvases is as staging areas or playgrounds for ideas.
You can:
Create a new canvas when you want to experiment with a design idea
Build freely on that canvas without touching the page's main content
Use a canvas as a workspace for creating and testing presets
Duplicate your existing main canvas to a new canvas, make changes there, and then assign the updated canvas as the main canvas when you are happy with it
This gives you a safe way to explore layout changes, test variations, and refine design systems without risking your live content.
Off-canvas menus and popups
Canvases become very powerful when you use them to organize off-canvas components such as menus and popups.
In Divi 5, the Interaction Builder can target elements that live on other canvases. That means you can:
Store hidden sections for menus and popups in their own canvases
Create interactions on your main canvas that target elements in those off-canvas workspaces
When an interaction targets a canvas, Divi automatically appends that canvas to the main canvas on the front end so the content is available for the interaction to show or hide. In the builder, those off-canvas elements stay out of your way on their own canvases.
A typical workflow might look like this:
Create a global "Menu" canvas that stores a hidden section containing your off-canvas menu.
Create a global "Popup" canvas that stores a hidden section for a promotional pop-up.
Use Divi's animation settings to animate those sections (for example, sliding in from the side or fading in).
On your main canvas, add an icon in your header and use the Interaction Builder to add a click interaction that toggles the menu section on the "Menu" canvas.
Add a viewport interaction to a section on the main canvas that toggles the popup section on the "Popup" canvas when the user scrolls down.
On the front end:
Clicking the menu icon toggles the off-canvas menu stored in the menu canvas.
Scrolling down the page triggers the viewport interaction and toggles the pop-up stored in the pop-up canvas.
The off-canvas content is reusable, neatly organized on its own canvases, and only appears to visitors when your interactions toggle it.
Canvas Portal Module
Divi 5 also introduces a new module called the Canvas Portal. This module lets you inject content from a canvas into a specific location inside your layout.
The idea is simple:
You build content on a canvas (for example, a mega menu).
You place a Canvas Portal module somewhere on your main canvas (or inside another module).
You configure the Canvas Portal to pull in content from that canvas.
This is especially useful when you want off-canvas content to appear relative to a particular element.
For example:
You create an off-canvas mega menu on its own canvas.
You set up an interaction so that hovering over an anchor link in your header toggles that mega menu.
Because you want the mega menu to be positioned relative to the link, you use a Canvas Portal module to inject the mega menu content inside the text module that contains the link.
Divi 5's nested elements make it easy to place the Canvas Portal inside the text module and position the mega menu exactly where you want it.
With canvases, the Interaction Builder, and the Canvas Portal module working together, you can build complex off-canvas menus, popups, and advanced layouts while keeping your main canvas clean and easy to manage.