fbpx
How to Make an Elementor Popup Easily

How to Make an Elementor Popup Easily

The creation of popups is one of the flagship options of the pro version of Elementor. Indeed if you do not have Elementor pro, you will need to install an additional plugin on your WordPress site. Let’s see the full process to make an Elementor popup:

The Advantages of the Elementor Pro Popup Option

You save the price of a module (between 10 and 50 dollars) and take advantage of a wide range of options to create your power windows.

You stay on the same Elementor pro-environment. The tools in Elementor are really easy to use, they all have the same logic. So you save time.

You benefit from Elementor pro updates, the functionality is included in the Elementor plugin, you do not have to manage multiple modules in your back office.

Elementor Popup Examples

The popup system uses the Elementor page builder, so you can do exactly what you want in terms of layout and content.

Simple Popup Ad Text and Image

It can be just an ad for a promo or a novelty, with text and an image.

elementor-popup

Popup Subscription to Your Newsletter

Capture e-mail with a registration form for your newsletter, you can completely integrate a code from your emailing manager (MailChimp, mail jet …)

A Contact Form, Reservation, Quote

Why not offer a contact or quote form via a popup? integrate the shortcode of your form7 contact form for example.

A Google Map

For example, you can make a button on your page: find us, and make the map appear large on the screen thanks to the popup.

Links to Your Social Networks

Encourage your audience to follow you on social media, or share your content.

A Countdown

The countdown is an element offered in Elementor pro, you can completely introduce it in a popup to highlight a promo limited in time.

The Elementor Popup Options

The Formatting of the Elementor Popup

Thanks to the page builder, you can precisely define its shape and layout.

The Position of the Popup

In the adjustment tab, you have the possibility to precisely define the position of the popup, left, right, top, bottom, or center, but also its size.

The Responsive

Elementor offers all imaginable possibilities to ensure that your popup is perfectly adapted according to the medium (tablet, smartphone). To avoid having a popup that is too big for the phones.

The Popup Display Conditions

“Display conditions” allows you to choose on which pages of your site the popup should be displayed.

What actions must the user take for the popup to appear automatically?

  • When does the page load?
  • On the page scroll?
  • When arriving at an item?
  • After how many clicks?
  • After inactivity?
  • When leaving the site?

The advanced conditions for going further give you these options:

  • After x page views?
  • After x site visits?
  • When do you get to a specific page?
  • When did you come from a specific page?
  • Hidden from site administrators?
  • Hidden depending on the type of screen?

The Popup is Displayed via a Button

Maybe you want your popup to appear when the user clicks on a specific button, for example- book here. It’s possible!

To do this, when you create your page, you add a ‘button’ element, and in the link settings, instead of copying an url, you will click on ‘Dynamic tag’ then select popup in Actions. If you have several popups on your site, you can then choose which popup to display, by clicking that Popup, then types the first letters of the name of this one.

Elementor Popup Templates

Again, Elementor offers you a library of popup templates to help you. You will find templates for all the types of popups I listed for you at the start of the article. But you can also export and import a model, in the same way as you install an Elementor model.

You May Also Read: How to Add and Use Widgets in WordPress

The 4 Steps to Create a Popup with Elementor Pro

1. Go to Templates> Popups> Add> Enter name.

insert-name-on-popup

2. Import an Existing Popup Template

existing-popup-template

3. Compose Your Layout.

elementor-popup

4. Define the Display Conditions for the Popup.

The Disadvantages of Using a Popup Plugin

You add one more plugin to your WordPress site, it’s one more plugin to manage for updates, it makes your site heavier, and increases the risk of bugs.

You must adapt to the handling of the module, each module to its operating model, it’s logic. It affects your productivity.

Most of the free modules have a paid version, so if you opt for free you will be limited in terms of functionality. The best way to get the paid version of Elementor. So that you will be tension-free. You will be able to make a beautiful Elementor popup by following the steps, but if you face any problem then please contact us.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Last Update:

About the Author

Submit a Comment

Must be required * marked fields.

:*
:*

logo2-1.1
study2

WordPress Site Management Crash Course

Get Our 7 Days WordPress Site Management Crash Course for Free

subscribe-themerally

Join Our Awesome Community!

Signup to get regular updates and freebies from Theme Rally