How to Create a SiteOrigin Popup with Popup Maker

A SiteOrigin popup lets you assemble campaign content with familiar rows, columns, and widgets, then use Popup Maker for delivery. SiteOrigin’s Live Editor helps you review the layout while Popup Maker controls the surrounding frame and campaign rules.

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

What You’ll Need

• A WordPress site where you can install and configure plugins
• Popup Maker installed and activated
• SiteOrigin Page Builder 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

SiteOrigin owns the widget layout inside the popup. Popup Maker owns the overlay, container, close button, size, position, triggers, targeting, cookies, and reporting available on your plan. Build the message in SiteOrigin, then make campaign decisions in Popup Maker.

Review the SiteOrigin 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 SiteOrigin

Go to Popup Maker → Create Popup, add an internal title, and save the draft. Open the SiteOrigin Page Builder interface for the popup. If the Page Builder tab is missing, confirm the popup post type is enabled under SiteOrigin Page Builder settings, then reload the editor.

Step 3: Build the SiteOrigin Popup Content

Add rows and choose only the columns the popup width can support. Place SiteOrigin or WordPress widgets in those columns, then use row and widget settings for spacing and alignment. Open Live Editor to compare the widget list with the rendered layout and correct crowded content before saving.

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

• Prefer one column on narrow popups; two or more columns can become cramped quickly.
• Use Live Editor for layout review, but still test the complete Popup Maker frame on the frontend.
• Keep widget titles, margins, and theme defaults consistent so the popup does not look like a sidebar.
• Verify any form or third-party widget after the popup opens, not only while the editor is visible.

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

Return to Popup Maker and add a trigger. Use Click Open for a deliberate button or link, Auto Open for a timed message, or an optional advanced trigger when the campaign calls for it. Add page or visitor targeting, then create a cookie only when you need to control how often the campaign returns.

• Popup triggers decide what opens the popup.
• Popup targeting decides which pages or visitors are eligible.
• Popup cookies decide when an eligible visitor should stop seeing it.

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

• Page Builder is not available: enable the popup post type in SiteOrigin Page Builder settings and confirm your role can edit it.
• The heading appears below the wrong content: update the page; do not paste raw generated block markup into the SiteOrigin editor.
• Columns stay too narrow: switch the row to a single-column layout for the popup or adjust the collapse behavior and Popup Maker width.

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 SiteOrigin 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.