Pop-ups have become standard on WordPress websites.
Need proof?
The WordPress directory lists no less than 2,576 pop-up plug-ins.
Yet, smart pop-ups are still far from being a standard.
Remember the last time you landed on a website, just to be displayed a pop-up right away?
In this article, I’ll explain how you can design smart WordPress pop-ups that convert and don’t put off your visitors (yes, it is possible).
In this article, we’ll explain how to:
Without further ado, let’s dive right in!
Pop-ups can help you achieve several different things:
In this article, we’ll focus on the main use case: list-building.
Most webmasters create only one pop-up that they display on all pages of their website, no matter what.
That’s a huge mistake. Chances are your visitors are expecting something different from your website.
Let’s take the example of a WordPress blog dedicated to online marketing. The blog covers various themes: SEO, PPC, web design and entrepreneurship.
Some of the visitors find the blog when searching for a SEO topic on Google.
Others come through a link to an article about PPC techniques that someone shared in a Slack channel, etc.
You get the idea, right?
It’s difficult to design a one-size-fits-all pop-up that will appeal to all these different kinds of visitors.
So the first step is to think about your different segments. Personalization is key!
You can define them in terms of:
Here’s a real-life example on WordPress-powered Skillcrush.com.
When I exit a page in the “Remote work” category, I get this pop-up:
But when I visit an article of the “Tech” category, I get this one:
Defining different segments and displaying pop-ups tailored to them will help you display pop-ups that are most relevant to your audience.
The result?
You’ll end up collecting more emails.
I’ve got to tell you the truth.
Most of your visitors won’t subscribe to your newsletter just because you ask them. You must present them with a strong incentive to join your list.
But don’t worry, there are a few options.
Sometimes it’s enough to explain what kind of newsletters you’ll send and why they’re interesting. Here’s this strategy in action on Nutshell.com.
Usually called a lead magnet, this strategy consists of giving away an exclusive piece of content in exchange for your visitor’s email.
Here is an example from Pickaweb.co.uk, where subscribers can receive an ebook detailing traffic building strategies.
The freebie can be anything from a free ebook, an exclusive training video, a unique email series, a podcast, etc.
Depending on your business, you can also:
This goes without saying: you’ll have to pick a different offer for your different segments.
Now that you’ve identified your segments and the offer that will get them on the hook, it’s time to work on the wording of your pop-up.
Here are a few tips that should help.
Engaging a visitor is easier when you show that your offer is tailored to her.
Here’s an example from Beacon.by. I’m reading an article about lead magnets promotion. The pop-up uses a headline that speaks to me immediately: “Everything You Need to Know About Lead Magnets.”
Do you know anyone who takes more than 3 seconds to read a modal copy?
You’re right, life is too short to read long pop-up copies.
Get straight to the point: focus on what the subscriber will receive and why he should subscribe now. Period.
If you need to include legal terms, make them smaller so that the user can skip them easily.
Here’s a good illustration on Volusion’s blog.
To convince potential subscribers that your newsletter is the best, nothing beats social proof.
We love to see we’re not the only one subscribed to a newsletter. It feels even better when we can think that we read the same kind of email as an influencer.
Here’s an example from Inc42 featuring pictures of high-profile startuppers and influencers.
And here is one from Hotjar, relying on big numbers to capture potential subscribers’ attention:
When preparing the design of your WordPress modal, there are a few elements to keep in mind.
You don’t have to position your pop-up at the exact center of the screen.
Side modals can perform just as well, and are usually less annoying.
Their advantage?
As they’re not directly in your visitor’s way, there’s less chance your visitors will want to close them without even reading what they have to offer.
A side pop-up on Iterable’s blog
Bars can provide a great alternative, too. They’re less intrusive and can be displayed more frequently than lightbox pop-ups or full screen pop-ups.
An email bar on MailUp’s WordPress website
Their main role is to make your pop-up more appealing while helping drive your users’ attention to your signup fields.
Look at this example from Meetedgar.com. The right picture brings life to the pop-up, while the pose of the woman on the picture drives user’s attention to the email input. Brilliant!
The only risk with your call-to-actions is if your visitors miss them.
Make sure to choose colors that help your CTA stand out from the rest of your pop-up.
Mobile pop-up design is specific. Why and how you can design great mobile pop-ups is explained in an earlier article.
What is the best WordPress pop-up plug-in?
There’s not a simple answer to this question. It all depends on what you need. Here are a few elements to take into consideration before making a decision.
If you’re collecting emails, that’s probably because you want to contact these people in the near future. Right?
One of the first things to check when you choose a pop-up plug-in is whether it integrates with your email marketing solution or not.
If not, it means you’ll have to manually export and import your contacts. And trust me, this limits how soon you are able to contact your subscribers.
This could sound obvious, but it’s not.
There is a wide range of tools. From tools where you need to create your design in HTML and manually upload it, to tools that offer WYSIWYG design and advanced targeting.
Before choosing your pop-up maker, try to identify where the plug-in you’re checking stands in that regard.
There are almost as many pricing models as there are pop-up tools.
Beware of plug-ins that claim to be free.
And if you go down the free plug-in road, prefer open-source tools. They’ll limit the chances of introducing a security breach or ads in your website.
It’s now up to you!
If you appreciated this tutorial, share it. Feel free to join the discussion in the comments.