How to create a Popup

What is the Popup?

The Popup tool lets you create modal windows that appear on your site at the right moment — based on time, scroll depth, exit intent, or immediately on page load. It’s built into Zelligram for non-profit organizations and designed to help you capture leads, promote campaigns, share announcements, or collect form submissions without sending visitors to a different page.

Each popup is created like a regular WordPress page — you design its content using the block editor, and all its settings (when it appears, how it behaves, and where it shows) live in the sidebar panel.

How to Create a Popup

Step 1 — Go to Popups in the admin menu

In your WordPress admin sidebar, look for Popups. Click Add New to create a new popup.

Step 2 — Design your popup content

The editing area works exactly like a page or post. Add blocks — paragraphs, headings, images, buttons, Gravity Forms, or any other content you need. This is what visitors will see inside the modal when it opens.

Keep the content focused and concise. A popup has limited space and visitors will close it quickly if it feels overwhelming.

Step 3 — Configure the settings in the sidebar

With the popup open in the editor, look at the right-hand Settings panel. You’ll find four panels: Trigger, Behavior, Design, and Location. Configure each one (see the sections below).

Step 4 — Publish

When you’re ready, click Publish. The popup will immediately go live on any pages that match your Location rules.

To temporarily hide a popup without deleting it, switch it back to Draft.

Trigger — When Does the Popup Appear?

Found in the Trigger panel in the sidebar. Choose one of four trigger types:

  • Immediate — The popup opens as soon as the page finishes loading. Use this sparingly — it can feel abrupt before the visitor has had a chance to read anything.
  • Delay — The popup waits a set number of seconds before appearing (0–30 seconds, adjustable in 0.5-second steps). This is the default and most commonly used option. A 5–8 second delay gives visitors time to start reading before the popup appears.
  • Scroll — The popup appears when the visitor has scrolled down a certain percentage of the page (0–100%). Use this to show a popup only to visitors who are engaged enough to have read partway through your content. A value of 50% is a good starting point.
  • Exit Intent — The popup appears when the visitor moves their cursor toward the top of the browser window (a signal they’re about to leave). This is a last-chance message before they go — ideal for newsletter sign-ups or donation asks.

Behavior — How Does the Popup Act?

Found in the Behavior panel. These settings control how visitors interact with the popup and how often it reappears.

  • Close when clicking outside — When on (default), clicking anywhere on the dark overlay behind the popup will close it. Turn this off if you want visitors to explicitly use the close button.
  • Disable page scroll when open — When on (default), the page behind the popup won’t scroll while the popup is visible. This keeps the experience focused.
  • Set cookie on close — When on (default), a cookie is saved in the visitor’s browser after they close the popup. This prevents the popup from appearing again for the number of days you set in Cookie Duration (default: 7 days, up to 365). Set the duration to 0 to show the popup every single session.
    • Set Cookie When: Choose Close (cookie saves when they dismiss it) or Seen (cookie saves the moment the popup appears, even before closing).
  • Set cookie on form submit — When on, the popup will permanently stop showing to a visitor after they submit a Gravity Form inside the popup. After submission, the popup automatically closes after a short delay (default: 4 seconds, adjustable 0–15).

Design — How Does the Popup Look?

Found in the Design panel. Changes here are previewed live in the editor.

  • Position — A 9-point grid lets you choose where the popup appears on the screen: any combination of top/center/bottom and left/center/right. Center-center is the default.
  • Max Width (px) — The maximum width of the popup container (200–1200px). Default is 600px. On small screens, the popup will always shrink to fit the viewport regardless of this setting.
  • Overlay Opacity — How dark the background overlay behind the popup is (0 = transparent, 1 = fully black). Default is 0.7.
  • Close Button — Choose where the close (×) button appears:
    • Do not show — No close button. Use only when you’re sure visitors can close via the overlay click or a custom close link inside the content.
    • Show Inside — The button appears in the top-right corner inside the popup container (default).
    • Show Outside — The button appears in the top-right corner of the screen, outside the popup — useful for large or full-width popups.

Location — Where Does the Popup Appear?

Found in the Location panel. This controls which pages of your site display the popup.

Include rules

Select one or more conditions — the popup will show on any page that matches at least one of the selected rules:

  • All — Show on every page of the site.
  • Homepage — Show only on the front page.
  • CPT (Single) — Show on individual posts, pages, or any other content type. Expand this option to select specific content types (e.g., Posts, Pages, Events).
  • Specific Page/Post IDs — Show only on pages with certain IDs. Enter the IDs separated by commas (e.g., 9,12,45). You can find a page’s ID in the URL when editing it in the admin.
  • URL Prefixes — Show on any URL that starts with a given prefix. Enter one prefix per line (e.g., /blog/ to show on all blog posts).

Exclude rules

Exclusions always take priority over include rules. Use these to carve out exceptions:

  • Exclude IDs — Enter page/post IDs separated by commas to suppress the popup on those specific pages.
  • Exclude URL Prefixes — Enter URL prefixes (one per line) to suppress the popup on entire sections of the site.

Adding a “Close” Link Inside Your Popup

You can turn any text inside the popup into a close link — useful for buttons like “No thanks” or “Maybe later”.

  1. Select the text you want to use as the close link.
  2. In the block toolbar, click the Close popup button (the × icon in the text formatting options).
  3. The selected text will now close the popup when clicked on the frontend.

Restricting a Popup to Logged-In Users

If you want a popup to appear only to visitors who are logged into the site, set the post Visibility to Private instead of Public. Private popups are skipped entirely for visitors who are not logged in.

Tips & Best Practices

  • One popup per page is enough. Avoid stacking multiple popups on the same page. It creates a poor experience for visitors and reduces the effectiveness of each individual message.
  • Use Delay or Scroll triggers instead of Immediate. Give visitors at least a few seconds to engage with your content before the popup appears. A 5–8 second delay or 40–50% scroll depth is a good starting point.
  • Exit Intent is great for donation or newsletter asks. Catching visitors before they leave with a single compelling message (“Before you go — will you help us reach our goal?”) is one of the most effective uses of a popup for non-profits.
  • Set a reasonable cookie duration. A 7–14 day cookie is generally a good balance — it doesn’t annoy repeat visitors, but still reaches people who come back occasionally.
  • Use “Set cookie on form submit” for lead capture. If your popup contains a form, enable this setting. Once someone submits the form, they’ll never see the popup again — no need to re-engage someone who has already converted.
  • Keep popup content short and action-focused. The best popups have one clear message and one call to action — a headline, 1–2 lines of supporting text, and a button or form. Anything more will feel overwhelming.
  • Use Location rules to be targeted. A popup promoting your annual gala is more relevant on your Events page than on a volunteer information page. Targeted popups feel helpful rather than intrusive.

Share this post