The complete guide to Elementor popups (and how to create them)

This article will provide an overview of all the types of Elementor popups and why you may want to make use of these popups. Then, we'll explain how to make these popups with both the basic or professional Elementor tools. Let's get started!

An Overview of Elementor Popups

In addition, Elementor enables you to create a variety of popups. They're custom-designed types that will appear at an established time or when a user has completed an step.

Moreover, popups can assist you in connecting to your clients. It is possible to embed surveys in your popups to get feedback from your customers to help you improve your offerings and services.

But, they can also feel unprofessional and invasive If you do not design properly and select appropriate triggers to your audience. Therefore, you'll need to ensure that you are using effective popups. This is where Elementor is available.

Types of Elementor Popups

Elementor has more than 100 popup designs that you can personalize according to your requirements. These designs include:

• Lead capture forms
• Promotional pop-ups
• Forms for logging in and welcoming
• Restricted content popups
• Forms for cross-selling and upselling

These popup templates come built inside Elementor kits, which include various designs for various kinds of sites:

Furthermore, you can choose from different popup placements as well as visual styles, such as:

• Modal
• Slide-in
• Fullscreen
• Bars with top or bottom

Finally, you can use the Elementor editor to swiftly alter any popup templates to fit your needs. In this article, we'll show the steps to do this with free and Elementor Pro.

How to create a popup using Elementor (Free)

Before, the Essential Addons for Elementor plugin had an Modal Popup feature that enables users to make a completely free popup. This was one of the most used methods to bypass paying for Elementor Pro. There are a lot of tutorial videos from a few years ago that show how you can use this technique.

The free Modal popup functionality has evolved into an expensive Lightbox as well as a Modal element. The feature is no longer available for accessible for free. This means that you'll need upgrade to Elementor Pro, or purchase one of the premium Elementor plugins that we cover in the next section of this article.

How To Design an Elementor Pro Popup Elementor Pro (in five easy steps)

Elementor Pro comes with an in-built Popups option that we'll employ in this video. First, you'll need to buy and install the Elementor Professional feature. After that, head onto your WordPress dashboard to get started with making popups.

Step 1: Create Your Popup

Begin by going through Elementor > Templates > Popupsin the WordPress dashboard. Click on "ADD NEW" POPUPto create a new one.    BBEJGJJrCktfTWZencCc    Go to "Templates" then "Add New Popup"

Then, you'll be asked to name your template. Once you've decided on the name you want to use, click CREATE TEMPLATE:

It will open the Elementor page builder. You can now choose from the existing popup template designs or build your own from scratch. For our instance, we've chosen one of the templates that we can edit.

Now you can play using the design options to alter the look of your pop-up. For example, you can modify its layout, alignment, background images and colors.

Step 2: Pick Your Display Condition

If you're pleased with your design then click the up-facing Arrow next to PUBLISH. Then, select the Display Conditionsfrom the menu:

After that, press ADD CONDITIONto choose where your Elementor popup will appear on your site. You can then select a location among the options available: Entire Site, Archives, Singular, or WooCommerce:

When you're happy with your choice, hit Next. You'll be taken to the Triggers for your popup form.

Step 3: Configure Your Popup Triggers

In the Triggers page, you are able to decide what users need to do to view your Elementor popup. By default, each option is off and it is possible to enable it by clicking the slider. After that, you'll have to enter values for the trigger.

For example, if you choose the On-Page Load option, you'll need select within the span of seconds the pop-up will appear:

On Scroll, with On Scroll, you can choose which direction the user needs to go in, and also how much of the page they must complete before the popup pops up:

The On Scroll to Element setting requires the user to input a CSS ID. Once a user has reached that element on your page it will display a popup that reads:

With OnClick, you'll have to define how many times a user must click on your web page before the pop-up displays:

The after-inactivitysetting enables you to trigger your pop-up when users have been unoccupied on your website for a specific amount of time:

Finally, you can opt to activate the On Page Exit Intent. This will trigger your popup when the user attempts to leave the page

Click SAVE and closeor next for navigating into the Advanced Rules when you're finished. This tutorial will go over these rules more further in this guide.

Step 4. Add a popup Button on Your Website (Optional)

In the beginning, you'll have to create an Elementor button on your site. Start the page or post within the Elementor editor and then select the button from the menu. Drop it on your webpage:

Once you've specified the button text and customized its appearance Click on Link > Dynamic Tags. Then, choose Actions > the pop-up on the dropdown menu.

Want to know how we increased our traffic over 1000 percent?

Join the 20,000+ who receive our newsletter every week with insider WordPress tricks!

Click on the Popupand select Open Popup in the Actiondropdown. You can also select your form from your Popupmenu:

Finally, select the option to post your button. Whenever a user clicks on it, they'll be taken to your sign-up form.

Step 5. Save your Popup Templates for Later

You can also save your popups to templates. Start your popup using the Elementor editor, and then click the upward arrow next to UPDATE. Choose Save as Template from the menu

You'll then be prompted to choose a name for your template. When you're done clicking Save:

The popup will be added in your Template Library. You can now use it when building a page or post with templates.

How To Configure Advanced Elementor Popup Settings

We already covered how to make a basic Elementor popup. However, there are also some advanced settings that may be beneficial to utilize.

Start your popup once more using the Elementor editor. Then, navigate to Display Rules. Let's look over the different settings.

Popup Display Settings

Some advanced popup display settings allow you to regulate when visitors view your page. These configurations could be handy to focus on returning visitors more than new visitors.

In this case, you could opt to display your popup after your visitor has viewed your page a certain number of times:

You can also choose to the option to display after X sessions. This setting targets overall visits instead of specific pages

The Show up to X times setting can limit how people will be able to view your pop-up. Consider enabling it so that you do not bombard users with annoying forms constantly:

User Origin Settings

In addition, Elementor enables you to customize the popup's display settings based the location your visitors are from. The settings can prove useful if you direct visitors to a promotional landing page using your pop-up to promote deals or ask to get contact details.

The settings below allow you to specify URLs and pick which URLs are triggered by pop-ups.

If you're satisfied with all your configurations, hit SAVE & CLOSE. It is possible to return here and alter the settings should you need to.

The Top 3 plugins for Elementor Popups

We've seen that Elementor Pro makes it easy to create popups for your site. However, you might not yet be ready for the upgrade web page creator. Or, perhaps you are searching for more design options.

Here are a few of the top plugins to use for Elementor popups with those considerations with an eye on.

1. JetPopUp (Crocoblock)

JetPopUp is an easy-to-use plugin with a drag-and-drop interface which is compatible with Elementor. The plugin lets you create dynamic and customized pop-up forms that include forms for email signups, cookie consent forms and countdowns.

JetPopUp is a standout due to its interactive features. It lets you choose between a variety of types of animations like shifting, flipping, or turning. Moreover, the plugin has various templates that you can modify to meet your specific needs.

This plugin also lets you set and adjust different display options. You can, for instance, show your JetPopUp forms to users on particular dates at which they are attempting to leave your website, or after a specific amount of scrolling.

  Features:  

• Pick from predefined pop-up templates
• Select different popup display conditions
• Include and exclude specific conditions
• Use animation effects

Pricing:JetPopUp costs $22 annually. The package comes with MailChimp integration as well as a popup widget as well as customer service. You can also upgrade to an all-inclusive subscription at $130 per year. This subscription comes with 20 additional plug-ins as well as 150 additional widgets.

2. Popup Box Widget (PowerPack)

If you're looking for more advanced Elementor popup configurations, you should consider making use of the Popup Box Widget from PowerPack. You can create custom popups which include elements that are dynamic like videos, images, and Google maps.

The plugin lets you activate popups in response to different users' actions, like the intention to exit and your own custom delays. It also lets you create interactive two-step popups with the use of links, as well as other elements from Call to Action (CTA).

Additionally, the Popup Box Widget has advanced animation settings. It is possible to make popups expand, apply newspaper format, or employ 3D animations.

  Features:  

• Select from animation effects
• Make pop-ups with two steps
• Time delays for use and user triggers
• Video, images as well as other elements that are interactive

Prices:Popup Box Widget is included with a PowerPack membership. The plans start at $49 per year and offer more than 70 different Elementor widgets.

3. Lightbox & Modal (Essential Addons for Elementor)

The topic was briefly mentioned in the Elementor popup plug-in before. Lightbox and Modal is a flexible widget using it's Essential Addons for Elementor tool. It lets you make popups with interactive features like pictures, videos as well as animations.

Lightbox & Modal is designed to work with links and buttons that are that you have on your Elementor website. You can create customized buttons, icons as well as text, that activate the popup form. Additionally, the widget is able to use time delays and other user actions.

Overall, Lightbox & Modal could be the ideal solution to engage with your users instead of just presenting information.

  Features:  

• Make use of button triggers to create popups.
• Video, images or custom content
• Customize popup layouts
• Choose from different animation types

Pricing:Lightbox & Modal is part of Essential Addons for Elementor Pro. The plans begin at $39.97 per year and have more than 70 widgets as well as seven extensions.

Summary

Popup forms are essential for your lead generation and marketing campaigns. They can also help you interact with visitors and ensure they stay engaged on your site. You can make custom popups with the Elementor page builders.

It's easy to design popups with Elementor Pro. You can customize them to reflect your brand and decide where they display on your site. Additionally, you can alter the display settings of your advanced popups to display your popup depending on the actions of users and their origins.

Save time, costs and improve site performance by:

• 24/7 help and support 24/7 support from WordPress hosting experts, 24/7.
• Cloudflare Enterprise integration.
• The global reach of the audience is enhanced by 34 data centers across the globe.
• Optimization with our built-in Application for Performance Monitoring.