How to create a WordPress popup without a popup plugin

You want to announce a sale, grow an email list, or give leaving visitors one last reason to stick around. A popup is the obvious tool for the job. Installing an entire popup plugin for one little overlay, though, can feel like hiring a moving company to carry a single suitcase.

If the site already runs on the WordPress block editor (also called Gutenberg), there’s a lighter path. The free Otter Blocks plugin includes a Popup block that lives right inside the editor, so the popup becomes just another block on the page instead of a whole new system to learn, update, and troubleshoot.

Quick disclosure: Otter Blocks is built by Themeisle, the same team behind this blog. The main walkthrough below uses only the free version, and every Pro-only option gets marked as such.

This guide covers installing Otter, building a timed popup step by step, the scroll and exit-intent triggers, frequency caps, mobile behavior, and the UX rules that separate helpful popups from hated ones. It also includes an honest limits section, because sometimes a dedicated popup tool genuinely is the better call.

Let’s build it. 👇

⚖️ DISCLAIMER: Otter Blocks is a member of the Themeisle family of products. This tutorial uses the free version from WordPress.org, and Pro features are labeled (Pro) wherever they appear.

Step 1: Install the free Otter Blocks plugin

Otter Blocks adds more than 20 blocks to the editor, and the Popup block is one of the free ones. The plugin runs on over 300,000 sites and holds a 4.7 out of 5 rating on WordPress.org, so this is well-trodden ground.

  1. In the WordPress dashboard, go to Plugins → Add New.
  2. Search for Otter Blocks.
  3. Click Install Now, then Activate.

That’s the whole install. A new Otter section appears in the block inserter, and the Popup block comes with it.

Step 2: Add the Popup block and pick a layout

Open the post or page where the popup should appear. (On a block theme, the Site Editor can also hold the block, which is handy for popups that should follow a template.) Click the + inserter, search for Popup, and add the block.

Otter then asks which layout to start with. There are three options:

  • Start from scratch: an empty popup canvas for full control.
  • Text and Image: a prebuilt layout with a placeholder headline, copy, and image. Good for promoting a download or a course.
  • Popup with Form: a signup layout with a form that automatically matches the theme’s colors and fonts. Ideal for newsletter popups. 📬

For this walkthrough, pick Popup with Form. Everything that follows works the same way for the other two.

Step 3: Design the popup content

Click Edit Popup on the block and the popup opens as its own little canvas. Anything that works in the block editor works inside it: headings, paragraphs, buttons, images, icons, even a countdown block for a flash sale.

For a newsletter popup, edit the headline to state the actual benefit (“Get one practical WordPress tip each week”), trim the body copy to a sentence or two, and make the button say what happens next. Subscribe beats Submit every time.

Then select the Popup block itself (not anything inside it) and open the Style tab in the sidebar. This is where the popup gets its dimensions, with width set separately for desktop, tablet, and mobile, plus height and padding. Colors for the background, overlay, border, and close button live here too, along with overlay opacity, border radius and shadow, and the close button’s position inside or outside the popup. 🎨

One quirk worth knowing: entrance animations apply to the blocks inside the popup rather than the popup itself, so add motion to the inner content if the design needs some flair.

💡 PRO TIP: One popup, one message, one button. If the popup content needs its own scrollbar, the copy is too long. Cut it in half and conversions usually go up, not down.

Step 4: Choose the trigger

This is the setting that decides whether visitors find the popup charming or infuriating. Select the Popup block, open the Settings tab, and find Open Trigger. There are four options:

TriggerTierHow it firesBest use
On LoadFreeWhen the page loads, with an optional Trigger Delay in secondsSite announcements, timed offers
On ScrollProAfter the visitor scrolls a chosen percentage of the pageCatching engaged readers
On ExitProWhen the visitor moves to leave the page (exit intent)Last-chance discounts, cart reminders
On Anchor ClickProWhen the visitor clicks a link or button with a matching anchorClick-to-open content like downloads or size charts

For a classic timed popup, choose On Load and set a Trigger Delay of 10 to 15 seconds. That gives visitors a moment to actually see the page before anything covers it. Zero-delay on-load popups are the web’s equivalent of a store greeter who blocks the door.

The anchor trigger deserves a special mention because it’s the most polite option of all: the popup only opens when the visitor asks for it. Set the anchor under Frequency & Close Settings (for example, download), then point any button’s link at #download. Clicking the button opens the popup.

The scroll, exit, and anchor triggers come with Otter Pro, which starts at $69 per year for a single site at introductory pricing (renewals run at the full list price). The free On Load trigger with a sensible delay covers most simple needs, so upgrade only when the fancier triggers would actually earn their keep.

The Otter Popup block Open Trigger setting in the Settings tab, with the On Load trigger selected and its delay field (labeled Wait Time in this version)

Step 5: Set frequency, position, and close rules

Still in the Settings tab, open Frequency & Close Settings. The essentials:

  • Enable the close button, so nobody feels trapped.
  • Close when clicking outside the popup: turn this on. It’s the escape hatch visitors expect.
  • Dismiss for recurring visitors (Pro): after someone closes the popup, hide it from them for a set number of days. Seven days is a reasonable starting point.
  • Close on anchor click (Pro): closes the popup when a specific anchor is clicked, useful for a custom dismiss link.

Next, the Popup Position accordion controls where the popup lands on the screen, with separate adjustments per device. Center screen works for offers; a bottom corner is quieter for announcements.

There’s also a Disable Page Scrolling toggle. When it’s on, the page behind the popup stops scrolling until the popup closes. Save that for genuinely must-read messages (think maintenance notices), because it raises the annoyance stakes for everything else.

The Otter Popup block Frequency and Close Settings panel, with options for the close button, closing on outside click, and dismissing the popup for returning visitors

Hit Update, then open the page in an incognito window and watch the popup fire. Testing in incognito matters once a dismissal rule is active, since the popup remembers returning visitors.

Mobile behavior: the polite default is off 📱

Every Otter popup comes with a simple choice: show it on mobile devices or not. For timed and exit popups, the default instinct should be not.

On a phone, even a modest popup covers most of the screen, and the close button shrinks into a fingertip-unfriendly target. Exit intent has a technical problem there too: it works by tracking cursor movement, and phones have no cursor to track.

There’s an SEO angle as well. Google has said for years that intrusive interstitials (its term for popups that cover the main content) can hurt a page’s mobile search performance, with small exceptions for things like cookie notices. A full-screen newsletter popup on a phone is exactly what that policy targets.

The practical setup: disable the mobile display for timed popups, and if mobile visitors genuinely need the offer, use an anchor-click popup behind a normal button instead. A button waits politely until someone taps it.

Popups have a bad reputation, and to be fair, popups earned it. The difference between a popup that converts and one that gets the tab closed comes down mostly to timing and restraint:

  • Polite triggers wait for a signal. Exit intent and scroll depth let the visitor act first. Timed on-load popups sit in the middle. Instant on-load popups sit in the penalty box.
  • One popup per page. Stacking an exit popup on top of a timed popup is not a strategy; it’s an ambush.
  • Cap the frequency. Someone who closed the popup today shouldn’t see it again tomorrow.
  • Keep it relevant. A popup about the topic of the current page reads as helpful. A generic one reads as an ad.
  • Make closing easy and obvious. Hunting for a tiny X is nobody’s hobby.

Follow those five and the popup stops being the thing visitors tolerate and starts being the thing some of them actually use.

Honest limits: when a dedicated popup plugin wins

Otter’s Popup block handles creation and display well, but it stops there. There’s no built-in analytics dashboard counting views and conversions, and no native A/B testing to compare two versions of a popup against each other.

That’s where dedicated popup tools pull ahead. Popup Maker, for example, adds analytics that track views, clicks, and conversions in its paid tiers, plus deeper targeting like referrer source, geolocation, and scheduling. For sites running serious, always-on campaigns, that measurement layer is the whole game.

The mapping is simple. For a sale announcement, a content upgrade, or a straightforward signup popup, Otter is enough, and it’s one less plugin to maintain. For ongoing campaigns where every impression and every variant gets measured, a dedicated popup plugin earns its install. ⚖️

Wrapping up 🏁

The whole build, condensed:

  • Install the free Otter Blocks plugin.
  • Add the Popup block and pick a layout (Popup with Form covers most newsletter needs).
  • Write one clear message with one call to action.
  • Set the trigger: On Load with a 10 to 15 second delay on free, or the scroll, exit, and anchor triggers on Pro.
  • Configure frequency and close rules, then make a deliberate decision about mobile.
  • Test in an incognito window before calling it done.

Newer to the block editor? The Themeisle block editor tutorial covers the basics this guide skimmed past, and the popup notification guide covers the benefits and best practices of popups for lead capture.

Have a favorite popup trigger, or a popup pet peeve worth venting about? Drop it in the comments below! 💬

Yay! 🎉 You made it to the end of the article!

0 Comments
Newest
Oldest Most Voted