How can you use popups to get more website sales and conversions? This post gives your 9 smart popup examples for building your email list, promoting sales, engaging visitors and reaching your website goals.
With Elementor Pro 2.4, you get access to a powerful new tool:
Yes – you’ll now be able to build popups using the same Elementor interface and widgets that you’re already familiar with. Then, you can target and trigger those popups using a variety of conditions, like whether or not a user is logged in or whether they’ve scrolled to the bottom of the page.
To help give you some ideas for how to apply this new functionality to your own WordPress sites, we’ve collected 9 different examples of ways that you can use popups, covering everything from a simple announcement to an age gate, social share buttons, and lots more.
Let’s dive in so that you can be creating awesome popups in no time.
For all of these examples, I’ll use real popup templates from the Elementor Pro template library that you can import straight to your site and modify as needed.
1. Make an Announcement for New Features or Issues
Have something you need to announce? A popup lets you make sure that you’re able to get important information in front of as many eyeballs as possible.
You might be…
- Launching a new product or service
- Notifying visitors about a known website issue
- Changing how your site functions
- Publishing a big new blog post
No matter what you’re doing, a popup ensures your visitors won’t miss it (you can even use targeting rules to make sure that’s the case!):
To control where and when your announcements appear, you can use Elementor Pro’s Conditions and Triggers.
For example, if what you’re announcing only applies to anonymous visitors, you could use Elementor Pro’s targeting rules to hide the popup for logged-in users so that they don’t get peppered with an irrelevant announcement.
2. Promote Your Sales or Coupons (Including Countdowns)
You’ve probably seen this one at your favorite eCommerce store:
You go there to start shopping and, soon after landing, you get a popup letting you know about their latest sale or discount.
With the new popups functionality, it’s easy to adapt this new functionality to your Elementor website or eCommerce store. Here are a couple ways to start promoting…
First, you can just go with a simple announcement that lets shoppers know about the sale and sends them to the right spot:
Or, if you’re running a sale with a specific end date, you can use Elementor Pro’s Countdown widget to show a popup with a countdown timer to add some urgency and push shoppers to make their purchase(s) before the sale ends:
3. Grow Your Email List
When you think of popups, the first thing on your mind is probably those email opt-in popups that so many websites use.
By combining Elementor Pro’s Form widget with the new popups functionality, you can join in and start using popups to grow your list.
You can create a simple opt-in:
Or, you could dangle some type of offer, like an eBook or a “special surprise”:
Or, if you’re running an eCommerce store, you could even offer a coupon in exchange for a visitor’s email address, which is another popular strategy:
Finally, by using Elementor Pro’s targeting rules, you can also personalize your email opt-ins to specific content or categories at your site, like showing:
- A WordPress-related opt-in popup on the “WordPress” post category
- An SEO-related opt-in popup on the “SEO” post category
4. Let Users Contact You or Submit Information
Popups aren’t just good for forms that collect email addresses, you can also use them to let your visitors contact you via a full-featured contact form.
You’ll see this tactic a lot with lead generation sites. For example, you might have a Get A Quote button. Then, once a visitor clicks the button, you can open a popup with a full contact form where the visitor can fill in all of their details.
Or, you could add a customer support contact form that appears on your help pages. One way to implement this would be to use triggers to wait until a user scrolls to the bottom of a help article and then display a form like this:
That way, you can give visitors a chance to solve things themselves before you put them in touch with a human.
And because you’re using the normal Elementor Pro Form widget, you’re able to fully customize all the fields to your needs and even use Zapier webhooks to automate post-submission actions.
5. Create an Age Gate or Content Locker
Sometimes, by choice or by law, you might not want to make your website’s content immediately accessible to all visitors.
For example, if your site deals with alcoholic beverages, you might want to verify a visitor’s age before you give them unfettered access to your site.
With a popup, you can use a full-screen overlay to force visitors to perform an action before they can unlock your site, like clicking a button that verifies they’re above a certain age:
If a visitor answers correctly, you can send them on to your site. Otherwise, you can send them somewhere else (like back to Google).
You can also lock your content in other ways, like forcing users to log in by showing a full-screen login form overlay for all anonymous visitors.
6. Let Users Log in or Register Without Leaving the Page
Speaking of login forms…
To make it easier for visitors to log in or sign up (and let them skip the WordPress login page), you can use a popup or slide-in to house your form.
All visitors need to do is click on the Log In or Sign Up buttons. Then, you can use Elementor Pro’s Click trigger to display a login form as a modal popup or a more unobtrusive slide-in:
7. Display Well-Timed Social Media Buttons
With Elementor Pro’s Share Buttons widget, you can easily add static share buttons to your site’s content.
For an alternative way to display those share buttons, though, you can also put them in a popup or slide-in:
Now, you might not want to display these share buttons right away. But by using triggers, you can wait until visitors scroll to a certain depth or element before displaying your share buttons.
For example, if you wait until visitors scroll to your comments section, you can make a pretty good guess that they’ve engaged with your content. And by displaying a social share button popup right at that moment, you can give your site a good shot to get that share.
I doubt that you need me to explain the concept of a cookie consent notice because you probably encounter one every day you browse the Internet.
To gather consent from your own website’s visitors, you can use a popup or notification bar that appears immediately whenever a new visitor lands on your site:
9. Help Visitors Navigate Your Website
Finally, popups can also help your site’s visitors navigate your site.
This tactic is especially helpful for offering some type of personalized experience.
For example, you’ll see some clothing eCommerce stores show a popup that lets shoppers choose to be redirected to either the male or female section of the store.
Or, you might want to send people to a different spot based on their goal for your site, like whether or not they’re looking to get hired for a job or hire someone else for a job, as this template showcases:
Using a popup for these sorts of essential navigation questions lets you make sure that people get an experience that’s tailored to their exact needs.
Get Creative With Your Own Elementor Pro Popups!
In this post, we’ve touched on 9 ways to use Elementor Pro’s new popups functionality on your WordPress site. But that doesn’t mean these are the only ways that you can use popups on your site!
Because you can use any Elementor widget in your popups, you have the power to adopt this feature to your own popup needs.
So now it’s over to you – what types of popups are you excited to create with Elementor Pro on your website?