Every site eventually needs UI that lives outside the page's normal content flow. For example, a pop-up, a sticky reminder, a slide-in panel, or a confirmation prompt.
In Divi 5, you build these with Canvases. This part of the Mastery Course walks through two Canvas builds for the coworking homepage:
A small Event Reminder notice pinned to the bottom-left corner and dismissible with a close icon.
A centered email opt-in pop-up that stays hidden until the visitor scrolls to a chosen section and never returns once dismissed.
Together they show the full Canvas, Interactions, and Display Conditions workflow.
What Is a Canvas
A Canvas is a detached workspace in Divi 5. The main Canvas holds your visible page content. Additional Canvases give you separate places to build alternate layouts, hidden UI, off-canvas elements, pop-ups, menus, and design experiments.
You still design inside a Canvas using familiar Divi elements: Sections, Rows, Columns, Groups, Modules, Presets, and Design Variables.
When needed, Canvas content can be appended to the front-end page or injected with a Canvas Portal module.
There are two main Canvas types:
Global Canvas: available across the site, useful for reusable UI such as pop-ups, menus, and notification bars.
Local Canvas: tied to a specific page or template, useful for one-off UI that only belongs in a specific context.
You will build both here. The Event Notice is a local Canvas for the homepage. The email opt-in pop-up is a Global Canvas triggered from the homepage. To make the same pop-up appear elsewhere, add similar trigger interactions on other pages or templates.
How Canvas Visibility Works
Three features work together to make a Canvas behave like a pop-up, notice, or slide-in panel.
Visibility settings: hide an element by default so it does not appear until an interaction reveals it.
Interactions: event-based behavior. A trigger such as Click, Load, or Viewport Enter runs an effect such as Show Element, Hide Element, Toggle Visibility, Add Cookie, or Remove Cookie on a target element.
Display Conditions: decide whether an element should render based on conditions such as user role, device, date, or cookie values.
This combination lets you design the element visually, hide it by default, reveal it at the right moment, and optionally prevent it from appearing again after a visitor closes it.
Build the Event Reminder Notice
The Event Reminder is the simpler build:
A small card pinned to the bottom-left of the viewport,
With a light background, a dark border, a heading, a short description, and
A close icon.
It appears on page load and can be dismissed for the current page view. Because no cookie is set, it can appear again on a future page load.
Create the Local Canvas
In the Visual Builder, open the Off Canvas dropdown
Click the Add Canvas button.
Type in the off-canvas's name, for example, Event Notice.
In the Append to Main Canvas dropdown, choose Append Below.
In the Z-index field, type 999.
Click the Add Canvas button.
Build the Event Notice Off-Canvas Layout
Section Styles
When clicking the Add Canvas button, the Visual Builder will automatically switch to the editing mode of the Event Notice off-canvas.
Close the Insert Row modal
Open the Section's settings and in the Content tab → Meta → Element Label give it a descriptive name, such as Event Notice, so it is easy to find when you target it with an interaction.
In the Content tab → Background → Background Color:
Set the White variable.
Set the opacity value to 0.
Go to the Section's Desing tab → Sizing and set the Max Width to min(250px, 40%).
In the Desing tab → Spacing, set the following values for the Margin and Padding:
Margin Bottom/Left/Right: 1rem,
Padding Top and Bottom: 0px,
Go to Advanced → Position and from the Position dropdown choose Fixed.
Set Offset Origin to bottom left.
The Row's and Column's Styles
Add the Green + icon to insert a 1 Column Row.
For the Row, apply the Contained - Dark element preset.
From the Row's Content tab → Background → Color to the Background - Light Gray variable.
In the Row's Desing tab → Sizing → Width, set it to 100%.
In the Row's Desing tab → Sizing → Max Width, set it to none.
Since the Contained - Dark element preset is applied to the Row, in the Desing tab → Border, also apply the Outline - Dark option group preset.
From the Content tab → Elements, click on the Pen icon for the Column to open its settings.
For the Column's Desing tab → Layout → Vertical Gap, apply the 1rem value.
Add the Content and Content Styles
Inside the Column, add three modules in this order:
Icon module's styles:
Use a close icon such as an X.
From the Desing tab → Icon → Icon Size, choose 26px.
From the Desing tab → Spacing → Margin, set -0.5rem for all sides (top, bottom, left and right)
From the Advanced tab → Position, choose Absolute.
Set the Offset Origin to Top Right.
For the Heading module
Apply the Subheading element preset
Set the text to Reminder!.
For the Text module:
Apply the Small Text element preset
Set the body text to: Networking event on Wednesday, August 16th, from 4 pm until 6 pm.
Wire the Close Icon's Interaction
Click on the Icon module to open its settings.
Go to the Advanced tab → Interactions.
Click on the + Add Interaction button.
Configure the interaction as follows:
Trigger: Click
Effect: Hide Element
Target: Section (Event Notice) from the Event Notice off-canvas.
Save the Canvas and reload the page on the front end.
The notice should appear in the bottom-left corner and disappear when the close icon is clicked. Because no cookie is set, it can reappear on a future page load.
Build the email opt-in pop-up
The email opt-in pop-up is more involved:
A centered modal with a headline, reassurance text, and a close icon,
An Email Signup form.
Functionality:
It is hidden by default
Shown when a visitor reaches a chosen homepage section,
Blocked from future views after the visitor closes it.
Create the Global Canvas
From the Off Canvases Dropdown, click on the Add New Canvas button.
Name it Sign Up Pop-up Form.
Toggle on the Make Global toggle.
From the Append to Main Canvas dropdown, choose Append Below.
Set the Z-index to 1000.
Click the Add Canvas button.
Build the "Pop-Up" Section
Clicking the Add Canvas button will open a new empty canvas with a Section.
Close the Insert Row modal.
In the Section's Content tab → Background → Background, apply the Background - Light Gray variable.
In the Section's Content tab → Meta → Element Label, type in Subscribe.
In the Section's Desing tab → Sizing, set the:
Width to 980px
Max Width to 80%;
In the Section's Desing tab → Border, apply the Outlined - Dark option group preset.
In the Section's Advanced tab → Position set:
Position: Fixed
Offset Origin: Center
Build the Row and Columns
Add a Row with a 1 Column Layout.
From the Row's Content Tab → Elements, duplicate the existing Column two times.
In the Row's Desing tab → Layout, set the Layout Wrapping:
For the Horizontal Gap, apply the Spacing - Medium variable.
For the Vertical Gap, apply the Spacing - Medium variable.
For the Layout Wrapping, choose Wrap.
In the Row's Desing tab → Sizing → Max Width, apply the Max Width - 900 variable.
Edit the first column and in the Desing tab → Sizing → Column Class:
For the Desktop breakpoint, choose 3/5.
For the Tablet breakpoint, choose 100%.
Edit the second column and in the Desing tab → Sizing → Column Class:
For the Desktop breakpoint, choose 2/5.
For the Tablet breakpoint, choose 100%.
Edit the third column and in the Desing tab → Sizing → Column Class:
For the Desktop breakpoint, choose 100%.
For the Tablet breakpoint, choose 100%.
Open the Row's settings and
Duplicate the second Column to create a third Column.
Configure the three Columns with these Column Classes:
Column 1: 3/5 on Desktop, Fullwidth on Tablet and smaller.
Column 2: 2/5 on Desktop, Fullwidth on Tablet and smaller.
Column 3: Fullwidth on Desktop and smaller.
Add the Pop-Up Modules
In Column 1
Add the Heading module
Apply the Heading 4 element preset
Set the text to be Discounts, Giveaways, & Other News
In Column 2,
Add an Icon module using a close icon and set the following styles:
In the Desing tab → Icon → Icon Size, set it to 26px.
In the Desing tab → Spacing → Margin, set the Top/Bottom/Left and Right values to 1rem.
In the Advanced tab → Position, choose:
Position: Fixed
Offset Origin: Top Right.
Add a Text module, and
Apply the Small Text element preset, and
Set the Body text to Max one email per month.
(optional) On desktop, you can align this text right; on Tablet and smaller, switch it back to the left so it reads naturally.
In Column 3:
Add an Email Optin module and
Apply the Dark Element Preset.
In the Content tab → Text, remove the placeholder text for the Title and the Body.
In the Content tab → Email Account, set the Email Provider dropdown to your service of choice.
In the Content tab → Fields, deactivate the Show First Name field and the Show Last Name Field options.
Set the Cookie Display Condition
Open the section's settings and go to the Advanced tab → Conditions.
Click the + Add Condition button
From the Conditions Dropdown, scroll to the bottom and choose Cookie.
Set the following rules:
Display Rule: Cookie Value Does Not Equal
Cookie Name: hide-popup
Cookie Value: true
Click the Apply button.
This tells Divi to render the pop-up Section only when the hide-popup cookie does not equal true. Once the visitor closes the pop-up and the cookie is written, the condition no longer passes, so the pop-up will not render again until the cookie expires or is cleared.
Wire the Close and Cookie Interactions
You will set up two Interactions for the Icon module which will:
Close the Pop-up section when the Icon module is clicked
Set up the cookie when the Icon module is clicked
Set up the Icon module's interactions:
Select the Icon module in Column 2.
Go to the Advanced tab → Interactions.
Click the + Add Interaction button and configure the interaction as follows:
Trigger Event: Click
Effect Action: Hide Element
Target Module: Section (Subscribe) from the Sign Up Pop-up Form Canvas
Click the + Add Interaction button to add the second interaction and configure the interaction as follows:
Trigger Event: Click
Effect Action: Add Cookie
Cookie Name: hide-popup
The first interaction gives an immediate visual response by closing the pop-up. The second writes the cookie that the Display Condition checks on future page loads.
Next, you need to set the entire section to not be visible - the section will appear by creating an interaction on the homepage.
Open the Section's settings
Go to the Advanced tab → Visibility,
Enable all the available breakpoints.
The homepage trigger will reveal it when the visitor reaches the chosen section.
Wire the Homepage Trigger
Save the Canvas, then return to the main homepage Canvas.
Open the Layers View from the left sidebar and select the Features section that contains the Thrive in a better work environment heading.
Go to the Advanced tab → Interactions
Click on the + Add Interaction, and configure the interaction as follows:
Trigger: Viewport Enter
Effect: Show Element
Target: Section (Subscribe) under the Sign Up Pop-up Form Canvas
This shows the pop-up when the visitor scrolls that section into view, which avoids the pop-up appearing immediately on page load for a less intrusive experience.
The final result:
Notes:
The Event Notice can appear on page load because it is small and out of the way.
The email pop-up waits for a scroll trigger because it takes over the center of the screen.
Both close with Icon interactions, and the email pop-up uses its cookie condition to prevent repeat views.
The same Canvas, Interactions, and Display Conditions pattern can power cookie banners, slide-ins, announcement bars, confirmation prompts, onboarding panels, and off-canvas menus.
Download the Homepage Layout
Read the full tutorial
Read the complete step-by-step guide on the Elegant Themes blog: Part 13: Creating Interactive Off-Canvas Elements (Popups & More).
Previous Course | Next Course |
Part 14: → |