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:

  1. Set your objectives
  2. Define your segments
  3. Find the right wording
  4. Create your design
  5. Find the right pop-up plug-in

Without further ado, let’s dive right in!

Step 1: Set Your Objectives

Pop-ups can help you achieve several different things:

  • Grow your email list. On average, our customers triple the number of emails they collect when they implement email pop-ups.
  • Collect feedback. On average, our customers notice a 5.1% feedback rate.
  • Push a product or a service. You can expect a click-through-rate between 2% and 6% for this kind of pop-ups.

In this article, we’ll focus on the main use case: list-building.

Step 2: Define Your Segments

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:

  • Page visited
  • Category of page visited? (WordPress categories or WordPress tags)
  • Devices?
  • Traffic source?

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:

Skillcrush Remote

But when I visit an article of the “Tech” category, I get this one:

pasted image 0 1

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.

Step 3: Identify Your Offer

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.

Promise Awesome Content

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.

nutshell.com blog b2b cold email templates 2

Offer Exclusive Content

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.

Pickaweb.co .uk blog

The freebie can be anything from a free ebook, an exclusive training video, a unique email series, a podcast, etc.

Other Options

Depending on your business, you can also:

  • Offer a chance to win something
  • Offer an exclusive deal/discount
  • Offer a surprise (that could sound weird, but it works!)

This goes without saying: you’ll have to pick a different offer for your different segments.

Step 4: Find the Right Words

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.

Leverage What You Know about Your Visitors

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.”

beacon.by

Get Straight to the Point

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.

Volusion popups

Use Social Proof

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.

inc42.com

And here is one from Hotjar, relying on big numbers to capture potential subscribers’ attention:

pasted image 0

Step 5: Prepare Your Design

When preparing the design of your WordPress modal, there are a few elements to keep in mind.

Your Pop-up’s Position

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.

Iterable

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.

MailUp

An email bar on MailUp’s WordPress website

Your Visuals

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!

MeetEdgar

Your Call-to-Actions

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-ups

Mobile pop-up design is specific. Why and how you can design great mobile pop-ups is explained in an earlier article.

Step 6: Find the Right plug-in

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.

Integrations

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.

tenor

Targeting & Design Features

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.

Pricing

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.

Wrap-Up

It’s now up to you!

If you appreciated this tutorial, share it. Feel free to join the discussion in the comments.

 

Share

Written by

Greg D'Aboville

Greg is Growth Marketer at WisePops, an app that lets marketers design smart website pop-ups in a snap.

Leave a Reply

Your email address will not be published.Required

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

You May Also Like to Read