Every site eventually needs UI that lives outside the page’s normal content flow: a pop-up, a sticky reminder, a slide-in panel, or a confirmation prompt. In Divi 5, you can build these with Canvases.
A Canvas is a detached design workspace that exists alongside the main page canvas. It is not a module dropped into the page layout. Instead, it gives you a separate workspace for off-canvas UI, pop-ups, menus, staging layouts, and other designs that should stay separate from the main page while you build.
This part of the Mastery Course covers two Canvas builds for the coworking homepage. The first is a small Event Reminder notice anchored to the bottom-left of the viewport and dismissible with a close icon. The second is a centered email opt-in pop-up that is hidden by default, gated by a cookie condition, and triggered when the visitor scrolls to a specific section.
Together, these two examples show the full Canvas, Interactions, and Display Conditions workflow.
What Canvases Are
A Canvas is a detached workspace in Divi 5. The main Canvas holds the visible page content. Additional Canvases give you separate places to build alternate layouts, hidden UI, off-canvas elements, pop-ups, menus, and design experiments.
When needed, Canvas content can be appended to the front-end page or injected with a Canvas Portal. You can still design inside a Canvas using familiar Divi elements, including Sections, Rows, Columns, Groups, Modules, Presets, and Design Variables.
There are two main Canvas types:
- Global Canvas: Available across the site and useful for reusable UI, such as pop-ups, menus, notification bars, and recurring site-wide elements.
- Local Canvas: Tied to a specific page or template and useful for one-off UI that only belongs in a specific context.
We’ll build both types in this tutorial. The Event Notice will be a local Canvas for the homepage. The email opt-in pop-up will be a Global Canvas, but we’ll trigger it from the homepage. If you want the same pop-up to appear elsewhere, you can add similar trigger interactions on other pages or templates.
