How to Create an Effective Popup Using Elementor Popup Builder
Popups can be useful for collecting email addresses, promoting an offer, sharing an important announcement, or directing visitors to relevant content. But when they appear too quickly, cover the entire screen, or keep showing up repeatedly, they can easily become frustrating.
With Elementor Pro’s Popup Builder, you have more control than simply deciding what your popup looks like. You can choose where it appears, when it opens, which pages display it, and the conditions under which visitors see it.
That means you can create popups that support the visitor’s experience instead of interrupting it.
In this guide, we’ll create a simple newsletter popup in Elementor and configure its display conditions and triggers so that it appears at a more appropriate point in the visitor’s journey.
What You’ll Need
Elementor’s Popup Builder is part of Elementor Pro. It isn’t available in the free version of Elementor. You’ll also need Elementor Pro active on a WordPress site with at least one page or post to attach the popup to. No coding is required for anything covered here.
Don’t have Elementor Pro? The Modal Popup widget from Addon Elements for Elementor is a free way to build a popup, triggered by a button, icon, or image click, using text, images, or saved layouts, without needing Elementor Pro at all.
What Is Elementor Popup Builder?
Elementor’s Popup Builder is Elementor’s own feature for designing overlay content, including center modals, slide-in banners, and top or bottom bars, directly inside the Elementor editor. It replaces the need for a separate popup plugin for most common use cases, since anything built with standard Elementor widgets can go inside a popup.
Because a popup built this way uses the same widgets, fonts, and colors as the rest of an Elementor site, it tends to look native to the page rather than like an ad wrapped around the content. That changes how a visitor reacts to it before a single trigger or targeting rule comes into play.
How Do You Create a Popup in Elementor?
Let’s create the popup first, then we’ll configure where and when it should appear.
Step 1: Create a New Popup
- Go to Elementor in WP Admin, then navigate to Editor > Templates.
- Click Add New Template.
- Choose Popup as the template type, enter a name such as Newsletter Popup, and click Create Template.
- Elementor will open the template library, where you can choose an existing popup template. For this example, we’ll close the template library and build the popup from scratch.
Notes: Already have a popup template? You can import it into Elementor and customize it instead of creating a new popup from scratch.
Step 2: Design Your Popup
Once the Elementor editor opens, add the content you want visitors to see. For our newsletter popup, we’ll keep things simple:
Heading: Enjoying this guide?
Description: Get practical WordPress tutorials delivered to your inbox.
Next, add a Form widget, where we will add only an email field and a subscribe button.
Step 3: Adjust the Popup Layout
Next, open the popup settings from the Elementor editor and go to Layout. Adjust the width so that it doesn’t occupy too much of the screen.
A width around 380–400px can be a useful starting point on desktop, although the exact value will depend on your content and website design.
The idea isn’t to make the popup as large as possible. It only needs enough space for the message and form to remain comfortable to read.
Step 4 : Check the Popup on Mobile
Before publishing, switch to Elementor’s mobile preview.
A 400px-wide popup that looks small on a desktop monitor can take up most of a phone screen.
Check whether you need to:
- Reduce the width or padding
- Adjust the heading size
- Stack content vertically
- Remove unnecessary decorative elements
- Increase the close button’s clickable area
The goal is the same on every device: keep the popup noticeable without making it difficult to use the page.
Step 5: Publish the Popup
Once you’re happy with the design, click Publish.
Before Elementor activates the popup, you’ll see Publish Settings. This is where you control where the popup appears and what needs to happen before it opens.
You’ll configure three areas: Conditions, Triggers, and Advanced Rules.
Set Conditions to choose where the popup appears. It can be limited to specific pages, specific posts, an entire category, or the whole site, and a popup promoting a specific product makes more sense tied to that product’s page than shown site-wide.
A popup shown everywhere to everyone is the version most likely to feel like noise.
Click Next, then set Triggers to choose when the popup appears based on what the visitor does. An on-load trigger with no delay is the single most common reason popups feel annoying, since it fires before a visitor has had any chance to read the page, so a short delay already helps.
A scroll trigger only fires once a visitor reaches a set point on the page. An exit-intent trigger fires when Elementor detects the visitor’s cursor moving toward the browser’s close or back button, one of the few moments a popup can appear without interrupting anything, since the visitor was already leaving.
A click trigger only opens the popup when the visitor clicks a specific button or link, leaving them fully in control of whether it appears at all.
Click Next, then set Advanced Rules for anything not tied to a direct visitor action, including device type, how many times the visitor has been to the site, and the URL they arrived from. Device rules matter because a popup built for a wide desktop layout can end up covering the entire visible screen on mobile if it isn’t restricted for smaller viewports.
Visit-count rules matter because a popup that reappears on every single visit, rather than being limited after a visitor has already seen it, reads as the site not listening.
Once everything is configured, click Save & Close.
Notes: A popup with a visible, easy-to-find close button is not optional. Elementor adds one by default, and it should also be dismissible with the keyboard, not just a mouse click. Removing or hiding the close button, or making a popup impossible to escape without a mouse, is one of the fastest ways to turn a popup into the reason someone leaves a page. See How to Improve Elementor Website Accessibility in WordPress.
Which Triggers Keep a Popup From Feeling Intrusive?
An on-load trigger with no delay is the single most common reason popups get labeled annoying, since it fires before a visitor has had any chance to read the page.
On-load vs. delayed triggers
An on-load trigger fires the moment a page finishes loading. Adding even a short delay changes that first impression, since the popup then appears after the visitor has already started reading rather than instead of letting them start.
Scroll and exit-intent triggers
A scroll trigger fires once a visitor reaches a set point on the page, so it only appears for people already engaged with the content. An exit-intent trigger fires when Elementor detects the visitor’s cursor moving toward the browser’s close or back button, one of the few moments a popup can appear without interrupting anything, since the visitor was already leaving.
Click-triggered popups
A click trigger only opens the popup when a visitor clicks a specific button or link, putting the visitor fully in control of whether it appears at all. This is the lowest-friction option, and it works well for anything the popup offers as a bonus rather than a requirement.
Tips: If a popup needs different content on every product page rather than one fixed message, that’s a genuine dynamic-content situation. Dynific Addons for Elementor pulls ACF field data, including text, images, and repeaters, directly into any Elementor widget, popups included, without custom code. See how it works: How to Display ACF Fields in Elementor Without Elementor Pro
Simple Ways to Make Elementor Popups Less Annoying
Elementor gives you the technical controls, but a few design and content decisions can make just as much difference.
Don’t Ask Too Soon
Give visitors a chance to understand what your site offers before asking them to subscribe, download something, or make a purchase.
Scroll, click, and exit-intent triggers can often provide more context than showing every popup immediately on page load.
Keep the Message Short
A popup isn’t the place for several paragraphs of copy.
A visitor should quickly understand what you’re offering and what they need to do next.
For our example:
Enjoying this guide?
Get practical WordPress tutorials delivered to your inbox.
Subscribe →
That’s enough to communicate the offer.
Use One Clear CTA
If the goal is newsletter signup, make subscribing the primary action.
Avoid adding several buttons that compete for attention.
Make Closing Easy
Don’t hide the close button or make visitors wait before they’re allowed to dismiss the popup.
A popup should offer an opportunity, not trap someone into interacting with it.
Notes: Not every attention-getting element needs to be a popup. A scrolling news ticker can highlight an announcement or offer within the page itself, without covering any content or requiring a visitor to dismiss anything.
Frequently Asked Questions
Does Elementor’s Popup Builder require Elementor Pro?
Yes. Elementor’s Popup Builder is part of Elementor Pro and isn’t available in the free version of Elementor. The free plugin doesn’t include a popup creation tool.
What’s the best trigger for a popup so it doesn’t feel intrusive?
There isn’t one universal best trigger, since it depends on the goal. Exit-intent and scroll triggers tend to feel least intrusive because they respond to something the visitor already did, rather than interrupting before they’ve engaged with the page.
Can I show an Elementor popup only on certain pages?
Yes. Display Conditions let you determine where the popup can appear. You can include or exclude different parts of your website depending on where the popup is relevant.
How do I stop a popup from showing every time a visitor reloads the page?
Elementor’s Advanced Rules step, set after Conditions and Triggers when publishing a popup, includes options based on how many times a visitor has been to the site. The exact field names for limiting repeat views should be checked directly in the live Advanced Rules panel, since this needs confirming against the current version of the interface.
Does Elementor’s Popup Builder let a popup target specific devices?
Yes. Device targeting is set under Advanced Rules, not under Conditions. Conditions controls which pages or posts a popup is tied to, while Advanced Rules covers device type, visit count, and referrer URL.
Conclusion
Building a popup that visitors tolerate comes down to four decisions: which popup type fits the message, where it’s set to appear through Conditions, what triggers it through user action, and what Advanced Rules filter out repeat or mismatched displays. Elementor’s Popup Builder walks through all four in sequence every time a popup is published, they just aren’t set to the least intrusive option by default.
Before publishing a new popup, preview it on an actual mobile device and confirm the close button works without a mouse. If a scrolling ticker or targeted banner would say the same thing without a popup at all, that’s usually the better choice.
