📖 Popup Trigger Reference

Internal cheat sheet. This block sits outside any popup-* anchor, so it never appears inside a popup. Replace popup-about in the examples with your actual anchor name (e.g. popup-media, popup-contact).

Two universal rules: (1) the URL must end in # + a valid anchor on this page, (2) the element must have class aa-popup-trigger somewhere.

1. Text link trigger

Paste in any Custom HTML block, page content, post, or widget.

<a href="/popup-library/#popup-about" class="aa-popup-trigger">About me</a>

2. Image trigger

Wrap any <img> in an anchor with the trigger class. Replace the src with your image URL.

<a href="/popup-library/#popup-about" class="aa-popup-trigger">
  <img src="https://artbyaarohi.com/wp-content/uploads/your-image.jpg" alt="About">
</a>

Tip: for an Image block in Gutenberg, add it normally, then in the block toolbar click the link icon, paste /popup-library/#popup-about. Then in the right sidebar → Advanced → “Additional CSS class(es)”, enter aa-popup-trigger.

3. Button trigger (Gutenberg Button block)

Use the native Button block:

1. Add a Buttons block, then a Button inside it.
2. Type the label (e.g. “Contact me”).
3. Click the link icon in the button’s toolbar → paste: /popup-library/#popup-contact
4. Select the Button block → right sidebar → Advanced → Additional CSS class(es) → enter: aa-popup-trigger
5. Update the page.

Or as raw HTML (for a custom-styled button without using the Button block):

<a href="/popup-library/#popup-contact" class="aa-popup-trigger"
   style="display:inline-block;background:#AF2167;color:#fff;
          padding:12px 24px;border-radius:6px;text-decoration:none;
          font-weight:600;">Contact me</a>

4. Auto-popup on page load

Add this to a Custom HTML block on any page where you want the popup to fire automatically. The element is hidden — visitors never see it.

<div class="aa-popup-auto"
     data-popup="/popup-library/#popup-newsletter"
     data-delay="3000"
     data-once="session"
     style="display:none;"></div>

Attributes:

• data-popup — which popup to open. Same format as link href.
• data-delay — milliseconds before showing. 3000 = 3 seconds. 5000 = 5 seconds. 0 = instant.
• data-once — controls how often it fires. Options:
  • "session" — once per browser session (recommended for newsletter signups). Resets when the visitor closes their browser.
  • "ever" — once per visitor, ever. Stored in their browser permanently.
  • omit the attribute — fires every page load (annoying; use only for short-term announcements).

Important: only one auto-popup per page. If you add two, only the first one is used.

Adding a new popup section

1. On this page, add a new Group block.
2. Put your content inside (heading, text, images, buttons).
3. Select the Group → right sidebar → Advanced → HTML anchor → enter popup-yourname (lowercase, hyphens, prefix with popup-).
4. Update.
5. Now anywhere on the site, link to /popup-library/#popup-yourname using any of the four trigger methods above.