How to Create an Etch Popup with Popup Maker

An Etch popup lets you build semantic, block-backed content in Etch while Popup Maker manages the campaign around it. The workflow is direct: save a Popup Maker popup, open that popup in Etch, build the content, and return to Popup Maker for delivery settings.

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

Etch controls the elements, structure, selectors, and styles inside the popup. Popup Maker controls the overlay, container, close button, dimensions, triggers, targeting, cookies, and available analytics. The current editor entry is intentionally restricted to administrators.

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

Sign in as a WordPress administrator, go to Popup Maker → All Popups, create or open the campaign, and save it. Choose Edit with Etch for that popup. If the action is unavailable, confirm the Etch plugin and theme are active and that the popup has been saved.

Step 3: Build the Etch Popup Content

Build a short semantic structure, add reusable selectors, and style the component for the popup’s actual content width. Etch uses a fluid canvas rather than fixed device presets: drag through the width range, note where the design becomes uncomfortable, and add content-driven media or container queries where they are needed.

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 semantic structure and selectors before refining visual details.
• Drag the Etch canvas through the popup’s full width range instead of checking only a few device snapshots.
• Use container queries when the component should respond to available space inside the popup.
• Keep campaign triggers and frequency rules in Popup Maker rather than embedding delivery logic in the content.

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

Save the Etch work, then return to Popup Maker to configure the campaign. Choose the opening trigger, add targeting conditions, and define cookie behavior. Preview from a normal frontend page so the Etch-authored content is tested inside the selected Popup Maker theme and real campaign context.

• 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 Etch is missing: use an administrator account and confirm Etch is active before reopening the popup list.
• The layout breaks between familiar device sizes: resize the fluid canvas slowly and add a query at the content-driven failure point.
• The frontend differs from the builder: save Etch, clear only the affected page cache if necessary, and test the actual popup while logged out.

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