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: 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:
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 & 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:
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:
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:
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
Try the QuickPop Free version*
*Note: you can also search “QuickPop” in your plugins section of wp-admin to find the free version
A Team You Can Trust
