How to Create Outstanding Popups in WordPress Using Elementor

Follow this easy, step-by-step guide for building popups in WordPress using Elementor's Popup Builder.​

We created the Elementor Popup Builder to offer our customers the best way to create popups that look great and are consistent with their site design, and don’t require custom CSS in the process.

In this guide, I will show you why you no longer need to be limited by external WordPress popup plugins. Instead – use Popup Builder and build popups in the same editor you use to build your entire site.

This is just the first of several videos and written tutorials we are releasing to explain how to create various amazing popups in Elementor.

Ready to build your first popup with Elementor? Let’s go for it…

The Popup You'll Create

In this guide, we’ll show you:

  • How to edit the popup window
  • How to create an Elementor popup that includes a contact form
  • How to open the popup when the user scrolls down past 80% of the page
  • How to close the popup after the user submits the form
  • How to manually trigger the popup onclick (when the visitor clicks on a button)

Step 1: Getting Started

In Elementor, popups are built just like any other type of template.

If you’re familiar with the Elementor Theme Builder, you’ve come across templates like the header, footer, single and archive.

Popups are built in the same way.

In the WordPress dashboard, go to Templates > Popups > Add New

Let’s name our Popup template My First Template and hit ‘Create Template’.

Then, the popup templates window will open. You’ll be able to choose from over one hundred pre-designed popup templates.

As you can see, we did a lot of work creating a huge library of beautiful popup templates for you to use. You can also build the entire popup yourself using the power of Elementor Pro and its widgets.

Step 2: Designing the Popup Window Under Popup Settings

After you close the Library window, the Elementor editor will open up, with the Popup settings panel appearing on the left. 

BTW, this panel is always accessible through the bottom gear icon.

In the Layout tab, we’ll set the width of the popup to 700 pixels, and the height as ‘Fit to Content’. Our popup will be positioned to the center, both horizontally and vertically.

In the Style tab, we’ll set a solid yellow border, with a 35-pixel border radius, giving our popup a rounded look.

Popup settings also include additional settings, like showing the close button after a set time, automatically closing the popup, a switch to prevent the popup from closing, a switch to disable page scrolling and a switch for avoiding multiple popups. We won’t be using them here, but it’s handy to know in case you need them.

Step 3: Build the Inside of the Popup

Since designing the inside of popups is the same process as designing any page, we won’t go over the process in detail. 

Simply note that every type of content and template you have in Elementor can be used in your popups.

The final design of our popup looks like this:

How to Target Popups Using Publish Settings

As you will see, setting advanced targeting and triggers is as easy as flipping a switch. Hit publish and the Publish Setting window will open up.

Let’s quickly go over the targeting options in the Popup Builder, so you know how to properly target popups using the Conditions, Triggers and Advanced Rules targeting options.

Conditions

Set the conditions that determine where (on which pages) the popup appears throughout the site.

For example, if you choose “Entire Site” it will display the Popup everywhere across the site! You can get very detailed as well, for example by selecting a specific posts category.

It is similar to the theme builder, we actually have an in-depth video tutorial about this.

Now that we have defined where the Popup is used throughout the site, we can go on to set the triggers, which are the user actions that make your popup appear.

Triggers

Using Triggers, we can set the popup to show:

  • On Page Load
  • On Scroll
  • On Scroll to Element
  • On Click
  • After Inactivity
  • And On Page Exit Intent
For this tutorial, we’ll be using a manual popup that is triggered when the user clicks on a button.

Advanced Rules

Under Advanced Rules, we can set very specific requirements that have to be met for the popup to appear:

  • After a certain number of Page Views 
  • After a certain number of website visits
  • When visitors arrive from a specific URL
  • When visitors arrive from external links / internal links
  • When they arrive from search engines.

You can also hide popups from logged-in users or choose to only show them on desktop, tablet, and mobile devices.

Step 4: Set Popup to Show on Scroll & Close on Submit

We wanted to show you two different ways to set off the popup we created: one manual via link click, the other automatic using the on scroll trigger.

For the automatic trigger, we also want the popup to close after the user submits the form inside the popup.

Open Popup With On Scroll Trigger

So, for the first example, we want the popup to appear when the user scrolls through 80% of the page.

Under Triggers, switch on ‘On Scroll’ keep the direction set on ‘Down’ and enter 80 in the ‘Within’ field.

Close Popup With Form Submission

Go to the Form widget inside the popup, and under ‘Actions After Submit’, choose ‘Popup’.

Click on the popup item that will  now appear below.

Under ‘Action’, choose ‘Close Popup’.

Step 5: Manually Connect Popups to Links or Forms

To set a manual trigger, we will go to our landing page and connect one of our buttons to the popups.

Hit CMD / CTRL + E to open finder, and type ‘Add new page’. 

In the new page, drag in a Button widget.

In the Button settings, under content, click on the dynamic icon next to the Link field.

Then, under Link > Actions, choose Popup.

Click on the Popup again, make sure the action is set to ‘Open Popup’, and type the name of the popup we created.

Hit publish and view your live page. Now, clicking on the button should open the popup.

That’s it! We’ve successfully opened the popup using the Scroll trigger and the On Click manual trigger, and closed it on form submission.

Conclusion

This webinar offers a first taste of the vast design and targeting options available in the Popup Builder. Be sure to checkout the popup tutorial playlist we’ve prepared for you. 

We’d love to hear from you — show us the popups you created and let us know if you have any questions.

Liked This Article?

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

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

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

Comments

40 Responses

  1. This is a great feature Ben! Although I hate pop-ups, this can be used for personalised tiny tiny pop-up such as giving discount codes when user is arriving from a specific tag in URL with the advanced rules. Advanced Rules are really useful.

      1. Guys, this is amazing! I only have 2 very important questions:

        1.) Can I trigger the popup only on certain URLs that contain a specific keyword (for example “/accommodation”)?

        2.) Can I also hide the popup for users after signup if I use an embedded form? We usually use jotform.com.

  2. Looks great! Love the in-depth video and scenarios, that really helps.

    For a future upgrade, would love to see an Advanced Rule based on time period — eg, only show the popup X times in X period (hours, days, weeks) — for example, only showing it 1 time every 7 days.

    1. As long as the popups on mobile do not have a negative effect on the user experience (too intrusive, difficult to close, etc.), you should not worry about it.

  3. Say I have a pop-up that triggers on exit intent. Inside the pop-up is a promotion and a button that will scroll to the part of the site where visitors can buy tickets. How can I cause the popup to close at the same time that the button is clicked. In other words, 2 actions associated with a button click. If that’s not possible, consider this a feature request.

  4. This is a featured packed popup element as to the video i saw and it is going to be a good resource for designing websites.

    I would like to ask if there would be any side bar popups that are included, especially for contact forms i find this so usfull?

  5. Thank you for the video! My popup is automatically opening when I load the page in preview, however, I do not want this. I simply want the popup to appear when I click the CTA button. The “on page load” option is not in affect, therefore, I cannot undetstand why it is doing this. can you help? 🙂

      1. Hi Michel, yes I did. the issues only occured when I loaded the page in preview. Loading it by simply clicking “view” in the page menu (where you have the overview of all your pages in the backend) it will not open automatically. So I concluded it would not open automatically when the page was loaded by users and it does not.

  6. Love the pop ups on wordpress for lead generation. We’ve been putting them for our clients in the last couple of years. We’r realizing people are more likely to opt in. browsing is secondary i guess.
    Another cool thing that worked well is the floating call button at the bottom of the mobile view.

  7. אפשר להגיב בעברית? :\
    עשיתי הכל לפי הספר ולפי כל ההנחיות שלכם, ולמרות זאת עדיין לא עובד לי הפופאפ.
    בתצוגה מקדימה הוא נראה נפלא, שמרתי, פרסמתי, הוספתי תנאים והוא עדיין לא עובד לי.
    מה עוד יכול להיות?

  8. Hi There ! This is really awesome feature ! I use the pro version of Elementor and i’m very happy. I created a full size popup, however since I have a sticky header template used, the popup in full size comes under the sticky header, and the background of the pop is not dark on the area of the sticky header. Do you have a solution for this?

  9. “In the WordPress dashboard, go to Templates > Popups > Add New”

    This is not an option for me – it’s nowhere to be found. And I have Elementor Pro.
    How come?

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 679,920 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.