The Ultimate Guide to Pop-Ups

Welcome to the Hitchhiker’s Ultimate Guide to Pop-Ups!

In this tutorial you will learn how to:

1. Create a pop-up
2. Set a trigger
3. Customize a template
4. Adjust the settings

Use the table of contents on the right to select the topic that interests you or just scroll down to start exploring the pop-ups.

1. Before you start: Installing the plugin

If you haven’t installed Pop-Up CC Ultimate yet, it’s a good moment do to it – follow the Installation Manual to learn how to activate the plugin.

All set? Let’s go!

2. Create or edit a pop-up

To create a new pop-up, navigate to Pop-Up CC Pro > Add New Pop-Up CC Pro.

put1

To edit an existing pop-up, go to Pop-Up CC Pro > Pop-Ups CC Pro, and click the name of the pop-up that you want to edit.

put2

You can also add a new pop-up from here by clicking “Add New Pop-Up CC Pro” on top of the screen.

3. Pop-up dashboard: Overview

Whether you create a new pop-up or edit an existing one, you will see the same screen: four tabs (Templates, Trigger, Settings, Newsletter, Access Control, Advanced), of which the first one (Templates) will be active and the templates thumbnails will be visible.

put3

Let’s start here and select a template first…

4. Templates

Pop-Up CC Ultimate offers four different templates in six color variations each.

Click “Customize” under the template of your choice to start modifying it in Live Preview mode.

Live Preview mode is a powerful tool that allows you to customize almost every aspect of the templates. Open the categories in the left panel to modify various parts of your pop-up. When you’re happy with the template, click “Save & Close” on top of the screen.

5. Triggers

In the second tab you can decide when your pop-up should appear. There are four triggers to choose from:

Time

The pop-up will appear after a defined number of seconds.

put4
Scroll

You have three options here. The pop-up can appear when a user scrolls down a given number of pixels from top, scrolls down to a certain percentage of the page height or to a certain page element (.class or #id).

put5
Click

The pop-up will appear when a user clicks an element with the given .class or #id. This trigger is a bit more difficult to use, because you have to know the class or id of the object (a button, a link…) that should fire the pop-up.

For example, if you want to add a link with a custom class to the content of one of your pages, switch to Text mode ([1]) and add the following “a” element ([2]):

put6

This will create a link with “mycustomclass” class. Of course you can change this to whatever you want. Then go to Trigger tab and put the name of your custom class here:

put7

If your theme uses the default WordPress menus, you can assign classes to the menu items as well. To do so, go to Appearance > Menus (in the left menu) and click “Screen Options” on top of the screen. Make sure that “CSS Classes” checkbox is selected:

put8

Then scroll down, select the menu that you want to edit and click the downward pointing arrow next to the menu item that should trigger the pop-up. Put the name of your custom class in the box:

put9

Save the menu.

If your pop-up trigger uses an id, not a class, put hash (#) before its name instead of the dot (e.g. #mycustomid).

Exit Intent

Nothing to customize here; the pop-up will appear when a user tries to leave the page (ha!).

6. Settings

There is a bunch of customization options in Settings tab. Here is a quick breakdown:

Pop-up Status

Pop-Up Status indicates if the pop-up is active or not.

Always Center the Pop-Up?

The pop-up will always appear centered of the screen, even if a user keeps scrolling. We strongly recommend enabling this option.

Show on Mobile Devices?

The pop-up will be visible on mobile devices.
Note: this doesn’t apply to the pop-ups triggered on Exit Intent – they will not appear on mobile devices.

Show Only on Mobile Devices?

The pop-up will be visible on mobile devices only. Again, this doesn’t apply to Exit Intent trigger.

Enable ‘Don’t show again’?

This option will create a ‘Don’t show again’ checkbox in the footer of your pop-up.
If you want to translate ‘Don’t show again’, go to Customize > Content > Don’t Show Again Message.

Show Once Per…

Decide how often the pop-up should appear.
Note: the cookie file storing the information that the pop-up has been displayed is created when you close the pop-up or click Submit button in the pop-up’s newsletter. So if the cookie has been created and you change ‘Show Once Per’ settings, you will have to delete the cookies in your browser to see the change.

7. Newsletter: Overview

In this section you change your newsletter’s settings and add new fields to it.

Newsletter Status

Switch to Inactive if you don’t want the newsletter at all – it will not be displayed in your pop-up.

Auto Close the Pop-Up?

The pop-up will close automatically after a successful sign-up.

Redirect on Submit?

The users will be redirected to a URL of your choice after the sign-up.

Newsletter Messages

A successful sign-up? Great!
Something went wrong? Bummer.

Customize your newsletter’s success and error messages in this section.

Newsletter Type

In this section you can select how you want to collect the submissions: select e-mail notifications, MailChimp, GetResponse or Campaign Monitor. Each is discussed in detail below.

8. Newsletter: E-mail notifications

Select “Your E-mail” from the dropdown to receive the submission notifications straight to your inbox.

put10

Specify the e-mail address the notifications should be sent to or leave the field blank if you want the admin e-mail to be used.

Adding new fields and customizing the e-mail message

E-mail Notification and E-mail Fields sections are covered in a separate article: Custom Fields
Check it out to learn all about adding new fields to your form and sending them in an e-mail message.

The notifications are not delivered?

1. Check if the e-mail address is correct.
2. Make sure the notifications don’t go to your spam box.
3. Try a different e-mail address (preferably on a different server) to ensure that the notifications are not blocked by your e-mail provider.
4. If the above don’t help, the reason may be wp_mail function being blocked on your server. Contact your server provider and ask for assistance.
How to check if wp_mail function is enabled: go to your WordPress login page, click “Lost your password?” and get the password reset link emailed to you (enter your username or email in the box and hit “Get New Password”). If you don’t receive this email, most probably wp_mail function is blocked.
5. If you have completed the steps above and the notifications still are not delivered, contact us.

9. Newsletter: MailChimp integration

There is a separate article devoted to MailChimp and the pop-ups: Pop-Up Mailchimp Integration – check it out to learn how to connect a pop-up with your MailChimp account.

10. Access Control

There is a separate article devoted to Access Control section: Pop-Up Access Control – check it out to learn how to display your pop-up exactly where you want to.