How to Create a Bricks Popup with Popup Maker

A Bricks popup can be designed directly in the Bricks editor while Popup Maker runs the campaign around it. This updated workflow replaces the old template-and-shortcode workaround: create the popup, save it, and open that popup itself in Bricks.

In this tutorial, you’ll create the Bricks 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
• Bricks 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

Bricks also has its own popup templates and interactions. Choose one popup system for a campaign. This guide is for teams that want Bricks to design the content while Popup Maker supplies its established themes, triggers, targeting conditions, cookies, and campaign reporting.

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

Go to Popup Maker → Create Popup, give the campaign an internal name, and save it. From the popup list or editor, choose Edit with Bricks. You are editing the Popup Maker popup directly—not a separate Bricks template that later needs a shortcode.

Step 3: Build the Bricks Popup Content

Add the Bricks sections, containers, text, images, buttons, or form elements the campaign needs. Design for the popup’s real width, not a full page. Keep the content hierarchy short and use Bricks responsive controls to stack or simplify elements before the layout becomes cramped.

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

• Start with the Popup Maker container width, then size the Bricks content to fit inside it.
• Keep the primary action visible without forcing the visitor to scroll through a page-length layout.
• Use Bricks global classes intentionally; a global class change can affect popup content as well as page content.
• Preview on a normal frontend page because Bricks interactions and third-party scripts may behave differently outside the canvas.

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

Configure opening behavior in Popup Maker. For a click-triggered campaign, use Popup Maker’s trigger selector or the popup trigger controls available on the source element. For automatic campaigns, add the appropriate Popup Maker trigger and then use targeting and cookies to control eligibility and frequency. Do not also attach a native Bricks popup interaction to the same action.

• 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

• Edit with Bricks is unavailable: confirm Bricks is active and that your account can edit the popup.
• Two popups or overlays appear: remove the native Bricks popup interaction or template from that campaign and let Popup Maker own delivery.
• The layout looks like a full page: remove page-level minimum heights and design against the actual Popup Maker width and padding.

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