Elementor Popup Builder tutorial

In this tutorial we will go thru the basics of how to use the Elementor Popup builder available in Elementor Pro. I will show you how to get started, the popup settings you need to know and all the advanced options for publishing your popup effectively.

Where can you find the Popup builder?

 After you hover over the Templates menu, there will be a menu option called “Popups”. It is visible for both Elementor free and Pro users, but Elementor free users will be prompted to upgrade to Pro version to access this amazing popup builder.

If this is your first time using it, instead of the list of already created Popups you will see the green “Add New Popup” button.

 After you click on that, the already familiar new template modal will come up. Give a name to your new popup and hit the “Create template” button while leaving the template type as Popup.  

 

You will be greeted with built in popup designs or you can go to the “My templates” tab an import one of the beautiful Katka Popup templates.

The popup setting panel

The Settings tab

In the Layouts options you will see:

– the width and height settings for your popup.

– the position settings will help you move the popup horizontally and vertically. For example if you wish to have a notice bar or a slide-in type popup modal these will be the settings to place the modal to the right location on the screen.

– Overlay switch. This will turn on/off the background overlay.

– Close button on/off switch. Not really a good idea to turn this off, but if you need to do so for a specific use case this is the way to go. For example an age verification popup modal does not require a close button.

–  Entrance  animation will give you a list of animations to be applied to your popup modal.

– Animation duration if an entrance animation is set

The General Settings and Preview Settings will be the regular options as you have seen it in the past for other template types. (Title, status and preview conditions)

The style tab

The first styling options will be the Popup options:

– Background type

– Border type and radius

– Box shadow

The next is the Overlay options if enabled in the Layout tab. This is where you can choose the colour, image or gradient options or be a bit more creative and even use the dynamic option for specific pages.

The last one is the Close button options. 

Starting with the Position of the “Close button” with Inside or Outside. “Inside” will be in the popup area and “Outside” will be in the top corner of the browser window.

This is followed by the Vertical and Horizontal positioning of the button if you wish to move it to a different location based on the popup design.

We also have the usual button styling options for normal and hover state for colours and a slider for the size settings.

The Advanced tab

Usually this is a bit boring, but in this case we have some pretty cool settings.

1. Show close button after X sec: the time in second before the close button should appear.

2. Automatically Close after X sec: the time in seconds after the close button should disappear. 

3. Prevent closing on Overlay: On/Off switch to allow or prevent the closing of the popup modal by clicking anywhere on the overlay area.

4. Prevent Closing on ESC key: Similar to before but in this case it will enable or disable the use of the ESC key.

5. Disable Page scrolling should prevent from scrolling up/down while the popup is active

6. Avoid Multiple Popups: This option is for when you have multiple popups being triggered on the same page/post. This should help to prevent from overlapping each other.

And finally we have the regular Margin, Padding and Custom CSS setting 

Popup conditions, triggers and rules

The next step will be the Popup publishing options namely the conditions, triggers and advanced rules. These will help you get the best results and give a great experience for your visitors.

Highly customized popups can reduce annoyences and create a great way to boost user engagemant with your website, project or business.

To see these options you can click on the little arrow next to the “Publish” button and choose what settings you wish to change OR simply click on the “Publish” button to see the Elementor Popup publishing settings.

Conditional settings

As you can see, the already familiar “Conditions” options are availabe. This will be responsible for the location where this Elementor Popup should be visible. It will be great for:

– show on specific pages/post/products only

– show a popup for specific content only

– create popups for different categories. For example different popup modal for different product categories

Triggers

These settings will be responsible for “WHY” your Elementor Popup should become visible.

The first option is the “on Page Load” switch and a setting in seconds. The time you type in will control how much seconds before the popup will show up. So if you set it to 5 seconds, it will show automatically after a visitor has spent 5 seconds on that page.

The “On Scroll” trigger will let you set at what % of the particular page/post the popup should become visible. You can also set the direction of the scrolling. 

The “On Scroll To Element” trigger is a bit more advanced option. With this you can create a unique selector and use that for on any widget,column or section where you wish the popup should be visible as soon as the visitor gets to that point on the content.

The “On Click” trigger will activate the popup after X amount of clicks. 

For example you have a WooCommerce web shop and the visitors are browsing between your products, than you can set this trigger to active the popup after 10 clicks, knowing the visitor has already went thru several products and is highly interested in your offers.

The “After Inactivity” trigger is a very simple trigger. It will wait for X amount of seconds before the popup will be visible when the user left the page open with no activity.

For example the visitor left the page open and went for a coffee the popup will open up while the coffee break is over 🙂

The “On Page Exit Intent” trigger will make the popup modal visible when the mouse cursor is moving towards the end of the page’s edges.

For example, when the visitor is about to move the mouse to the back button or to switch to a different browser tab, it will show the popup modal.

This would be the right time to show a very interesting offer that the visitor would not want to miss.

Advanced Rules for Elementor Popups

These settings will determine additional rules that needs to be met for a popup to open.

This part will be useful to highly optimise the user experience in different use cases, for example:

– targeted popups for marketing campaigns

– optimised opening based on user behaviour 

– membership sites

Elementor Popup builder tutorial_20

The “Show after X page views” option will open the popup modal after the visitor browsed on your website and done at least X amount of page views. 

Elementor Popup builder tutorial_21

The “Show after X session” option will open the popup modal after the visitor returned to your website X amount of time. For example the visitor arrived on your website on Monday and left, but returned on Thursday to read more. That is 2 sessions in this example.

Elementor Popup builder tutorial_22

The “Show up to X times” option will open the popup modal only X amount of time for that specific visitor. It is a good way to control how often an offer should be visible. Also great for limited time offers to add some scarcity marketing to the mix. 

Elementor Popup builder tutorial_24

The “When arriving from specific URL” option has three variations:

– Show – the popup if visitor arrived from that URL

– Hide – the popup if visitor arrived from that URL

– Regex – is to add even more specific URL rules. Great for ad campaign visitors.

Elementor Popup builder tutorial_23

The “Show when arriving from” option will open the popup modal when one or all of the following options are set:

– Search engines – to open the popup modal for visitors arriving from one of the search engines

– External link – to open the popup for visitor arriving from any outside source

– Internal link – to open the popup for visitors browsing your website and arriving from one of your website pages.

Elementor Popup builder tutorial_25

The “Hide for logged in users” option will open the popup modal only to non logged in users or any specific user role set from the dropdown menu. 

This is a great way to set popups for the public side of your website and not to annoy any of your members with these.

Elementor Popup builder tutorial_26

The “Show on devices” option will open the popup modal only for the specific device types. Basically you can enable or disable the popup modal to open for any screen size (Desktop, Table or Mobile)

Elementor Popup builder tutorial_27

When all your Publishing options are set, hit the “Save and close” button an you are ready to go 🙂 

Elementor Popup builder tutorial_28

Hope you found this tutorial helpful, please share with others and don’t forget to download the Katka Popup pack too!

Katka Popups for Elementor

Turn your visitors to subscribers and increase sale conversions!

The Katka Popup templates arrive in two variation out of the box. Simple and animated version. The free and Pro pack has 114 popups combined and more will be added in the future (57 normal and 57 animated).