A Divi popup combines Divi’s visual design workflow with Popup Maker’s campaign controls. Build the content in Divi 5 or the established Divi 4 builder, then use Popup Maker to control the frame, opening trigger, audience, and repeat behavior.

In this tutorial, you’ll create the Divi popup, design its content, configure the campaign, and test the complete visitor experience. You can start with Popup Maker’s free plugin.

A Popup Layout Being Designed In The Divi Builder And Delivered By Popup Maker.

What You’ll Need

  • A WordPress site where you can install and configure plugins
  • Popup Maker installed and activated
  • Divi installed, active, and available to your WordPress role
  • A clear goal, such as collecting a lead, promoting an offer, or announcing an update

Decide Which Tool Controls What

Divi designs what visitors see inside the popup. Popup Maker controls the overlay, container, close button, position, trigger, targeting conditions, cookies, and available analytics. This avoids treating a campaign like a full-page layout and keeps delivery settings in one place.

Review the Divi popup integration details if you want a concise compatibility overview before starting.

Step 1: Create and Save the Popup

In the WordPress dashboard, go to Popup Maker → Create Popup. Enter a descriptive internal name that explains the campaign, such as “Homepage newsletter offer.” Save the popup before opening the visual builder so WordPress has a stable document for the builder to edit.

Leave the campaign unpublished while you build. A saved draft gives you room to finish the layout, presentation, trigger, targeting, and cookie settings before visitors can encounter it.

Step 2: Open the Popup in Divi

Create a popup under Popup Maker → Create Popup, enter an internal title, and save it. Choose the Divi builder action for that popup. In Divi 5, work in the current Visual Builder. Divi 4 sites can use the classic-compatible builder path exposed for the popup; no separate library-layout shortcode is required for the current integration.

Step 3: Build the Divi Popup Content

Build a concise layout with Divi sections, rows, columns, and modules. Keep full-width page sections and large viewport heights out of compact campaigns. Use Divi’s responsive editor to review typography, spacing, column stacking, and any device-specific overrides before returning to Popup Maker.

A Simple Popup Content Formula

  • Headline: state the offer or outcome in one clear sentence.
  • Supporting copy: explain the value or next step without turning the popup into a full page.
  • Primary action: use one obvious button or form submission.
  • Trust detail: add only the reassurance needed to complete the action.

Responsive Design Tips

  • Use the Divi builder version already active on the site; do not rebuild solely to switch editor generations.
  • Avoid page-sized section heights and oversized background media inside a constrained popup.
  • Review responsive overrides, not just the desktop canvas, because inherited values can hide narrow-screen problems.
  • Test forms, sliders, and other scripted modules after the popup opens on the frontend.

Step 4: Configure the Popup Maker Frame

Save the builder design and return to the Popup Maker editor. Choose a popup theme, then set the container size and position around the content you built. The theme controls the overlay, frame, close button, and default spacing; the builder controls the content inside that frame.

Preview the combination before adjusting lots of CSS. If the design feels crowded, simplify the content or increase the Popup Maker width. If it feels disconnected from the site, align the popup theme with the builder typography, colors, border radius, and spacing.

Step 5: Add a Trigger, Targeting, and Cookies

Add the opening behavior in Popup Maker. A Click Open trigger can connect the campaign to a button or link, while Auto Open and optional advanced triggers handle automatic display. Add targeting conditions for the intended pages or visitors, then add a cookie only when the campaign should stop or pause after a defined action.

Treat those as separate decisions. A trigger does not replace targeting, and a targeting rule does not open the popup by itself. Add only the cookie behavior that matches the campaign goal; otherwise you can accidentally suppress a campaign before a visitor completes the intended action.

Step 6: Test the Complete Campaign

Preview the popup from a normal frontend page, then test again in a private or logged-out browser window. That catches permission, caching, targeting, and cookie behavior that an administrator session can hide.

  • Open the popup with every configured trigger.
  • Confirm the overlay and close controls work with mouse, touch, and keyboard.
  • Submit the form or follow the primary button and verify the intended result.
  • Check desktop and narrow mobile widths without horizontal scrolling.
  • Confirm excluded pages and visitors do not receive the campaign.
  • Repeat the test after the configured cookie is created.

Troubleshooting

  • The Divi builder action is missing: confirm Divi or Divi Builder is active and save the popup draft before opening the visual editor.
  • The popup is too tall on mobile: remove viewport-based minimum heights, shorten the content, and reduce responsive padding.
  • A module works in the canvas but not after opening: test for a plugin or module-specific script conflict and simplify the module while isolating the cause.

When isolating a problem, first save both editors, test while logged out, and temporarily simplify the popup to one text element and one button. Add complex elements back one at a time until the conflicting setting or script is clear.

Create Your First Divi Popup

Start with one focused campaign, build the content in your preferred editor, and let Popup Maker handle its delivery. Get Popup Maker free or review the official builder documentation for deeper help with the editor itself.