9 Useful Ways to Utilize Popups on WordPress

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:

The Popup Builder

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
  • Updating your privacy policy
  • Publishing a big new blog post
  • Etc.

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.

8. Get Consent to Use Cookies

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:

You can then use targeting rules to hide your cookie consent popup once they’ve accepted your privacy policy to avoid annoying repeat visitors.

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?

Liked This Article?

We have a lot more where that came from! Join 512,871 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Colin Newcomer
Colin Newcomer
Colin is a freelance writer for hire specializing in WordPress and digital marketing. Grow your business with in-depth, conversational blog posts.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

45 Responses

  1. Why not just use them to display extra content related to the current page. That way the user won’t have to leave the page. 🙂

    1. Create your pop up, then don’t use a normal link for the button but use the ‚dynamic‘ feature next to the link field, select popup and then search for your already created popup

    2. Qith a button is easy because the button widget give you tha dynamic filed option so you can choose the right pop up but for a text or a widget that is not studied to work with dynamic field is “impossible”
      I’ve found a tip ( thank you to Raffaele Mele ) that work in this way :

      1) create the opo up
      2) apply to the widget button for example or wher you ant
      3) launch the popup up and copy the url code
      4) use the portion code after #Elementor ( with that included )
      5) paste on the text or where you want and it works

      P.s. remember to leave the button or widget in the page ( hiddening it for all the views )

      1. I wrote responsive, so you should view the page on a mobile device or tablet. Plus the sticky menu was intentionally created that way, because I like it.

  2. The popups are great! But is there a way after the person submits their information in the popup to redirect them to a URL such as a thank you page or even a page to offer a tripwire? What options are there after submission to continue the customer journey?

  3. Please explain in detail or with an example how to use this for a cookie consent? I would like to set a cookie on the visitor’s device so that once the visitor consented he doesn’t see the popup again.

      1. It’s one time for the current visit but the popup will come back for the next visit , no ? (any cookie to say not showing it before one month for exemple)

  4. Hello, can you explain how use this function for email subscription ? Without cookies (i read there are not) the windows will open for every visitor, each time he come on the site. No way to say only 1 time in month for example (yes cookies needed) . Thank you

  5. I would like to integrate popup to contain woocommerce product page.
    Thus, while browsing a list of products (i.e. archive) it will behave as a modal that displays the product
    and can be closed easily. Keeping the visitor on the same page…

    Is it possible?

  6. The popups work very well on the laptop and mobile, but they do not work well on the tablet. Maybe I’m doing something wrong? They shoot right up in the corner and I can not center them? Does anyone have the same problem and maybe a solution?

Leave a Reply