A Beginner’s Guide on How to Create an Elementor Popup

What are Elementor popups?

Elementor is a highly favored page builder plugin for WordPress, known for its drag-and-drop functionality that allows users to easily design attractive and intuitive web pages.

In addition to page building, Elementor offers robust tools for creating various popups. These pop ups can automatically appear after a set duration or in response to specific user actions, enhancing user engagement on your site.

Popups serve several valuable functions. They can be used to gather leads, helping to grow your email marketing database as they can be integrated directly with your preferred email marketing software to make the process easier.

They’re also effective for promoting sales, special discounts, or events within your e-commerce platform, making them an important component of your marketing toolkit.

However, if not designed thoughtfully or triggered appropriately, popups can detract from the user experience by seeming intrusive or tacky. Crafting well-designed popups with strategically chosen activation conditions is important, and Elementor provides the tools necessary to implement pop ups effectively, ensuring they add value for both the user and your business.

Types of Elementor Popups

Elementor provides over 100 customizable popup templates, catering to a variety of needs. These templates include options for:

• Lead capture forms
• Email signup popups
• Promotional pop ups
• Login and welcome forms
• Restricted content popups
• Upsell and cross-sell forms

These templates are part of Elementor kits, which are collections of design elements tailored for different types of websites. Also, Elementor allows you to choose from several types of popup placements and styles, such as:

• Modal popups – A modal, also known as a modal window or lightbox, is a web page element that appears over and deactivates all other content on the page. Users must interact with the modal, either by completing an action or closing it, to return to the main content.

Example of a modal popup

• Slide-in popups – A slide-in is a less intrusive type of popup that typically emerges from the side or corner of the screen while you navigate a website. It often features a concise call-to-action, which may include forms, buttons, or links designed to capture leads, enhance sales, and improve conversion rates.

Example of a slide-in popup

• Fullscreen popups – A full-screen popup is a type of graphical user interface (GUI) display that suddenly appears as a window, covering the entire screen of the user’s device.

Example of a fullscreen popup

• Top or bottom bars –  Engage with visitors using top and bottom bars, another subtle option to traditional popups. These bars are displayed at the top or bottom of the webpage and can appear when a visitor arrives. They may stay visible for a set period or until the visitor chooses to close them with a click.

Example of a top or bottom bar

5 easy steps to create a popup with Elementor 

Before we start, keep in mind that you will need to purchase and activate Elementor Pro for this tutorial. If you need a guide on how to download Elementor on your WordPress site, you can check our step-by-step tutorial. We’ll also be featuring a bonus guide on how to create a popup in WordPress for free, if you want to go with that option.

Step 1: Add a new popup

Begin by heading to Elementor > Templates > Popups in your WordPress dashboard. Click on “ADD NEW POPUP” to start creating a new one. 

You will be prompted to name your template. After naming it, click on “CREATE TEMPLATE”. This action opens the Elementor page builder. 

Here, you have the option to select from pre-designed popup templates or create your own from scratch. For this example, let’s assume you’ve selected a pre-existing template to modify:

Choose a pre-designed popup or create new. Pick from templates or start from scratch to customize.

Now, you can customize your popup by adjusting various design settings. For instance, you can modify the layout, alignment, background images, and colors to suit your preferences.

Step 2: Choose where to show your popup

After finalizing your design, click on the upward-facing arrow next to the PUBLISH button. From the dropdown menu that appears, select “Display Conditions”:

Click the arrow by Publish, select Display Conditions. Set rules for when a popup appears.

Then, click on “ADD CONDITION” to specify where on your website the Elementor popup should appear. You have several location options to choose from, including Entire Site, Archives, Singular, or WooCommerce:

Select ‘Add Condition’ to choose where popup appears

Once you’re satisfied with your selection, click “NEXT.” This will take you to the setup page for Triggers for your popup form.

Step 3: Set up your popup triggers

On the Triggers page, you can set the conditions on how users will encounter your Elementor popup. Before editing, all options are turned off, and you can activate each by toggling the slider. Once enabled, you’ll need to configure the specific settings for each trigger.

• On Page Load: Set a delay in seconds for when the popup will appear after the page loads. 
• On Scroll: Define the scroll direction and the percentage of the page the user needs to scroll before the popup displays. 
• On Scroll To Element: Specify a CSS ID for the page element. A CSS ID is a selector used in Cascading Style Sheets (CSS) to target and style a specific HTML element on a webpage. The popup appears when the user scrolls to this element. 
• On Click: Determine the number of clicks required on your website before the popup triggers. 
• After Inactivity: Choose how long the user must be inactive on the page before the popup shows. 
• On Page Exit Intent: Activate this to have the popup appear when the user attempts to leave your page. 

Toggle triggers to decide when users see Elementor popup. Configure settings for each trigger.

Once you’ve configured your triggers, click on “SAVE & CLOSE” or “NEXT” to proceed to the Advanced Rules section, which we’ll cover later in this tutorial.

Step 4: Add a popup button to your site (Optional)

You may want to set up your Elementor popup to activate when a user clicks on a specific element on your page, such as a “Sign Up Now” button placed in your footer. Clicking this button could display an email registration form on their screen.

Here’s how to set it up:

1. Create a Button: Open the post or page in the Elementor editor. Go to the menu and select the Button widget. Drag and drop it onto your page where you want it.

Drag the Button widget from the menu onto your page where needed

2. Customize the Button: Enter the text for your button and customize its design to match your site’s style.

3. Set the Click Action: Click on the ‘Link’ option, then go to ‘Dynamic Tags’. From there, select ‘Actions > Popup’.

4. Configure the Popup Trigger: Click on ‘Popup’ and then from the ‘Action’ dropdown, select ‘Open Popup’. You can then choose your specific form from the ‘Popup’ menu.

5. Publish: Once everything is set, click ‘UPDATE’ to publish your changes.

Now, whenever a user clicks the button, it will trigger the popup displaying your signup form.

Step 5: Save your popup templates for later

You can save your popups for future use by creating templates. Here’s how to do it:

1. Open your popup: Launch the popup you’ve created in the Elementor editor.

2. Save as template: Click on the upward arrow next to the “UPDATE” button. From the dropdown menu, select “Save as Template.”

Save your design as a template by clicking the arrow near ‘UPDATE’ and choosing ‘Save as Template’

3. Name your template: You will be prompted to name your template. Enter a suitable name.

4. Save the template: After naming your template, click on “SAVE.”

Your popup will now be stored in your Template Library. You can easily access and reuse it when constructing pages or posts using templates.

How to configure advanced settings for elementor popups

While we’ve already discussed creating a basic Elementor popup, let’s get into some advanced settings that could enhance your popups further.

Start by navigating back to your popup in the Elementor editor and go to ‘Display Rules’ to explore different options.

Advanced popup display settings

Advanced settings help you control when and how often your popup appears to users, which can be especially useful for targeting return visitors instead of first-timers.

• Display After Multiple Views: Set your popup to appear only after a visitor has viewed your page a certain number of times.
• Show After X Sessions: This option allows the popup to appear after a visitor has visited your site a specified number of sessions, targeting overall visits rather than specific page views.
• Limit Popup Displays: Use the ‘Show up to X times’ setting to restrict how many times a popup is shown to a user, which helps avoid overexposure and potential annoyance.
• Device and Browser Specific Display: With ‘Show on devices’ and ‘Show on browsers’, you can control on which devices or browsers your popup will appear. Considering deactivating popups on mobile devices may enhance mobile user experience and improve mobile SEO.

User origin settings

Edit your popups based on the origin of your site visitors, which is particularly useful if you’re directing traffic to a promotional page and want to use popups for advertising deals or gathering contact details.

• URL Triggers: Specify URLs that trigger the popup, selecting which links upon interaction will open the popup.
• Exclude Logged-in Users: If you operate a membership site, consider hiding popups from logged-in members to provide a cleaner experience.

Once you’re satisfied with your configurations, click “SAVE & CLOSE”. Remember, you can always return to these settings to make adjustments as needed. 

Top 3 plugins for Elementor popups

Elementor Pro simplifies the process of creating popups on your website, but if you’re not ready to invest in the premium version or are looking for advance design features, consider these top plugins for enhancing Elementor popups:

JetPopUp (Crocoblock)

JetPopUp offers a seamless integration with Elementor through its user-friendly, drag-and-drop interface. It allows for the creation of dynamic and customized popup forms such as email signups, cookie consent forms, and countdowns. The plugin has interactive features and multiple animation options like sliding, flipping, and rotating, and comes with customizable templates.

Features:

• Preset popup templates
• Varied popup display conditions
• Animation effects

Pricing: JetPopUp costs $22 per year, including MailChimp integration, a popup widget, and customer support. An all-inclusive subscription is available for $130 per year, offering 20 additional plugins and 150 extra widgets.

Popup Box Widget (PowerPack)

For advanced Elementor popup functionalities, Popup Box Widget by PowerPack is an excellent choice. This plugin allows you to create custom popups with dynamic elements like videos, images, and Google maps, and supports various trigger actions like exit intent and custom time delays.

Additionally, the Popup Box Widget offers advanced animation settings. You can enhance your popups with effects such as zooming, newspaper-style formatting, or 3D animations.

Features:

• Animation effects
• Interactive two-step popups
• Time delays and user triggers
• Interactive elements display

Pricing: Popup Box Widget is part of the PowerPack subscription, starting at $49 per year with access to over 70 different Elementor widgets.

Lightbox & Modal (Essential Addons for Elementor)

Lightbox & Modal from Essential Addons for Elementor offers versatility in creating popups that include interactive features such as videos, images, and animations. This widget is designed to work with buttons, icons, and text links on your Elementor site, allowing for custom triggers and user actions.

Features:

• Button triggers for popups
• Display of images, videos, and custom content
• Customizable popup layouts
• Variety of animation types

Pricing: Lightbox & Modal is included in Essential Addons for Elementor Pro, with plans starting at $39.97 per year, which includes more than 70 widgets and seven extensions.

These plugins offer robust alternatives to Elementor Pro for users looking to enhance their website with creative and effective popups, providing a range of options to suit different needs and budgets.

Bonus: How to create a free popup in WordPress 

If you’re looking for a method that allows you to create a popup form directly from your WordPress dashboard, follow these steps below:

Step 1. Install Popup Maker and WP Forms

For this tutorial, you will need Popup Maker and WPForms. If you need a guide on how to install plugins, you can check our step-by-step guide right here. Just change the plugin to Popup Maker and WPForms.

Install Popup maker and WPforms

Step 2: Create a form

Before you can create a popup, you need to first set up a form using WPForms. This guide is compatible with any version of WPForms, including the free WPForms Lite.

It’s important to note that while WPForms Lite can send form entries via email, it does not store them within WordPress. If you need to export your form entries to other platforms in the future, consider upgrading to WPForms Pro. To start, go to WPForms in the WordPress dashboard and click ‘Add New’

Go to WPForms in the WordPress dashboard and click ‘Add New’

Once you’re ready, you’ll be presented with the form setup screen, which offers various templates. For a popup form, it’s best to keep the number of fields minimal. A short and compact form is more suitable for display on smaller screens. As a starting point, we’ll use the Simple Contact Form template.

Choose a ‘Simple Contact Form’ template for your popup

This template will automatically load into the form builder screen and includes just the Name, Email, and Paragraph Text fields—sufficient for our current needs.

Once you are satisfied with your form’s appearance, make sure to save your changes.

Step 3. Create a popup in Popup Maker

To create a popup using the Popup Maker plugin, follow these steps

1. Navigate to your dashboard: Go to your WordPress dashboard and click on Popup Maker » Add Popup. This will bring up the popup editing interface.

Access popup creation in WordPress dashboard, selecting Popup Maker » Add Popup for editing

2. Name your popup: Enter a name for your popup. You can also provide a display title like in our example.

3. Insert Your Form: Click on the ‘Add Form’ button to choose the form you want to include in your popup.

Select the form you want to add

4. Select the Form: An ‘Insert Form’ screen will appear where you can select the desired form from a dropdown menu.

5. Add the Form to Your Popup: Once you’ve selected the form created with WPForms, click on the blue ‘Add Form’ button to embed it into your popup.

6. Use the Unique Shortcode: After adding the form, a unique shortcode will be displayed. This shortcode links your form to the popup. If necessary, you can change the form ID in the shortcode at any time to switch to a different form.

Unique shortcode generated to link form with popup after addition.

Step 4. Set up your triggers

Now, let’s get into customizing your popup settings by focusing on Triggers.

Triggers define when your popup should open, such as upon exiting the page or while scrolling down. To set this up, click on the blue ‘Add New Trigger’ button.

In the trigger options window, open the dropdown menu and choose ‘Time Delay/Auto Open.’ This setting will make the popup appear after your visitors have been on the page for a specified duration.

We recommend setting it to 5 seconds (5,000 milliseconds). Once you’ve set the time, click the ‘Add’ button to proceed.

Select ‘Time Delay/Auto Open’ from trigger options. Set 5 seconds delay for popup appearance. Click ‘Add’ to confirm.

By default, this popup will appear on every page of your WordPress site and be visible to everyone on all devices.

You can fine-tune these settings to target specific groups, devices, or locations (like specific posts or pages) under the ‘Targeting’ section. For more detailed configurations, you may want to consult the Popup Maker documentation.

Step 5. Edit the appearance

Next, let’s enhance the appearance of your popup by navigating to the ‘Display’ settings within the popup options.

From the ‘Popup Theme’ dropdown, choose a theme that suits your popup. There are various themes available, but for this example, let’s go for the Light Box style.

From the ‘Popup Theme’ dropdown, choose a theme that suits your popup

Feel free to tweak any other settings to your liking. Once everything is set, you’re ready to publish your form.

Step 6. Publish the Popup Form

To make your WordPress popup form go live, scroll to the top of the page and click on the “Publish” button.

Now you’ve done it! You can preview your WordPress popup form to ensure it appears exactly as you envisioned. Feel free to tweak any settings if necessary.

Preview your WordPress popup form to check its appearance.

If you wish to create additional contact form popups, simply repeat this process. You can customize the settings and display rules for different posts, pages, or even get creative with a popup WordPress survey.

To monitor the performance of your popup, return to the edit page to check the Analytics section. This will show you how many people have viewed your WordPress popup form.

Check performance stats in the Analytics section to track views of your WordPress popup form

Additionally, if you have Google Analytics set up on your site, you can track interactions with your Popup Maker popups through custom event tracking.

That’s it! We hope this guide has helped you learn how to create a WordPress contact form popup effectively.