WPCity.com

WordPress Themes & Plugin Reviews, How To Guide & Tips

Home » How to Add a Popup With Elementor in WordPress Site 2020

by Leave a Comment

How to Add a Popup With Elementor in WordPress Site 2021

You can easily add a popup with Elementor and transform the way your website interacts with visitors. And the best part is that you do not have to be an expert at coding or hire one.

Whether it’s signing up for your email list or any other action you would want the visitor to take, how you ask will determine if you get a positive or negative response. It also determines if they will respond at all.

Elementor allows you to customize your popups to make them professional and match your brand. You can determine how they interact with your visitors by setting triggers and conditions.

This plugin is one of the best page builders for WordPress. It is easy to use and intuitive. Its design capabilities make it possible to create a user-friendly website.

It comes with over 125 popup templates. All you have to do is choose the one that meets your needs best.

Here’s a quick index to help you navigate this article:

Let’s dive in.

Follow Our Step by Step Guide to Learn How to Add an Elementor Popup Template to Your Site

  1. First, log in to your WordPress dashboard.
  2. Then go to Templates > Popups.
  3. Finally, click on Add New Popup.
add new popup in elementor

After that, you will see a popup like the image below.

  1. Select the type of template you want to work on: Popup.
  2. Give a name to your template: WPCITY.
  3. Click on Create Template.
create a template to add a popup in elementor

You will then see the Elementor Library. You will find a new section of popup templates in the library and its name is Popups. There are 125+ premade popup templates.

From the left box, you can search by category to select from different types of popup templates, such as Bottom Bar, Classic, Fly-in, Full Screen, Hello Bar, Slide-in, and more.

Choose any one of the templates that you want to use.

choose a template from elementor library

When you move your mouse cursor to any popup, you will see a “+” icon.

  1. Simply click on the “+” icon to preview the template.
  2. Choose a template that meets your requirements.
  3. Next, click the insert button to add the template to your website.
edit a popup in elementor

See, a template has been added to our site.

On the left side, you will find the editing option. From here you will be able to edit the elements of your popup. You can change the heading, placeholder, text, create a new design for the form, and upload a new image.

You need to set up the email address that will receive all the messages and feedback submitted via the popup.

In brief, you can change everything that you want.

Now it’s time to configure the settings for how the template will behave on your website. You have to determine a total of 3 types of settings from here. Conditions, Triggers, and Advanced Rules.

Click the publish button from the left corner.

A new popup will come up for configuration.

Let’s do this together, step by step:

1. Conditions: This section lets you select where you want to show your popup. For example, if you want to display the popup everywhere on your site, you have to select the Entire Site condition. However, if you want to show the popup on only one page or a specific set of pages, you have to enter the page names in the condition bar.

condition setting elementor

To add conditions to your popup, follow these few steps-

  1. Click the Add Condition button.
  2. Select a condition from the option bar.
  3. Last, click the Next button.

You can also set more than one condition by clicking the Add Condition button again.

After clicking the next button you will be redirected to the Trigger settings.

2. Triggers: Triggers are the actions, defined by you, that a user needs to take to open the popup. Here you will find several actions to set as triggers, such as On Page Load, On Scroll, On Scroll to Elements, On Click, After Inactivity, On Page Exit Intent, etc.

triggers setting in elementor
  1. Choose one or more actions that are needed to trigger your popup.
  2. Simply click the ON button of a tab to run an action.

Other settings, like the time option, will appear automatically after pressing the ON button.

After that, click the next button to go to advanced settings.

3. Advanced Rules: Advanced rules help you to assign requirements that have to be met for the popup to open. These could be: show after X page views, show after X sessions, show up to X times when arriving from specific URL, show when arriving from, etc.

advanced rules setting

You can hide the popup for logged in users and you also can show the pop-up to all devices (desktop, tablet, mobile).

  1. Select the rules that you need and press the ON button.
  2. Save the changes and close the settings popup.

Congratulations! You have successfully integrated a popup into your site.

Wrap Up: How to Add a Popup With Elementor

You do not have to be a coding expert to take advantage of the many features this plugin offers.

You can easily add a Popup with Elementor on your site, and our step by step instructions make things much smoother. It will not consume a lot of your time either.

You can customize the popup for the best user experience by adding images, headings, text, and place holders.

Elementor also allows you to add the actions or requirements needed to trigger the popup, and choose where you would want them to show up.

If you have any questions, feel free to contact us. And if WPCITY‘s this post helped you, kindly share it on Facebook, Twitter, and LinkedIn.

Others Elementor Tutorials:

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *