• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WPCity.com

WPCity.com

WordPress Themes & Plugin Reviews, How To Guide & Tips

Menu
  • Blogging
    • Blogging Reviews

      You’re looking for one of the best blogging courses right now. You simply want your business to grow without making critical errors. This is a great time to start or grow a blog.

    • How To

      • Start A WordPress Blog
      • Monetize a WordPress Blog
      • Best Blogging Courses
      • Blog Setup Services
      • Blogging Tools
      • Best WordPress Blogs
  • Web Hosting
    • Web Hosting Review

      Which is the best host for small business owners, and which should you avoid? Read our reviews to find out and see what customers have to say.

       

      Host vs Host

      • SiteGround vs Bluehost
      • SiteGround vs A2Hosting
      • SiteGround vs WP Engine
      • SiteGround vs DreamHost
      • Bluehost vs HostGator
      • DreamHost vs Bluehost
      • HostGator vs GoDaddy
    • Best Hosting

      • Best Web Hosting Providers
      • Best WordPress Hosting
      • Best Web Hosting for Beginners
      • Best Web Hosting for Blogs
      • Best Hosting for Small Business
      • Best Hosting for Food Blogs
      • Best Hosting for Photographers
      • Best Hosting for Travel Blogs
      • Best Hosting for WooCommerce
      • Best Cheap Hosting for Bloggers
      • Best PHP Hosting Providers
      • Best Magento Hosting Providers
    • Others

      • Hostwinds
      • InMotion

       

      WordPress Hosting

      • WPX Hosting
      • SiteGround
      • Bluehost
  • Themes
    • WordPress Themes Review

      Discover the best WordPress themes to choose from for your business and how to pick them wisely. Making your website look the way you want is a robust process. Choose a suitable theme, and the process becomes far easier.

    • Best Themes

      • Best WordPress LMS Themes
      • Best LearnDash Themes
      • Best Multipurpose WooCommerce Themes
      • Best WooCommerce Fashion Themes
      • WordPress Small Business Themes
      • Education WordPress Themes
      • eCommerce WordPress Themes
      • Genesis Child Themes
      • Free Genesis Child Themes
    • VS

      • Genesis Theme vs Astra
      • Genesis Theme vs GeneratePress
  • Plugins
    • Top Plugins

      • Best WordPress Page Builder
      • Best WooCommerce Plugins
    • WooCommerce Plugins

      • Best WooCommerce Plugins
      • Best WooCommerce Coupon Plugin
      • Best WooCommerce Subscription Plugin
      • Best WooCommerce Review Plugin
      • Best WooCommerce Multi Vendor Plugin
    • Others

      • WooCommerce
      • Elementor
      • Genesis Plugins
      • LMS
      • Membership
      • Page Builder
      • WordPress CRM
  • Deals
  • More
    • Reviews

      • HappyForms Review
      • Paid Memberships Pro Review
      • Paid Member Subscriptions Review
      • S2Member Pro Review
      • Wishlist Member Review
      • MemberMouse Review
    • CRM Software

      • Zero BS CRM Review
      • Hubspot CRM Review
      • Agile CRM Review
      • Maximizer CRM Review
      • Zoho CRM Review
      • Capsule CRM Review
    • Guides

      • WordPress Statistics
      • Speed Up WordPress Site
      • Secure A WordPress Website
      • Recover Hacked WordPress Website
      • Install WordPress on Windows
      • Add Custom CSS to WordPress
      • Add Custom Fonts to WordPress
      • Install a WordPress Theme
  • Shop
  • SiteGround Discount
Home » How to Add a Popup With Elementor in WordPress Site 2022

May 17, 2020 by Editor Team Leave a Comment

How to Add a Popup With Elementor in WordPress Site 2023

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:

  • How to Add an Elementor Popup Template to Your Site
  • Wrap Up

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:

  • How to Get Started With Elementor
  • Elementor Pro Discount
  • Elementor vs Elementor Pro
  • How to Use the Elementor Free Page Builder
  • How to Use the Elementor Theme Builder
  • How to Create a Countdown Popup Using Elementor
  • Create a Cookie Consent Popup Using Elementor
  • How to Create an Under Construction Website Using Elementor
  • How to Create a Login Form Popup With Elementor
  • How to Create a Subscribe Form Popup With Elementor
  • How to Create a Related Popup Using Elementor
  • How to Create a Mega Menu WIth Elementor
  • How to Set Up Important WooCommerce Pages With Elementor

Filed Under: Elementor, Tutorials

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

elementor

wpengine

top wordpress blogs

  • Facebook
  • GitHub
  • Instagram
  • Pinterest
  • Twitter
  • YouTube

Recommended Articles

  • WordPress Statistics
  • Best WordPress Page Builder Plugins
  • Best WordPress Themes for Small Business
  • Best LearnDash Themes
  • Best Education WordPress Themes
  • Best WordPress LMS Themes: Excellent Ways to Manage Learning Content
  • Best WordPress Website Examples for Design Inspiration
  • Essential Addons for Elementor : Is It The Best Elementor Addons Plugin?
  • Genesis Framework Review: Is It Still Worth the Hype?
  • Best Genesis Child Themes
  • Best Genesis Framework Plugins
  • Best Blogging Courses That Will Help You Succeed
  • Best Blog Setup Services
  • Best Multipurpose WooCommerce Themes
  • Best WooCommerce Fashion Themes
  • Best eCommerce WordPress Themes for WooCommerce

Recommended Hosting

  • WP Engine – Managed WordPress Hosting
  • SiteGround – Powerful WordPress Hosting
  • WPX Hosting – Fastest WordPress Hosting

E-mail Newsletter

Footer

Browse Topics

  • Blogging
  • Coupons
  • Elementor
  • Genesis Framework
  • Guide
  • Gutenberg Blocks
  • Hosting
  • Interviews
  • Membership
  • News
  • Plugins
  • Reviews
  • Resources
  • Security
  • Software
  • Themes
  • Tutorials
  • Tips
  • Tech
  • WordPress LMS
  • WP Page Builder
  • WooCommerce

Get to Know Us

  • About
  • Contact
  • Privacy

Search

Copyright © 2023 · WPCity.com

x
x