How to Create Awesome Pop-ups with the Free WordPress PopUp Plugin

How to Create Awesome Pop-ups with the Free WordPress PopUp Plugin

Pop-ups suck, everyone hates them, and they don’t work, right? Few aspects of web design have the ability to divide opinion quite like pop-ups. But the fact is, everyone is using them and they can produce impressive results.

Since Popup Pro was launched we’ve added sooo much new stuff. Head over to the project page to check out all the new features! Check out Popup Pro

Whether you personally love them or hate them, sticking a big pop-up in your visitor’s face can be one of the most effective ways to jolt their attention with a super offer and grab their email so you can entice them back for more.

In this article, the first in a series of posts about the free plugins we have available over at WordPress.org, I’m going to walk you through WordPress PopUp, the free version of our PopUp Pro plugin. I’ll show you how to set it up and make the most of WordPress PopUp in a way that will benefit both you and your visitors.

But before all that, let’s take a closer look at why you should use pop-ups on your site.

Why Use a Pop-Up?

There are plenty of uses for a pop-up, but in a nutshell, they enable you to ensure that all users across your site (or only certain specific groups) see whatever it is you want them to see.

As noted earlier, two options to consider would be:

  1. advertising a sale in your on-site store, or
  2. encouraging visitors to sign up to a mailing list.

The benefits of both options are probably familiar to you:

  1. Openly advertising a sale to a broad or targeted set of visitors (at your discretion) gives you the power to boost sales as you see fit.
  2. A healthy mailing list is the Holy Grail of the web marketing world. Growing your list should contribute to increasing recurring visitors and provide exponential growth for your website.

You could also use a pop-up simply to redirect visitors – at an opportune moment – to another part of your site. The more pages a visitors sees, the more opportunities you have to hook them in and keep them coming back.

The one big thing to keep in mind is that pop-ups do distract from the content your reader is looking at in the first place. They are not always a welcome distraction; there are more examples of poorly-implemented pop-ups across the web than you can shake a stick at.

Later on, we’ll take a look through some tips on keeping your readers as free from annoyance as a result of your pop-up as possible.

Now, let’s meet the star of the hour!

Introducing WordPress PopUp

WPMU DEV's WordPress PopUp on WordPress.org.
Available from the WordPress.org plugin repository now!

Even if we do say so ourselves, WordPress PopUp is a really good plugin.

It’s very intuitive and – particularly if you take the step up to PopUp Pro (which is apparently the best plugin we’ve ever produced) – has pretty much any feature we imagine you could want when making and deploying pop-ups.

Here’s a natty video introduction to give you an idea of what to expect:

Features in the free version include:

  • Seamless WordPress admin integration for easy pop-up creation.
  • Up to three different pop-ups active across locations of your choosing at any one time (this is unlimited when you go pro!).
  • Control your pop-up timings, with the option to choose when it appears based upon your reader’s location, time or clicks on a page.
  • Choose who sees your pop-ups, depending on whether they’re logged in, users who comment, users who’ve come from a specific location, and other options. Again, you can expand your control over these options with the full PopUp Pro version, but they’re still available in a limited form for WordPress PopUp.
  • Responsiveness available for compatibility with mobile devices (with PopUp Pro, you can choose to exclude mobile users from seeing pop-ups if you want).
  • A free design template (with more available in PopUp Pro) to enable you to create pop-ups that look freakin’ awesome, to be frank.
  • Allow visitors to prevent the pop-up from showing again.

How’s that for a badass list?

PopUp Pro naturally offers plenty more features (such as limiting pop-ups to specific countries), but WordPress PopUp is designed to be a fully functional plugin in its own right. And you can’t argue with free, can you?

As with most plugins – especially when they’re free – the best way to find out how good WordPress PopUp is to try it.

Let’s take a walk through right now.

Getting Started with WordPress PopUp

Download WordPress PopUp

Because it’s free on WordPress.org, you can install WordPress PopUp from your WordPress website. Simply head over to Plugins > Add New and search for “WordPress PopUp.”

Click Install Now and Activate Plugin as you would normally and you’re ready to begin work. Boom.

A new WordPress menu will appear called PopUp under which you can view existing pop-ups, add new ones and control the settings for your pop-ups.

I’d recommend jumping straight into the PopUp > Settings menu so you can begin to configure the way your pop-ups will act. Here, you can also find which shortcodes work with the pop-ups.

Which shortcodes can be used within pop-ups varies per theme (or the plugin used to create the shortcode) and you may need to use certain loading methods. These can be changed between loading as part of the HTML of the page and using AJAX to create the pop-up:

WordPress PopUp Shortcodes
Twenty Fifteen supports pretty much any shortcode you could care to throw at it

If you choose to invest in PopUp Pro, you’ll also have the ability to mask URLs in the display calls. This means that most ad-blocking software will still allow your pop-up.

Getting your pop-up seen by as many people as possible will increase its chance of success. Ad-blockers are normally installed to prevent irritation, and hopefully your pop-up will be welcomed by its viewers if you follow the good practice guidelines that we’ll look at later on.

Display options when creating a new pop-up.
Display options when creating a new pop-up.

You can also switch the options for the conditions upon which pop-ups are shown using fancy toggle buttons.

The Basic URL feature enables you to determine specific pages where the pop-up is or isn’t shown.

For instance, you could choose to display a pop-up on every piece of content on your site except the front page or About page.

Alternatively, you could set a pop-up specific to certain content appear only on the relevant page or post – like an offer for money off on a post about one of your products.

Browser type lets you choose what type of device will see your pop-up. If you have something to say specifically to mobile users, or conversely don’t want your pop-up to show on mobiles, you can use this to determine the visibility.

PopUp details determines how many times a pop-up should appear.

Referrer allows you to choose to display depend on where someone came from. You might not want to show a pop-up to someone who’s coming from your site already, so you can choose to disable it for internal links. You can also customize for visitors from search engines among other types.

Finally, User status means that pop-ups can be shown based on whether a user is logged in or not, or has commented on your blog. Those who’ve commented before might be open to a prompt to do so again – towards the bottom of your posts if you have the appearance by element control, as in PopUp Pro.

That’s it for the free version, but there are plenty of other options in the PopUp Pro plugin like user roles, geographical location, categories, dates and wildcard URLs.

Once you’ve chosen which settings you’d like to have activated, you can get on with creating your new pop-up at PopUp > Add New.

Once you’re on the page, you can name your pop-up. This won’t show on the actual pop-up. However – and especially if you’ve having lots of different – specialized ones pop-ups with our premium plugin, it’s worth having a naming structure.

That way you’ll be able to see easily which pop-up you want to edit, rather than having to guess – it should just speed things up in the long-term.

In the main PopUp Contents, you can add a headline, subheading, call to action and/or image. The image can be hidden on mobile devices if you wish.

None of these is necessary (unlike the content, which is also added here), but they can be used to catch your reader’s attention effectively a lot of the time.

The Appearance section has plenty of options to choose custom colors (and from several templates in the pro version). You can also set a specific size for your pop-up in the section and apply animations for the display and closing of your pop-up.

Under the Behavior menu, you are able to set when your pop-up will appear and how users can interact with it (like permanently dismissing it). If your pop-up has a form, you can set the behavior after submission here as well.

You can change Display options as discussed earlier as well, with configuration options available per restriction.

Custom CSS
I’ve set my header to the Twenty Fifteen theme’s here

The final menu item is custom CSS, which can be used to further style your pop-up. For instance, I’m using Twenty Fifteen, so I want to change the header font and size.

That’s the basics covered: just activate and save your plugin (after previewing it, if you like) and take a look at your site to see your new pop-up in action:

The finished pop-up, live!

Remember that you can have up to three pop-ups active with the free version, but unlimited numbers with PopUp Pro.

You know what the best about the above is? It’s just surface scratching.

WordPress PopUp enables you insert images and do all sorts of funky formatting that can transform a plain pop-up into a truly enticing proposition.

Voila!
Voila!

You’ve no doubt already seen our pop-up here on WPMU DEV, but that aside, the sky really is the limit.

Best of all, the familiar interface will enable you to produce professional-looking pop-ups, even if you’re not that creatively minded.

Using Pop-Ups to Benefit You and Your Readers

You now know why pop-ups can be awesome and how to use WordPress PopUp to make a modern-looking, speedy pop-up.

There’s some best practice that we should still cover to make sure you get the most out of your pop-up(s) though.

Let’s be honest: lots of people find pop-ups irritating. While it draws a reader’s attention to something you want them to see, they might want to see the content they came looking for in the first place. If they’re not already sold on your site because your pop-up comes at the wrong time, they might just bounce straight back to Google. That’s not the point in doing this.

There are a few guidelines you should, therefore, consider when creating your pop-ups:

Don’t bombard readers with lots of pop-ups.

One per page is nearly always the maximum acceptable number. Instead of multiple pop-ups, make sure that the one you show is comprehensive and worth their time, encouraging them to find out about other aspects of your website independently.

You might find the additional controls (like non-specific URLs, for instance) that are available in PopUp Pro useful if you are considering running several pop-ups in different places.

Make sure your pop-ups appear in the right place, at the right time.

If a reader has just loaded your page and suddenly sees a pop-up, they won’t necessarily have time to establish the quality of your content. If they’re a new visitor, perhaps coming in from a search engine to find specific content, chances are they’ll leave if this happens.

This is the case especially on mobile where dismissing the pop-up might take longer. Using controls like desktop-only viewing and responsive design will mitigate this to an extent.

A really good way to solve the issue is only showing the pop-up after the reader scrolls a certain amount or past a certain element. This functionality is available for easy implementation with PopUp Pro.

Show your pop-up to the right people.

Like all advertising, especially on the Web, your pop-up is going to achieve an optimum of maximum conversions and few irritated readers if it’s targeted at the right people. Your UK readers won’t want to see an offer for your store if you only ship to the US, for example.

Equally, logged in users or site members aren’t going to appreciate pop-ups encouraging them to make accounts or sign up for membership every time they visit.

You can control the display to different user statuses with WordPress PopUp, while geographical and membership controls are available in the premium version of the plugin for ultimate targeting.

Targeting and thoughtful use of pop-ups is the best way to encourage people to stick around with you. It’ll also minimize the potential for you to irritate any potential clients with an ill-timed pop-up when they’re not sure if your content is worth reading yet. It goes without saying that content needs to be worth reading before targeting people with a mailing list for blog updates.

The more you can target and almost personalize pop-ups to certain users, the better they’ll do. PopUp Pro’s wide-ranging visibility options are brilliant for this, although WordPress PopUp can do the job in many cases, too.

Conclusion

Pop-ups are awesome.

They can do all sorts for you, your site, your visitors and your business if you implement them properly. It’s a win-win-win-win situation if you do it right; getting the perfect pop-up might take some minor tweaking, but if you follow the principles set out in this article you shouldn’t go too far astray.

We love WordPress PopUp and PopUp Pro and genuinely think that they’re the best options you’re going to find out there – but then we would, wouldn’t we? You should know by now how to use the plugins, so you need not take our word for it: download our free pop-up plugin right away and see if you like it.

(And then you can upgrade, because you know you’ll love using it. ;) )

So what are you waiting for? Take a look at WordPress PopUp and use it on your site – you’ll see how much good it can do for everyone involved once you try it.

Just before you go, have you had any brilliant ideas for how to use pop-ups while reading this post? Tell us about them in the comments below.