Elementor Popups is the best WordPress popup plugin we’ve come across. It’s fast, easy to use, and has plenty of customisation options and advanced features. It’s included within the Elementor Pro plugin (so technically it’s not a standalone plugin). Not having to add on an extra plugin helps keep your website slim and fast.
The Elementor drag and drop builder is incredibly user friendly, meaning you don’t need any development or coding to build your popups with it. And we’ll make it even easier by going through, step-by-step, how to set up an Elementor popup on your website.
(If you’d prefer to watch a video tutorial, then we also have a Elementor popups tutorial available for you to watch on YouTube).
How to set up a popup in Elementor
First of all, you need to make sure you’ve got Elementor Pro installed and set up on your WordPress website. Once you have that sorted, you should be able to see Popups under the Templates section of your WordPress dashboard.
If you click on that then you’ll get taken to the Popup dashboard. From there, click on Add New at the top of the page.
A lightbox will appear, where you can choose to name your popup and select the type of template you want to use (don’t change it from the default of Popup). When you’re ready, click on Create Template.
You’ll then get taken to the Template Library where you can choose from loads of different templates and template types. You can choose classic templates with built-in forms/ email submissions, sticky templates, discount templates, countdown templates, and more. You can then fully customise the templates, and make them your own. To select a template, simply click on Insert under the template image.
(There’s also the option to build your popup form from scratch, but the easiest way is by choosing a template, so that is what we’ll go through in this article).
Settings
Once you’ve clicked Insert (on your chosen template) you should be taken to the Elementor editor with your template open. The editor will default to editing the section, rather than the popup.
So if you want to get to the actual Popup editor, simply click on the settings button in the bottom left corner of the page. This can confuse many people when first starting with Elementor popups.
From here, the first thing you can do, under Settings > Layout, is edit the layout settings.
We’ll give you a quick rundown of the settings, but most of them are pretty straightforward. And the best thing about Elementor is that you can build everything visually. Its visual builder means that you can go through all of these settings yourself, and visually see the changes that take place. This allows you to customise your popup without needing any development experience, or having to switch back and forth between the back and front end.
So, first of all, you can edit the width of the popup by using the width slide bar (or by typing in a value in pixels). See the above screenshot for an example of an increased width/size.
You can also edit the height of your popup. But this doesn’t really work for templates (see the blank space that it creates). So we suggest leaving the height on Fit To Content.
You can also change the Horizontal and Vertical positioning of your popup. For this example, we have kept it on Centre for each.
Although Elementor is automatically responsive, you should also check the mobile view throughout your editing. There are responsive buttons on most editing options, where you can switch between desktop/tablet and mobile view.
On the Layout settings there are also Entrance Animation‘s (36 to choose from) and Exit Animation‘s (21 to choose from). These are all really cool animations that will help your popup blend in, or stand out, on your website. You can test them all out by clicking Preview, after selecting one, and then simply pick whichever animation best fits your brand.
Under General Settings, you once again have the option to name your popup template, and you can also change the HTML tag (we suggest leaving it at div, which is the most appropriate tag for a popup).
And that’s all of the important things you might need to know in the Settings section. Pretty straightforward, right?
Style
In the Style section, of the Popup Settings, you can then start to customise your popup further. You can set background types, change the colours, add an image, add a border, etc.
As we said before, the visual builder means you can play around with all of these settings and visually choose whatever you like the look of the most. So have a go at changing round all the options, and see what they all do!
For this example, we’ve added a background colour, and we’ve added a Dashed border.
In the next subsection, under Overlay you can also decide if you want the classic lightbox overlay effect, or to mix it up a bit. You can add an image under Classic background and change the overlay colour.
Or with the Gradient background you can add a really cool gradient effect to your popup background. For the example above, we’ve chosen a black to a dark-pink gradient effect. As you can see, it’s quite a funky effect, which you might want to include in your design.
Usually with popups though, less is more. So you might also want to keep it simple. We think you can’t go wrong with a simple popup lightbox design.
In this section, you can also edit the Close Button colour, background colour and size. You probably want to make this as visible as possible, so that you don’t annoy your customers.
Advanced
Switching to the Advanced editing section, you will see you have some popup control options. You can control the following options:
- The time before the close button appears
- Add an automatic close time
- Prevent your customers from being able to click off the popup via the overlay or ESC button
- Prevent scrolling when the popup shows up
- Stop the popup showing to a user if they’ve already seen another popup on your website
It’s all completely down to you and what best fits your business’s marketing.
We suggest not making it too hard for your visitors to close your popup, though, as this could annoy them and result in a bad customer experience and high bounce rate. You want your website viewers to want to come back to your website, and this could deter them from doing so.
(In the Advanced section you also have the option to add custom CSS).
We’ll also quickly cover how to activate the form section of your popup, as this is a common query that we get asked. However, if you want a full rundown on how to do this, then take a look at our full YouTube video on how to build a WordPress form the easy way – with Elementor.
Edit Form
First, by clicking on the form section in your popup, you’ll get taken to the Edit Form settings.
The most important thing to do, to activate your form, is to go to Form Fields. Under Name, and then Form Name, click on the Advanced tab and insert an ID name in ID. For this example, we have simply chosen ’email’.
This now means that, when a customer fills in the form, it will appear under the Submissions section of your WordPress dashboard (under Elementor). But as we said, check out our YouTube tutorial if you want to learn more about this.
Display Conditions, Triggers and Advanced Rules
Going back to the popup, you can also change the display conditions, triggers, and advanced rules. By clicking on the bottom right arrow sign of the Elementor editor (which will say Save Options when you hover over it), you can click on Display Conditions, Triggers or Advanced Rules to get to the Publish Settings.
Under Conditions you can determine where you allow your popup to show. You may want this to be across the entirety of your site, or you may want to specify certain pages (or exclude them).
In Triggers, you have some really cool advanced trigger options to choose from. You can decide how long you want your users to be on your page before the popup appears, add the option of percentage scrolling before it appears, add the popup appearing after seconds of inactivity, and more.
Possibly the most important trigger option, and the one most widely used in popups, is the On Page Exit Intent. This killer feature can recognise when your website users are about to leave your site, and then show them the popup before they do. This is a neat trick that can prevent you from losing leads and conversions.
Finally, in the Advanced Rules section, you can further edit your controls in conjunction with your conditions and triggers. One of the most useful options here is by limiting the number of times that your popup shows up (in our example we’ve selected 3 times/ 3 opens). This makes sure that your visitors aren’t bombarded with your popup, as this could get quite annoying for them.
We hope that you found our guide on Elementor popups useful. As you can see, they are nice and easy to setup and customise. If you would like any more help on this topic, then feel free to check out our full YouTube Elementor popups tutorial, where we go into more depth on all of these features, and more.
