Skip to content

The Canvas Portal Module in Divi 5

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.

Overview

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.

Adding the 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.

Adding the Canvas Portal Module Click the gray plus icon to insert 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.

Settings & Options

Once you've added the Canvas Portal Module, the module settings automatically pop up. These settings are organized into three tabs: Content, Design, and Advanced.

Content Tab

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

Canvas Portal Module Content tab The Content tab showing canvas selection and link options.

Setting Type Description
Canvas select 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.
Link group Make the entire Canvas Portal clickable, creating a seamless way to direct users to another page, section, or external site.
Background group Choose the Canvas Portal's background styles.
Meta group Set the Canvas Portal's Label text and force its Visibility inside the Visual Builder.

Design Tab

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

Canvas Portal Module Design tab The Design tab with sizing and styling options.

Setting Type Description
Sizing group Choose the Canvas Portal's sizing (width, height, alignment).
Spacing group Choose the Canvas Portal's spacing (margin, padding).
Border group Choose the Canvas Portal's border styles.
Box Shadow group Choose the Canvas Portal's Box Shadow styles.
Filters group Choose the Canvas Portal's filters, such as hue shifts, saturation changes, and blending modes.
Transform group Choose the Canvas Portal's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation group Choose the Canvas Portal's animation styles, adding personality and interactivity while keeping a polished, professional feel.

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.

Canvas Portal Module Advanced tab The Advanced tab with CSS and conditional logic options.

Setting Type Description
Attributes group 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.
CSS text Add custom CSS code to fine-tune your Canvas Portal, enabling advanced styling that perfectly aligns with your vision.
HTML select Choose the semantic HTML tag for the Canvas Portal module.
Conditions group Create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Interactions group Create custom interactions, such as showing or hiding the Canvas Portal, and many more.
Visibility group Choose the Canvas Portal's visibility based on different devices.
Transitions group Choose how long the Canvas Portal's animation takes, adding subtle, impactful animations that enhance user experience and make your module stand out.
Position group Choose precise control of the Canvas Portal's placement and create dynamic, visually engaging designs.
Scroll Effects group Control how the Canvas Portal behaves and transforms during scrolling.

Code Examples

/* TODO: Add CSS targeting .et_pb_canvas_portal for portal-specific styling */

// TODO: Add PHP hooks for canvas portal output filtering

Common Patterns

Version Notes

Divi 5 Only

This page documents Divi 5 behavior exclusively.

Troubleshooting