Skip to main content

The Canvas Portal Module in Divi 5

Learn how to use the Canvas Portal module and all its settings. The Canvas Portal displays Divi 5 canvases anywhere in your layout.

Updated today

The Canvas Portal module injects content from a detached canvas into a specific spot on your main canvas or Theme Builder template. Instead of letting Divi auto-append canvas content when an interaction triggers, the Canvas Portal renders that canvas exactly where you place it.

This makes the module essential when position matters: mega menus anchored to a header link, popups placed relative to a CTA, or reusable content blocks dropped into specific layout spots.

Add The Divi Canvas Portal Module

When you load the Visual Builder, Divi automatically adds a Section.

  1. Click the Green Plus icon to insert a Row.

  2. Click the Gray Plus icon inside the Row, which will show the list of all available Divi modules.

  3. Find the Canvas Portal Module and click on it to load it. Alternatively, you can use the Search option to find it.

Divi 5 - Add the Canvas Portal Module

The Canvas Portal Module Use Cases

  1. Mega menu anchored to a header link: Build an off-canvas mega menu on its own canvas, then drop a Canvas Portal inside the text or link module that holds the parent menu item. The mega menu renders relative to the link, so it opens exactly where you need it instead of appearing in a default off-canvas position.

  2. Newsletter popup with precise placement: Design a newsletter popup in a detached canvas and use a Canvas Portal to inject it into a specific section of the page. Combine it with an on-load interaction and a delay, and the pop-up appears in the right spot at the right time while staying out of your way in the builder.

  3. Reusable content blocks across pages: Build global content such as pricing tables, testimonial sliders, or announcement banners inside a global canvas. Drop a Canvas Portal into any page or Theme Builder template to display that canvas wherever you need it. Update the source canvas once, and every Canvas Portal reflects the change.

Canvas Portal Module Settings Breakdown

Once you've added the Canvas Portal Module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:

The Content tab

The Content tab is where you pick the canvas the module displays, along with link and background styling.

Divi 5 - Canvas Portal Module Module's Content tab

  1. Canvas - Select an existing canvas from the dropdown to display inside the module. The canvas content renders in place of the Canvas Portal on the front end.

  2. Link - Make the entire Canvas Portal clickable, creating a seamless way to direct users to another page, section, or external site.

  3. Background - Choose the Canvas Portal's background styles.

  4. Meta - Choose the Canvas Portal's Label text and force its Visibility inside the Visual Builder.

The Design tab

All the design styles and options for the Canvas Portal Module are in this tab.

Divi 5 - Canvas Portal Module Module's Design tab

  1. Sizing - Choose the Canvas Portal's sizing.

  2. Spacing - Choose the Canvas Portal's spacing.

  3. Border - Choose the Canvas Portal's border styles.

  4. Box Shadow - Choose the Canvas Portal's Box Shadow styles.

  5. Filters - Choose the Canvas Portal's filters, such as hue shifts, saturation changes, and blending modes.

  6. Transform - Choose the Canvas Portal's advanced design effects, such as scaling, rotating, skewing, and translating.

  7. Animation - Choose the Canvas Portal's animation styles, adding personality and interactivity while keeping a polished, professional feel.

The Advanced tab

The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.

Divi 5 - Canvas Portal Module Module's Advanced tab

  1. Attributes - Assign a CSS ID, reusable CSS classes, or custom HTML attributes to the element. Use these to apply advanced styling via your child theme's stylesheet or Divi's custom CSS settings.

  2. CSS - Allows you to add custom CSS code to fine-tune your Canvas Portal, enabling advanced styling that perfectly aligns with your vision.

  3. HTML - Choose the semantic HTML tag for the Canvas Portal module.

  4. Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.

  5. Interactions - Create custom interactions, such as showing or hiding the Canvas Portal, and many more.

  6. Visibility - Choose the Canvas Portal's visibility based on different devices.

  7. Transitions - Choose how long the Canvas Portal's animation takes, adding subtle, impactful animations that enhance user experience and make your module stand out.

  8. Position - Choose precise control of the Canvas Portal's placement and create dynamic, visually engaging designs.

  9. Scroll Effects - Control how the Canvas Portal behaves and transforms during scrolling.

What's the next step?

Save your changes and exit the Visual Builder

To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.

You can also:

  1. Click on the Save button.

  2. Click on the Exit button.

Divi 5 - Save and Exit Visual Builder

Related Articles
The Post Title Module in Divi 5
The Sidebar Module in Divi 5
The Toggle Module in Divi 5
Divi 5 Canvases (Off-Canvas Menus, Popups & Canvas Portals)
The Dropdown Module in Divi 5
Did this answer your question?