How To Create Elementor Popups

To create a popup with Elementor go to Editor > Templates > Popups from your WordPress dashboard. Click Add New Popup, make sure the template type is set to popup, give your popup a name, and click Create Template.

This opens the Popup Library. Hover over a popup template and click Insert to open it in the Elementor editor for customisation.

Note: Elementor popups require Elementor Pro.

Read on for a full walkthrough, or check out our Elementor popups video tutorial if you’d prefer to follow along visually.

How to create a popup in Elementor

First of all make sure you have Elementor Pro installed on your WordPress website. Then you can navigate to Popups by hovering over the Elementor icon from your WordPress dashboard. Next, hover over Editor and click Templates. Finally click Popups from the left hand dropdown menu beneath Templates.

You’ll then be able to click the Add New Popup button.

Make sure the template type is set to Popup. Give your popup a name and then click Create Template.

The Elementor editor will load with a lightbox overlay. In this overlay you’ll see a selection of Popup Templates. Select a template, hover over it, and click the pink Insert button that appears in the bottom left corner of the template.

This will open the Popup Template in the Elementor editor ready for you to customise and make your own.

Note: you may have to connect to the Elementor template library first. If you see a screen like the below, click Get Started and finish the steps to connect to the template library. You’ll then be able to open your Popup Template.

How to make an Elementor popup from scratch

If you are feeling adventurous, or don’t like any of the templates, you have the option of creating a popup from scratch.

To do this, click the X button in the top right popup library overlay.

This will close the template library and you’ll be left with a screen like the below, ready for you to build your own popup.

How to customize an Elementor popup template

You can use the full power of Elementor to customize the layout, style and functionality of your popup. Don’t worry, we’ll show you how step-by-step, starting with the Layout.

And the best thing about Elementor is that you can do everything visually. The visual builder means that you can customize all of these settings yourself and visually see the changes take place. This allows you to customise your popup without needing any prior development experience, or having to switch back and forth between the back end and the front end of your website like with some other plugins.

Elementor popup layout

There are a couple of ways to edit the layout of your popups.

Popup Settings > Layout

This opens the layout settings for the entire popup. Most popups are built with multiple containers. An outer container containing the whole popup and inner containers containing the content. So this is where you can manipulate the layout of the entire popup. So, if you like a popup but want it to cover more of the page, this is where you would increase the width or height.

For example, below I have increased the width of the popup from the default 650px to 1080px.

Edit Container > Layout

This is where you can edit the layout of the inner containers of your popup. Each container has a Layout section where you can edit the layout, width, height, etc. Below I have shown you this in practice by reducing the width of the inner container from 80% to 65% of its parent container. I also set a thicker border so it would appear more obvious.

Popup position

By default, Elementor centres your popup horizontally and vertically on the page. To change this, you can adjust the Horizontal and Vertical Position settings. You can pin your popup to the top, bottom, left, or right of the screen, which is useful for cookie banners, slide-in offers, or notification bars.

Note: Always check the mobile view after adjusting the position of your popup. Use the responsive toggle in the editor to switch between desktop, tablet, and mobile and make sure your popup sits where you expect it to on every screen size.

Overlay

An overlay is a background layer you can display behind your popup. There’s a few options here:

• Leave it as a Classic solid colour
• Add an image behind the popup
• Use a Gradient blending two colours together

As a general rule, it’s best to keep an overlay simple. A classic solid colour overlay keeps the focus on your popup content. Gradient overlays can be stylish but may sacrifice effectiveness. Nailing the opacity is usually the key to a good overlay. Too light and it won’t be noticeable, too dark and it may be overpowering. Experiment and see what’s work best!

Just so you’re not confused, after you enable an overlay from Settings > Layout, you’ll need to switch to the Style tab to edit the styling of your overlay.

Entrance and exit animations

There are also 36 Entrance Animations and 21 Exit Animations to choose from for your popup. These control how the popup appears and disappears on screen. You know, like those cool effects where the popup comes bouncing in from the side or flying in from the top!  You can test them all out by clicking Preview Changes after selecting one, and then simply pick whichever animation best fits your brand.

General Settings

Under general settings you have the option to rename your popup template, and you can also change the HTML tag (we suggest leaving it as a div, which is the most appropriate tag for a popup). And that’s all of the important bits in the Layout tab of your popup. Pretty straightforward, right?

Elementor Popup Styling

In the Style tab of Popup Settings you can further customize the styling of your popup.

You can set background types, change the colours, add a background image, or add a border.

It’s easy to experiment with these settings using the Elementor builder, so have a go at changing the options and see what they all do! And most importantly, see what you like best for your popup.

For example, in the screenshot below, we’re using an Overlay with a Linear Gradient Background and a Dashed border.

Advanced

Advanced Elementor popup settings allow you to customise the functionality and preferences of your popup, like should there be a close button, or should the popup automatically close after a set period.

You can currently choose from the following options:

• Add an automatic close time.
• Prevent your customers from being able to click off the popup via the overlay or ESCAPE key.
• Prevent scrolling when the popup shows up.
• Stop the popup showing to a user if they’ve already seen another popup on your website.
• Allow the user to navigate the popup using their keyboard

How you apply these settings is up to you. However, we suggest not making it too hard for your visitors to close your popup, as this could annoy them, result in a bad customer experience and a high bounce rate. You want your website viewers to want to come back to your website, and this could deter them from doing so.

There is also the option to alter the Margin and Padding of the popup, and to add Custom CSS if you wish to apply any to the entire popup.

Elementor Popup Forms

Most popups include a form used for list building, lead generation, granting access to gated content.

The form widget inside a popup works exactly the same as any other Elementor form. To edit it, click on the form inside the Elementor editor to open the Edit Form panel.

Where do Elementor popup form submissions go?

Elementor saves form submissions to your WordPress dashboard under Elementor > Submissions.

If you want submissions sent to an email address as well, go to Edit Form > Actions After Submit and add the Email action. From there you can set the recipient address, subject line, and email content.

Most users want both. It’s good to be able to see your submissions from the WordPress dashboard, but it’s much more effective having them arrive in your inbox, so you’re not having to constantly monitor your Submissions.

Connecting your Elementor popup form to an email marketing tool

Elementor connects with tools like ActiveCampaign, Convertkit, Drip and Mailchimp right out of the box, so you don’t need an additional plugin to connect to them.

To connect a popup form to an email marketing tool:

1. Click Actions After Submit
2. Click Add Action
3. Go to Elementor > Editor > Integrations from the WordPress dashboard
4. Enter your API key and click validate API key
5. Once your API key is validated, you will be able to select the list you want you form action to submit to

 

We have a YouTube tutorial on Elementor forms if you need more help on this topic.

Display Conditions, Triggers and Advanced Rules

To control where and when the popup displays, click on the downward arrow next to Publish in the Elementor editor.

Triggers

Triggers determine what causes your popup to appear.

Elementor offers several options:

On Page Load – the popup appears when the page loads, or within x seconds of the page loading.

On Scroll – fires the popup after the user has scrolled down a certain percentage of the page, e.g after they’ve viewed 50%, often more useful than springing the popup immediately on page load.

On Inactivity – shows the popup after a period of no mouse or keyboard activity. Useful for re-engaging visitors who may have stepped away from their computer, when they return, the popup will be there.

On Exit Intent – recognises when a user is about the leave your site by tracking their mouse movement. This is the most widely used trigger for lead capture popups because it intercepts visitors at the moment they would otherwise be lost without interrupting their browsing experience.

You can combine multiple triggers on a single popup if needed.

Advanced Rules

Advanced rules give you finer control over who sees your popup and how often. The most useful options are:

Show up to X times – limits how many times the popup is shown to the same visitor. It’s advisable to set this to 2 or 3 times maximum to avoid annoying visitors to your website.

When arriving from a specific URL – useful for campaign-specific popups, such as showing a tailored offer to visitors arriving from a particular ad or email link.

After X page views – only shows the popup to visitors who have viewed a minimum number of pages, filtering out low-intent traffic and targeting more engaged users.

Advanced rules work in conjunction with your conditions and triggers, so you have precise control over the full logic of when and to whom your popup appears.

Frequently asked questions about Elementor Popups

Does Elementor have a built-in popup builder? Yes. Elementor includes a popup builder as part of Elementor Pro. It is not available in the free version of Elementor. Popups are accessed from Elementor > Editor > Template in your WordPress dashboard.

Is Elementor Pro required to create popups? Yes, the Elementor popup builder is a Pro feature. If you are using the free version of Elementor you will need to upgrade to Elementor Pro to use it.

How do I trigger an Elementor popup on exit intent? In the Elementor editor, click the downward arrow in the top right corner next to Publish and select Triggers. Enable the On Exit Intent option. This will cause the popup to appear when a visitor’s cursor moves toward the browser address bar, indicating they are about to leave the page.

How do I stop an Elementor popup showing on mobile? Go to Display Conditions and add a condition excluding mobile devices, or use the Advanced Rules to limit the popup by device type. Alternatively, in the popup’s Layout settings you can hide the popup on mobile using Elementor’s responsive controls.

How do I limit how often an Elementor popup appears? Under Advanced Rules, enable the Show Up To X Times option and set a number. Setting this to 1 means each visitor will only see the popup once, preventing repeat visitors from being shown it on every visit.

How do I connect an Elementor popup form to Mailchimp? Click the form widget inside your popup to open Edit Form. Under Actions After Submit, add the Mailchimp action, enter your API key, select your list, and map your form fields. Submissions will then be sent directly to your Mailchimp audience.

Can I show an Elementor popup on a specific page only? Yes, under Display Conditions, select Singular and choose the specific page or post you want the popup to appear on. You can add multiple conditions or exclusions to control exactly where the popup shows across your site.

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 detail on all of these features and more.