How to Build a Popup in Elementor Pro

Table of Contents

Get Elementor Pro

In this WPDesigns article, we will discuss how to Build a Popup in Elementor Pro.

Elementor isn’t just page builder. It is a flexible and adaptable website builder for WordPress. More than simple pages, there are many things you can do with Elementor. One of them are popups. In this post, we’ll show you how you can create a popup with Elementor’s popup builder functionality.

It’s super simple to create a popup with Elementor. With the visual interface of Elementor you can design your popup, where it drags and drops everything. Your work is simpler, as Elementor also provides premade pop-up templates. The template can be selected, published and the trigger set. And the pop-up is ready.

How to Build a Popup

If you want to add a pop-up, you need to buy Elementor Pro. You can’t create a popup template in their free version. So, first you need to purchase Elementor Pro to start making a pop-up. The Pro version of Elementor is well worth the cost that they charge each year.  If you would like us to allow you to test out pro on one of our domains, get in contact and we can arrange a trial.

Step – 1 : Basic Setup and Create a New Popup

Login to your dashboard and install Elementor and Elementor Pro to get started.  Go to WordPress Dashboard > Templates > Popups > Add new. Then, a new window will appear in front of you. From the dropdown, popup will automatically selected. You have to just give a name to the popup and then click on Create Template.

Step – 2 : Import a Template

You will then be able to choose whether to begin with one of Elementor Pro’s lot’s of premature pop-up templates. Or you can just close the template library to open the Elementor Editor, if you prefer to create the popup from scratch. – it’s all up to you what you like. So, to import a template choose the template and then click on Insert.

 When you will click on insert they will ask you to connect the account to get templates. Just click on get started and it will transfer you to Elementor website. If you are not logged in you have to login now. Then you will get a button to connect then click on connect and the the library will be connect to your website. And now if you click on insert then it will import the template. You will also able to customize the popup design as you like after import.

Step – 3 : Popup Settings

There are three options you will get under settings.  Such as settings, style and advanced. 

Settings

Layout

• Width: Here you can specify the exact popup width using px or vh.
• Height: Specify the exact popup height with either px or vh. To create full-screen popups, use 100vh for both width and height.
• Horizontal: Here you can set the position of popup horizontally. There are three option you will get left, center and right.
• Vertical: You can choose the vertical position of the popup, from Top, Center, or Bottom.
• Overlay: Here you can show or hide the background overlay.
• Close Button: Here you can show or hide the closebutton whatever you want.
• Entrance Animation: Pick the entry animation of the popup, whatever you like from your drop-down. To preview the effect, select any animation effect.
• Exit Animation: Pick the exit animation for the popup, whatever you like from your drop-down. To preview the effect, choose any animation effect.
• Animation Duration: Here you can control the duration. Set the duration of animation in milliseconds.

General Settings

• Title: You can enter the popup’s title here. Only the backend will see this title frontend user will not see it.
• Status: You can set the status here like Draft, Pending Review, Private, or Published.

Preview Settings

• Preview Dynamic Content as: Choose from any of the following categories: Archives, Pages, Posts, Media, or 404 pages to preview.

Style

Popup

• Background Type: Here you can choose a background color, image, or gradient for the popup.
• Border Type: You can select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
• Border Radius: Set the border radius to adjust the roundness of the popup’s corners on each side.
• Box Shadow: Adjust box shadow options to give a box shadow.

Overlay

• Background Type: Choose a background color, image, or gradient for the background overlay. You can set whatever you want it’s up to you. 

Close Button

• Position: Here you can set where you want to show the close button inside or outside.
• Vertical Position: Here you can use the slider to set the vertical position of close button.
• Horizontal Position: Here you can use the slider to set the horizontal position of the close button.

Normal | Hover

• Color: In both the Normal and Hover settings, you can change the color of the Close button.
• Background Color: Choose a color for the Close button’s background in both the Normal and Hover states.
• Size: The size of the close button can be customized here.

Advanced

Advanced

1. Show Close Button After (sec): Here you can set a timer for a certain number of seconds. After the time has passed, the close button will appear.
2. Automatically Close After (ms): Enter the number of milliseconds to wait until the popup closes automatically. To disable automatic closing, leave the field blank.
3. Prevent Closing on Overlay: To prevent users from closing the popup by clicking on the overlay, choose Yes.
4. Prevent Closing on ESC Key: If you choose Yes, users will not be able to close the popup by pressing the ESC key.
5. Disable Page Scrolling: To prevent users from scrolling the page behind the popup, choose Yes.
6. Avoid Multiple Popups: If the user has already seen another popup on the page he is visiting, click Yes to hide this one.
7. Open By Selector: Enter a list of selectors that will manually trigger the popup (CSS IDs, classes or data-elements).
8. Margin: Here you can adjust the margins
9. Padding: Here you can adjust the padding around the popup
10. CSS Classes: Add your custom class without the dot.

Custom CSS

Here you can add your own custom CSS. At WPDesigns we do generally recommend that the CSS is added to the global CSS panel rather than the individual element, column, or section CSS panel as it is much easier to organize and find when needed.

Step – 3 : Popup Publish Settings

Conditions

You may specify which pages of your website the popup would appear on using conditions.  Set the conditions for when and where your popup appears (excluding manual triggering). To only display the popup on the site’s front page, add an Include condition and select Singular > Front Page.

Triggers

User behaviors that cause the campaign to popup are known as triggers. For each choice that will trigger the popup to display, choose Yes or No.

1. On Page Load: You can set the number of seconds to wait for a popup to appear when the page loads if Yes is selected.
2. On Scroll: Select the direction (Up or Down) and the amount to scroll until the popup is displayed if Yes is selected. Up scroll is based on the number of pixels scrolled up, and down scroll is based on the percentage of the page scrolled down.
3. On Scroll To Element: Enter the Selector name (CSS ID) that will cause the popup to appear when the user scrolls to it if Yes is selected. In the Advanced tab of the element, you must also add the CSS ID.
4. On Click: Enter the number of clicks that will cause the popup to appear if Yes is selected.
5. After Inactivity: Enter the number of seconds of user inactivity that will cause the popup to appear if Yes is selected.
6. On Page Exit Intent: If Yes is selected, the popup will appear when the user’s mouse behavior indicates that he or she is about to leave the page.

Advanced Rules

Advanced Rules specify additional conditions that must be fulfilled in order for a popup to appear.

1. Show after X page views: Here you can set the number of page views before the popup appears if Yes is selected.
2. Show after X sessions: Set the number of user sessions until the popup appears if Yes is selected (a session starts when the user visits the website and ends when the user closes the browser).
3. Show up to X times: Here you can set the max number of times the popup can appear. When Count is set to On Open, the popup will only be able to open as many times as the number specified. When Count is set to On Close, the popup will only open until the user closes it for the Xth time, after which it will close permanently. This option is placed in the Local Storage and will not be changed until it is removed.
4. When arriving from specific URL: Show or hide the popup if a user arrives from a specific URL if Yes is selected (enter the specific URL). Advanced users may use Regex to create advanced rules for matching URL patterns.
5. Show when arriving from: Display if the user comes from a search engine, an external link (enter the URL of the particular link), or an internal link if Yes is selected (enter URL of specific link).
6. Hide for logged in users: If Yes is selected, the popup will be hidden for all logged-in users or for specific custom roles. This feature may not work properly on websites that use cache.
7. Show on devices: To display on a desktop, tablet, or mobile device, select Yes.

After configuring all of the setting as you like click on save & close and then the popup will live.