How to Create Your First Popup

Ready to create your first popup with WP Popups? In this tutorial, we’ll show you how to quickly get up and running with your first popup.

To get started, make sure to install and activate the WP Popups plugin. Then, here’s how to create your first popup.

1. Create a New Popup and Choose Template

To launch the WP Popups template builder, open your WordPress dashboard and go to WP Popups -> Add New:

On the next screen, make sure to give your popup a name. This name is internal — you can use it so that you remember what each popup does.

Then, you can Select a Template.

To help you quickly get up and running with a great-looking popup, WP Popups includes pre-built template styles that you can customize to match your needs. Or, if you want to design everything from scratch, you can always start from a Blank Popup.

Feel free to choose any template — but we’re going to use a Coupon Popup as our example:

2. Configure Your Popup’s Content

Once you choose a template, WP Popups will launch the visual template builder. You’ll see a live preview of your popup on the right with a settings area on the left.

To configure the content in your popup, you can use the Content tab. Here, you’ll see the familiar classic WordPress editor.

To add text, headings, links, images, etc. all you need to do is click and type. WP Popups also includes helpful shortcodes that let you incorporate a close button or social follow button, which you can see immediately below the editor:

You can also add shortcodes from other plugins in your popup. For example, if you want to add a contact form, you could include the shortcode from WPForms or another WordPress form plugin.

3. Choose Popup Position

Next, you can choose your Popup Position. WP Popups supports 13+ different popup positions, including:

• Centered popups (the default)
• Full-screen popups
• Slide-ins
• Top or bottom notification bars

To choose your popup’s position, go to the Appearance tab and use the Popup Position drop-down.

As soon as you select a new position, the live preview of your popup will immediately update:

4. Configure Your Popup’s Style and Appearance

Once you’ve chosen your popup’s position, you can use the other settings in the Appearance tab to configure its design, size, and animations.

For example, to change the background color of your popup, you can use the Background/Colors section:

5. Configure Where/When Your Popup Displays

Once you’re finished with the content and style of your popup, your next step is to choose who will see your popup.

To set this up, WP Popups gives you access to 30+ different rules in the Display Rules tab.

For example, you can use display rules to only display your popup…

• On specific WordPress content, like a category of posts or even a specific page.
• For certain devices, like people using a mobile phone or tablet.
• To certain users, like only users who are logged-in to your site or with a certain user role.

Here’s how to add a rule:

1. Use the drop-down on the left to select the type of rule to add.
2. Use the middle drop-down to select how to apply the rule. If you choose “is equal to”, the popup will only display when the rule is met. If you choose “not equal to”, the popup will display everywhere except where the rule is met.
3. Use the drop-down on the right to choose what triggers the rule. For example, you could choose a specific category of posts.

If you want to add multiple rules, you have two options:

First, you can use the AND button to add new rules to the same rule group. If rules are in the same rule group, all of the rules must be met at the same time in order for the popup to display.

Second, you can create a new rule group. As long as the rules in at least one rule group are met, the popup will display.

Here’s an example with two rule groups:

This popup will display for two types of users:

• Visitors who are using a smartphone AND did not come from a search engine (rule 1).
• All desktop visitors (rule 2).

If someone is using a smartphone but clicked on a link to your site in Google, the popup will not display because both conditions must be met since they’re in the same rule group. On the other hand, if a desktop visitor clicks on a link in Google, the popup will still display because it’s a separate rule group.

This is the most complex part of creating a popup, but it’s also a big part of what makes WP Popups so flexible.

6. Configure When to Trigger Your Popup

After you’ve set up all your display rules, your next step is to choose when to trigger your popup when one of those rule groups is met.

To access the trigger options, click on the Settings tab and then select Triggers.

WP Popups comes with six different trigger rules:

1. % of page height
2. Class
3. Exit intent
4. Scrolled down pixels
5. Seconds after page load
6. When an element is visible

For example, to trigger your popup 5 seconds after a user lands on the page, you could select Seconds after page load and enter “5” as the number:

You can also combine multiple triggers together if needed.

7. Configure How Often to Display Your Popup

Finally, you can choose how often to display your popup after a user either:

• Converts (performs your desired action)
• Uses the “close” button to close your popup without converting

To configure these settings, you can use the Cookies/Close section in the Settings tab:

To control how long to wait before displaying your popup again, you can use the two cookie duration settings.

For example, if you set the Closing cookie duration equal to “30” “days”, a visitor who closed your popup wouldn’t see the same popup again until a full 30 days had passed:

8. Publish Your Popup

At this point, you’re ready to go live. To publish your popup, click the Publish button in the top-right corner:

Congratulations! You just created your first popup with WP Popups.

Get More Advanced With Your Popups

Now that you’ve gotten a taste of what it’s like to make a popup with WP Popups, you’re ready to kick things up a notch.

For example, you can use WP Popups’ many integrations with email marketing services to create dedicated email opt-in popups. Here’s how to set up an email opt-in popup with Mailchimp.

Or, you could use WP Popups’ add-ons to access new popup templates/uses, like age gates, leaving notices, and more.

Get creative and make something awesome!