How to Create Popups in Elementor with Triggers and Display Conditions

Popups have a bad reputation, and honestly, a lot of them deserve it. You open a page, and before you have read a single sentence, a giant box asks for your email. You close it, scroll a little, and another one appears.

Used well, though, popups are one of the most effective tools on a website. A discount shown to someone about to leave, a cookie notice that respects the visitor, a login form that opens from a menu link. The difference between annoying and helpful is almost always about timing and targeting.

Elementor Pro's Popup Builder gives you precise control over both. In this tutorial you will create a popup from scratch, choose where it appears with Display Conditions, decide when it opens with Triggers, and fine-tune who sees it with Advanced Rules.

What You Need

The Popup Builder is part of Elementor Pro. Popups are saved as templates, so you design them once and reuse them across the site. You can find them in your WordPress dashboard under Templates > Popups.

Step 1: Create the Popup

1. Go to Templates > Popups and click Add New Popup.
2. Give it a descriptive name, for example Exit Offer 10 Percent. Clear names save time when you have a dozen popups later.
3. Pick a ready-made design from the library, or close the library to start from a blank canvas.

Step 2: Design the Layout

Before adding content, click the gear icon to open the popup's own settings. This is where you control the shape of the box itself:

• Width and Height: choose "Fit to Content" for most popups so the box grows with the text.
• Position: center for important messages, bottom corners for gentle nudges, top or bottom bars for announcements.
• Overlay: a semi-transparent background behind the popup that focuses attention. Turn it off for slide-ins.
• Close Button: always keep one, and make sure it is easy to see on mobile.
• Entrance and Exit Animation: a short fade or slide feels polished. Avoid long, bouncy animations.

Then add your content. A good popup has three parts: a short headline, one sentence explaining the benefit, and a single clear action such as a button or a two-field form.

Step 3: Set Display Conditions

Click Publish. Elementor opens the Publish Settings window with three tabs. The first is Conditions, which decides on which pages the popup is allowed to appear.

• Entire Site for site-wide notices.
• Singular to target specific pages, posts, or post types, such as all product pages.
• Archive to target category, tag, or shop pages.

You can stack conditions and add exclusions. For example: include all blog posts, but exclude the post that already has the same offer in its content.

Step 4: Choose Triggers

The Triggers tab decides the moment the popup opens. The main options are:

Trigger	Best for
On Page Load (with delay)	Announcements, after a few seconds rather than instantly
On Scroll (percentage)	Offers shown to readers who are clearly engaged
On Scroll to Element	Content upgrades that appear when the reader reaches a specific section
On Click (number of clicks)	Rarely needed; usually a link is better
After Inactivity	Gentle reminders when a visitor stops interacting
On Page Exit Intent	Last-chance offers when the cursor heads toward the browser bar

Pick one or two triggers at most. Combining many triggers makes the popup unpredictable and harder to test.

Keep in mind that exit intent relies on mouse movement, so it works best on desktop. For mobile visitors, a scroll-based trigger is usually a better substitute.

Step 5: Add Advanced Rules

The third tab, Advanced Rules, is what separates thoughtful popups from annoying ones. Useful rules include:

• Show after X page views so first-time visitors can explore before being asked for anything.
• Show after X sessions to target returning visitors.
• Show up to X times so the same person does not see the popup forever.
• When arriving from a specific URL or from search engines, external links, or internal links.
• Hide for logged in users so members and customers are not pitched the same signup offer.
• Show on devices to create separate popups for desktop and mobile.

Click Save & Close and the popup is live.

Opening a Popup from a Button or Menu Link

Many popups should not open automatically at all. Think of a contact form, a video, or a newsletter signup that opens only when someone clicks "Subscribe".

1. Create the popup and leave the Triggers empty. You can still set Display Conditions so the popup is loaded on the right pages.
2. Edit the page with the button and click the dynamic icon in the button's Link field.
3. Choose Popup under Actions, then open the tag settings and select your popup with the action "Open Popup".

For menu items, which do not have a dynamic link field, use the popup's Open By Selector option in the Advanced settings. Give the menu item a CSS class such as open-subscribe, then enter .open-subscribe as the selector.

Useful Popup Settings People Often Miss

In the popup's Advanced settings you will find several small options that make a big difference:

• Avoid Multiple Popups: prevents this popup from appearing when another one is already open.
• Prevent Closing on Overlay and Prevent Closing on ESC Key: use these only for important confirmations such as age gates.
• Automatically Close After: handy for short "Thanks!" messages.
• Disable Page Scrolling: keeps the page still behind a full-screen popup.

Design and UX Tips That Keep Visitors Happy

• Delay first impressions. Wait for at least a few seconds or a decent scroll depth before showing anything.
• Offer real value. A discount, a free template, or a useful checklist works far better than "Join our newsletter".
• Keep forms short. Email only, or name and email at most.
• Respect mobile screens. Large center popups that cover the content can hurt the mobile experience. Use smaller slide-ins or bottom bars on phones.
• Track results. Connect your form to your email tool and compare signups before and after changes.

Troubleshooting

• The popup never appears. Check that it is published, that a Display Condition matches the page, and that you are not excluded by an Advanced Rule such as "Hide for logged in users".
• It appears once and never again. A "Show up to X times" rule is counting your visits. Test in a private browser window.
• The click link does nothing. Make sure the popup has a Display Condition for that page, otherwise it is not loaded there.
• The popup opens behind other elements. Check the z-index of sticky headers or other plugins and lower them if needed.

Wrapping Up

The Popup Builder is powerful precisely because of its targeting. Choose the right pages with Conditions, the right moment with Triggers, and the right people with Advanced Rules. Do that, and your popups will feel less like interruptions and more like a helpful nudge at exactly the right time.