Tutorial: How to Add Popups to WordPress

by Oct 11, 2020WordPress Tutorials

Introduction

As owner of a small design company (Shoutout to PTV) I’ve developed websites for just over a decade, and I can’t really believe how tough it’s been to install something as seemingly simple as a popup for WordPress websites. There are of course an endless amount of plugins out there, but every one of them seems to be missing that one Key Feature™ that I need, or possess one too many quirks that leave the style looking like it’s been punched in the face. Plus, it just gets really old searching for these plugins, which I’m sure you’re feeling since you’re reading this specific tutorial. To that effect, I want to dig right in and help you build the perfect popup (or multiple popups) with this handy dandy tutorial. I’ve found this to be the simplest, fastest way to implement the exact popup you need, complete with ultra-modern design and truly thorough options in the plugin’s admin. Let’s dig right in!

QuickPop is flexible and responsive

QuickPop: build fully responsive popups for WordPress

Step 1: Grab the Free Popup Plugin for WordPress, or go Pro.

Naturally we will be using QuickPop to add our popup to WordPress, and it has a very robust free popup plugin version. With this free popup plugin, you will only be able to add a single popup to your site, but it includes functionality to build an email opt-in popup, which is perfect for collecting emails, or building a free giveaway popup. You can also opt for the extremely feature-rich “Pro” version with of course many more features. And hey, it’s only $9 and well-reviewed, so I’d say go for it, though I’m clearly biased. This is the version we’ll be using, but you can easily follow along with the free plugin, or utilize the pro version’s 7 day free trial. Here are a few key benefits of QuickPop Pro:

  • Unlimited Popups: Perhaps the main selling point of QuickPopPro is that it allows you to build as many popups as you’d ever need, each with their own specific styles and functionality. This may seem obvious, but since you can build full page overlays, or place smaller popups anywhere you need (for example, a contact form in the lower right hand of your site), it really opens the door to a ton of options, all geared around engaging your visitors.
  • More animations: Granular control over popup behavior, including more animations for when the popup appears (fade in, slide up, etc.)
  • Popups for Hubspot: Same goes for Hubspot! Using Hubspot form embeds, all submissions will be handily tracked via your HubSpot form settings. We’re talking a bout a simple copy, paste, and you’re done. Nice.
  • Popup Builder Tools: Truly granular (yet intuitive) control over every aspect of your popups. If you can think of it, you can build it, and this means creating fullscreen overlays, adding images to your popups, and changing every design element to match your brand. You can even add gradients to the background overlay, which I think was an especially nice touch.
  • Extensive Popup Actions: Another really fun feature is how many options are available with QuickPop Pro as far as animation, placement, and other behaviors. This includes on exit popups, popups appearing when scrolling down a page, popups on link click, and of course time-delayed popups.

There’s a lot more, but we’ll leave it to you to check out the full feature list. Assuming you’ve grabbed either the pro or free version of QuickPop, let’s start building!

Step 2: Access The Popup Builder

We’re going to skip the process of installing and activating your plugin and assume you’ve already done so. In that regard, let’s navigate to your QuickPop plugin area, found under “My Brindle” tab in WordPress admin. On click, this will take you to the popup library screen, as shown below:

QuickPop Popup Library

With the QuickPop Pro, you’re able to build as many popups as you like.

Though we’ve created a few in the screen shown above, you’ll find a default popup has already been added. Click on that popup in the library and you’ll be taken to the main popup builder specific to that popup.

Step 3: Enter the Content of Popup

The first tab you’ll see is titled “Content” and this is where you’ll enter text, images, and other details that are visible in the popup itself.

Add text, videos, images to your popup

Add text, videos, images & forms to your popup

This is the page where you’ll edit the buttons, form content, text, headlines, and more. You can even add videos or images to your popup for the ultimate customization. Below you’ll find an overview of other settings found on this tab, but for a more in depth overview on each feature, be sure to consult QuickPop’s Documentation.

Step 4: Edit Design of Popup As Needed

This might be the best feature of QuickPop, an admin that is actually easy to use and without the quirks of similar plugins. With QuickPop, you can design a popup and style it exactly as you like in a matter of minutes. To do so, navigate to the “Design” tab of the admin area, as shown here:

The easiest way to design a custom popup for WordPress

Use the Design tab to customize your popup’s design to match your brand

The sections are clearly labeled so designing your popup is very straight forward. For a more detailed explanation of QuickPop’s admin, check out the QuickPop documentation). Highlights include the ability to use any gradients for the popup itself and the background overlay, which is definitely a welcome, unique option. For our example, we were able to craft the following design using a combination of a fun image, an email opt-in form, and fancy use of gradients:

Build the perfect popup for WordPress

An example of a WordPress popup by QuickPop.

Your popup can be a more standard design with a white background, and dark overlay, or something even more elaborate than the one above. It’s all up to you! Be sure to check out the QuickPop Popup Builder product page for a full list of features and more examples. Once the design is in place to your liking, click the “Update” button in the right sidebar, and you’re almost done.

Step 5: Adjust Popup Settings

Each popup in your library can focus on a different goal, whether it’s in collecting emails, promoting products, or any number of other solutions. You van access these behaviors by clicking the Settings tab, and we’ve included an overview of what you’ll find below:

QuickPop Settings

Change the behavior of your popup to customize it to any needs.

Status:Set whether the popup is published or in draft mode. You’ll want to come back to this setting once all other settings and popup design is in place.

Visibility: See step 6 🙂

Events: For QuickPop Pro, set whether the popup is going to appear on a time delay, on click, or if you want the popup to appear on page exit.

Animation: QuickPop Pro allows you to select form multiple animation methods, whereas the free version defaults to the “Fade-in” effect.

Step 6: Specify Pages Where Popups Appears

With QuickPop’s free version, you can either choose to add the popup solely to your home page, or to set it to appear on all pages. However with QuickPop Pro, you can select the exact page where each popup will appear. To do so, navigate to the “Settings” tab of QuickPop’s admin area. Once there, you’ll see a section titled “Visibility” and by default it will be set to display the popup on all pages. In the dropdown, select “Choose Pages”. You’ll then see an interface allowing you to select which pages that the popup is to appear, as shown below:

As you’ve probably figured out, click the “+” next to a page from the left category to add it to the right, and the popup will then display only on those selected pages. Once complete, click “Update” in the right sidebar, and you’re good to go!

Step 7: High Fives, Your’e Done!

Ok, so there is no step 7 because you’re done! Your fully customized popup is now live and doing some seriously heavy lifting when it comes to your business. Looking for more in depth tutorials? Check out the following:

How to Add an Exit Popup to WordPress

QuickPop Pro Documentation

Purchase QuickPop PRO Here

Try the QuickPop Free version*

*Note: you can also search “QuickPop” in your plugins section of wp-admin to find the free version

Hero Images Get Attention

Sign up to our Newsletter to get the book, which is filled with real strategies on building a successful WordPress focused software business and so on and etc.

Submission received, thank you!

Close Window

Need Your Round On? Rock On.

Get creative with unique popup designs!

Submission received, rock on!

Close Window
Full Articles and Informational Overlays

Create informative overlays with article-style content, just like this one. From agreements, to tutorials, QuickPop offers you all the flexibility needed to keep your visitors informed.

A Team You Can Trust

Mauris vel ex et nisi elementum vestibulum sed et eros. Etiam viverra tristique erat, ac gravida nisi posuere vel. Aliquam cursus quam ac ipsum molestie bibendum. Nullam feugiat pellentesque est. Sed sit amet eros urna. In eget turpis felis. Mauris nec justo posuere, congue nibh nec, dapibus massa. Duis ultrices ac augue vel vehicula. Donec facilisis tempor mi, pulvinar posuere diam pulvinar vitae. Nullam volutpat elit dui, ac varius nunc mollis sed. Pellentesque elementum vitae magna vel interdum. Duis suscipit ultricies nulla, in elementum justo mollis sit amet. Etiam vitae mollis ipsum, sit amet fringilla risus. Sed ut tortor facilisis lacus malesuada. 

We’re Here to Help

Mauris vel ex et nisi elementum vestibulum sed et eros. Etiam viverra tristique erat, ac gravida nisi posuere vel. Aliquam cursus quam ac ipsum molestie bibendum. Nullam feugiat pellentesque est.

Submission received, thank you!

Close Window

Submission received, thank you!

Close Window

Spring Into Savings!

Save 15% with Exclusive Promo:

RUN45

Submission received, thank you!

Close Window

An Unlimited Library of Popups is Waiting

This is but a single example of the many popups you’ll be able to build using QuickPop! Check out the many ways QuickPop’s library of popups and overlays is ready to grow your customer base:

Submission received, thank you!

Close Window

Join Our Community

Subscribe now for updates and exclusive offers and discounts!

Submission received, thank you!

Close Window
Our time: 8:06pm EDT