Pop-up and Newsletter

Dirigible includes a site-wide pop-up for announcements and newsletter sign-ups, plus a newsletter area in the footer. Set up the content, then choose when and where the pop-up appears.

Turn on the pop-up

1. Go to Appearance → Customize → Pop-up → Settings.
2. Turn on Enable.
3. Set Position: Center for a centered window that dims the page, or Corner for a smaller card in the corner.
4. Choose when it appears: Show After a Delay (with Delay in seconds), Show After Scrolling, Show After Inactivity or Show When Leaving. With several on, it appears on whichever happens first.
5. Set Reshow After (Days), how long before a returning visitor sees it again. At 0, visitors see it again only after you change the pop-up.
6. Turn on Stop After Sign-up if visitors who send the pop-up's form shouldn't see it again.

Control reference: Settings.

Write the pop-up content

Open Content:

1. Enter a Headline and subheadline.
2. Add an optional Image and Body text.
3. Back under Settings, choose Headline Style and Subheadline Style to match your type.

Add a sign-up form

There are two options:

Gravity Form in the pop-up

1. Create a newsletter form in Gravity Forms (an email field and a submit button). If the footer already shows a newsletter form, duplicate that form and use the copy: one form can't appear twice on a page, so the pop-up stays off pages that already show its form.
2. Note the form ID.
3. In Content, set Gravity Form ID to that number.
4. Set the form's confirmation to a message or a redirect to a thank-you page. Either works in the pop-up.

Form styling: Styles → Forms and Settings → Gravity Forms.

Link to a sign-up page

Set Link Page and Link Text to send visitors to a full sign-up page. Both must be filled in for the link to show.

Limit where the pop-up shows

In Settings:

• Show On: every page, Selected pages (chosen under Pages; Always Show on Blog adds the blog and posts), or Post types such as Posts or Events.
• Never Show On: pages that never show it, such as a thank-you page.
• Devices: hide it on phones, or show it on phones only.

Open it from a button

Link a button or text to #popup, or give a block the class ds-open-popup (Advanced → Additional CSS class(es)). Clicking it opens the pop-up on any page that shows it. Turn off every Show After setting to open it only this way.

Test in a private browser window so the delay and reshow rules start fresh.

Add a newsletter sign-up to the footer

The footer newsletter area is set up under Settings → Newsletters:

1. Open Newsletters.
2. Set Newsletter to Mailchimp, Gravity Form, or Page.
3. Fill in the fields for that choice: the values from your Mailchimp embed code, a Gravity Form ID, or a sign-up page with button text.

Then show it in the footer:

1. Open Footer & Contact → Appearance and turn on Show Newsletter.
2. Set the Newsletter Headline and Newsletter Description.

See Footer and Contact for footer layout.

Cookie notice

If you also run analytics, you may need a cookie banner. Set it up under GDPR Banner in Scripts & Embeds.

More: Scripts, Privacy, and Performance and Privacy-Conscious Analytics Loading.

Checklist before you publish

Related guides

• Footer and Contact
• Scripts, Privacy, and Performance
• Blog Cards and Single Posts
• Getting Started