We recently introduced Canvases in Divi 5. These are workspaces detached from your page. You can use Canvases to stage updates, keep off-canvas elements tidy, and much more.
In this post, we’ll go over how to use a Divi Canvas to stage website design changes right where you work. Let’s get to it!
What Is Staging And Why Does It Matter?
When redesigning a homepage, you may want to test several hero sections or rearrange content blocks. Making changes directly on your live website means every visitor sees your work as you build it. They’ll encounter half-finished sections, test content, and layouts you’re still tweaking.
Subscribe To Our Youtube Channel
A staging environment is a separate copy of your website that allows you to test and implement changes before they go live. You can experiment with new designs, test different layouts, and try ideas without affecting what visitors see. You can compare how changes look across different devices and switch between them.
You can also share previews with clients or team members. Once everything works the way you want, you can move those changes to your live site.
This approach keeps your public site stable while you work on it. Visitors always see the finished version, and you get the freedom to test without rushing. You can take the time needed to get things right before anything goes live.
However, most staging setups require separate servers, local development environments, or third-party tools. You work in one place, then sync files and databases to another. The process eats time and adds complexity to every update. For big updates, having a separate staging site might be necessary, but for smaller edits, there are alternatives as well.
Introducing Divi 5 Canvases
Canvases in Divi 5 are separate workspaces inside the Visual Builder. Your page always has a Main Canvas where your content lives. However, you can create additional Canvases that remain completely detached from the Main Area.
These detached workspaces don’t appear on your primary page view or directly to your visitor on the front end. You can build off-canvas menus, popups, sidebars, or any component without cluttering up your main editing space. Switch between them using the Canvas dropdown at the top of the builder. You can make Canvases global (available across your entire site) or local, where they remain tied to specific pages.
They also work with Interactions. Set up triggers on your main content that show or hide Canvas elements based on clicks, scrolls, or hovers. The entire system keeps things organized while giving you complete control over what appears.
We also built a Canvas Portal Module to insert Canvas content into specific areas of your page. Drop a Canvas Portal Module wherever you want that Canvas to appear, select your Canvas from the dropdown, and you’re done. The content shows up exactly where you placed the Portal.
How Canvases Create Isolated Workspaces For Staging
Canvases can be used as a staging area because they’re truly detached from each other. When you create a new Canvas, it exists in its own space. You can tear apart layouts, rebuild sections, or scrap entire designs without touching what’s live.
The Visual Builder keeps them completely separate until you assign one as the Main Canvas or connect it (for example, with Interactions or a Canvas Portal). You can create multiple canvases and switch between them instantly to work on different versions of the same page.
This isolation gives you freedom to test without consequences. Create a bold new homepage design in a separate Canvas while your current homepage remains active. Visitors never see the experiments, half-built sections, or ideas that didn’t pan out. They only see what you choose to make live.
Creating A Design Staging Area With Divi 5 Canvases
You’ve got the concept down. Let’s proceed to building a staging workspace. The entire setup takes only a couple of minutes once you know where everything is located. Here’s how to do it:
Duplicate Your Main Canvas
Start by opening the page you want to redesign in the Visual Builder. Your current layout stays on the Main Canvas, and we need to copy it before making any changes.
Look at the top left of the builder. You’ll see a Canvas dropdown menu there. Click it to see your canvases. Hover over the Main Canvas item and select the duplicate icon to create an exact copy of your Main Canvas as a new detached Canvas.
Everything transfers over: your sections, rows, modules, styles, and settings. The copy sits in its own workspace, completely separate from your live page. After creating a new Canvas, you’ll be switched to it.
Give your new Canvas a clear name by clicking on the settings icon when hovering over it. Give it a proper name, such as “Homepage Staging” or “Redesign Draft,” so you can easily identify it later. This naming step helps prevent confusion when you’re working with multiple canvases.
Make Changes In Your Staging Canvas
Select your staging Canvas from the dropdown menu. The Visual Builder loads your duplicated layout, and all editing tools work exactly as they do on your Main Canvas. To verify, you can check the name of the current canvas by looking at the top left dropdown.
Click any module to open its settings panel. Adjust text size, weight, style, and more. Drag sections to reorder them. Add new rows and modules from the insert menu. Delete elements you no longer need. Every change is saved to this Canvas only.
This is also a good time to clean up your design system. Open the Inspector to view all colors, fonts, and spacing values used throughout your page and confirm that everything is set up correctly.
Spot static values and replace them with Design Variables for better consistency. Use Find and Replace to swap old hex codes with your brand’s color variables across multiple elements simultaneously.
You can also pull saved layouts from your Divi Library into your staging Canvas. Drop in a saved layout, adjust it to fit your needs, and compare it against your current design.
Build out your redesign section by section. Assign Option Group Presets to buttons, headings, spacing, and more. You can also use Find and Replace here.
Working With Multiple Staging Canvases
You’re not limited to one staging Canvas. Create several to test different directions for the same page. Maybe one Canvas gets a bold new hero section while another keeps things closer to the original with minor tweaks.
Duplicate your Main Canvas as many times as you need. Give each version a clear name: “Homepage Draft A,” “Homepage Draft B,” and so on. Switch between them using the Canvas dropdown to compare layouts side by side.
This setup works well for client projects. Build two or three variations, then walk through each option during a review call to discuss the pros and cons of each. Once everyone agrees on a direction, you can move forward.
Preview Your Staged Changes
Open the Canvas dropdown at the top of the builder. Select your staging Canvas to load it, then select Main Canvas to load your live version. Go back and forth a few times. The visual difference becomes clear when you flip between them.
The Canvas Grid View provides an alternative way to compare. Click the grid icon next to the Canvas dropdown. All your canvases appear as tiles with visual previews. Your Main Canvas and staging versions sit next to each other, allowing you to spot differences at a glance.
Set Your Staging Canvas Live
Once your redesign is complete and looks good, it’s time to make it live. Open the Canvas dropdown and hover over your staging Canvas. Assign the Canvas as the Main Canvas, and then hit Publish. Your staging design replaces the old layout instantly.
You can also use the Canvas Grid View for this step. Right-click on your staging Canvas and select “Make Main Canvas” from the menu.
The swap happens immediately as soon as you publish. Your visitors now see the new version on the front end while your old Main Canvas becomes a detached Canvas. You can keep the old version stored in case you need to reference it later or switch back.
Your previous Main Canvas remains available as a detached Canvas, which can be confusing when viewing your canvas list later.
Consider renaming it to something like “Previous Homepage Design,” “Backup Jan 2026,” or “Original Layout Archive” right away to stay organized.
You can also delete the old canvas from the same options dialog once you’re certain the new design works well. Keep it around for a week or two while you monitor visitor feedback, and then remove the backup to keep your canvas list clean.
Try Canvases In Divi 5 Today!
Staging website changes with Divi Canvases removes the friction from your redesign process. You can test freely, compare versions side by side, and push updates live without touching staging servers or local builds. The entire workflow remains within the Visual Builder, where you already work.
Canvases do more than staging, though. Use them for off-canvas menus, popups, sidebars, or any detached component you need. Trigger them with Interactions or place them with Canvas Portals.
Get Divi 5 today and see why it’s the best Divi version out there!
Leave A Reply