How to Use Pop-ups in Elementor

Elementor Pro gives you five popup display formats to choose from. Each serves a different use case and has different effects on visitor experience:

• Modal: A centered overlay with a semi-transparent background. Best for email opt-ins, special offers, and announcements. This is the most common popup format because it demands attention without leaving the page.
• Slide-In: Slides in from a corner or edge of the screen without fully blocking content. Less disruptive for first-time visitors who haven’t yet decided if they want to engage.
• Full Screen: Covers the entire viewport. Used for age verification gates, welcome mats, or major promotional campaigns where you need 100% focus on the message.
• Top/Bottom Bar: A sticky notification strip along the top or bottom of the screen. Works well for promotions, countdown offers, cookie consent notices, or shipping announcements that should stay visible as users scroll.
• Hello Bar: A minimal banner, similar to a top bar, typically used for announcements or short calls to action where you don’t need much real estate.

For list building, modals and slide-ins tend to convert best. Modals are more aggressive but deliver higher conversion rates; slide-ins are less intrusive and work well on content pages where interrupting the reader damages trust. For site-wide announcements, top bars keep the message visible without blocking any content.

Pop-ups in Elementor require Elementor Pro — this feature is not available in the free version. If you have already installed Elementor Pro and connected your license, you are ready to start immediately.

To access the popup builder, go to Templates → Popups in your WordPress dashboard. This screen shows all saved popup templates and the option to create a new one. From here:

1. Click Add New Popup
2. Give it a specific, descriptive name — for example, “Email Opt-in: Blog Posts” or “Exit Intent: Promo Code”
3. Set your popup dimensions. For most opt-in forms, a width of 550–700px works well on desktop, and Elementor handles mobile scaling automatically.
4. Click Create Template

The Elementor editor opens in a full-screen popup canvas. You can drag in any widgets: Heading, Text Editor, Form (Pro), Image, Button, or Countdown Timer. The canvas is a live visual editor — what you see is what will appear to visitors. Style everything to match your brand: fonts, colors, button text, spacing, and close button positioning.

Once the design is complete, configure where and when it shows using the Conditions and Triggers settings in the following steps.

Here is the full creation process step by step:

1. Go to Templates → Popups in your WordPress admin panel
2. Click Add New Popup and enter a name that describes both the purpose and the target page
3. Choose your popup dimensions. Recommended: 600px wide, height set to auto or around 450–550px for most opt-in designs
4. Click Create Template to open the Elementor editor
5. In the editor, design your popup content using drag-and-drop. Common elements include a Heading widget for your value proposition, a Form widget (Pro) connected to your email marketing service, and a Button widget for the CTA
6. In the Form widget settings, go to Actions After Submit to configure the confirmation email, and to Integrations to connect Mailchimp, ActiveCampaign, ConvertKit, or another email provider
7. Set the close button position under Style → Close Button. Outside the popup frame (top-right corner) typically has better UX than placing it inside the content area
8. Click the green checkmark to save your design before moving to conditions

You can also start from a pre-built Elementor popup template instead of designing from scratch. Browse the template library for popup designs to import and customize.

Conditions control which pages and content types the popup appears on. After completing your design:

1. Click Publish (or the gear icon next to the Save button)
2. Switch to the Conditions tab
3. Click Add Condition and choose your scope from the dropdown

Available condition types include Entire Site, Singular Post (blog posts only), Singular Page (specific pages by name), Singular Front Page (homepage only), and Archive Category (category archive pages).

You can stack conditions. For example, set “Include → Entire Site” and then add “Exclude → Cart” and “Exclude → Checkout” to prevent the popup from firing during the purchase flow, a pattern that reduces cart abandonment-related annoyance.

A practical starting point for email capture: target “Singular → Post” to show the popup only on blog posts, where visitors are already reading and most receptive to a relevant offer. Sitewide display tends to interrupt visitors who are actively navigating or completing a task. Click Save & Close after setting your conditions.

Triggers define the moment the popup fires, assuming the visitor is on a page matching your conditions. Open the Triggers tab and choose one or more:

• On Page Load: fires after a delay you specify in seconds. Avoid very short delays like 0–2 seconds; visitors need a moment to orient. 5–7 seconds is more appropriate for most content pages.
• On Scroll: fires when the visitor has scrolled a set percentage of the page (e.g., 50%). A visitor who has scrolled halfway through a blog post is genuinely engaged and more likely to convert.
• On Click: fires when a visitor clicks an element with a specific CSS ID or class. Use this to attach the popup to a “Download Free Guide” button anywhere on the page.
• On Inactivity: fires after the user stops interacting with the page for a set number of seconds. Useful for re-engagement on long content pages.
• On Exit Intent: fires when Elementor detects the cursor moving toward the browser’s navigation bar or close button. This trigger consistently delivers the highest conversion rates for lead capture because it reaches visitors at the decision moment without interrupting their reading.

You can combine multiple triggers — for example, “On Scroll (50%) OR On Exit Intent” — to catch both engaged readers and departing visitors. The popup only fires once per session by default unless you change the Advanced Rules.

Advanced Rules fine-tune who sees the popup and how frequently. Open the Advanced Rules tab to configure:

• Show After X Page Views — prevents the popup from firing on a visitor’s first page view. Setting this to 2 or 3 ensures the visitor has explored your site before being prompted.
• Show Once Every X Day(s) — adds a cooldown between repeat showings for the same visitor. A 7-day interval is common for promotional popups.
• Hide For Logged In Users — suppresses the popup for members, customers, or subscribers who are already in your system and don’t need to see an opt-in.
• Show to Users Who Haven’t Interacted — only shows to visitors who haven’t already submitted the form, preventing the popup from appearing to people who already converted.
• Source URL Contains — targets visitors arriving from a specific URL parameter or campaign UTM tag. Useful for campaign-specific offers that should only appear for paid ad traffic.
• Browser Cookie — shows only to visitors without a specific cookie, letting you suppress the popup for confirmed subscribers.

A sensible default for a new email opt-in popup: show once every 7 days, after 2 page views, hide for logged-in users. This avoids the popup feeling aggressive while still reaching new visitors who have not yet subscribed.

Once your conditions, triggers, and advanced rules are configured:

1. Click Save & Close on the conditions panel
2. Click Publish to make the popup live. Elementor handles all display logic automatically, with no additional plugins or server-side configuration needed.
3. Test it: open your site in a private or incognito browser window, navigate to a page matching your conditions, and trigger it using whichever method you configured.

If the popup doesn’t appear during testing, check: Is the page matching the conditions you set? Is the trigger delay long enough? Did you use a truly fresh incognito session? Is the popup published and not just saved as draft?

To edit the popup later, go to Templates → Popups, hover the template, and click Edit with Elementor. To deactivate a popup without deleting it, return to its Conditions tab and remove all conditions — it stops showing immediately.