Elementor Popup Templates

Posted onby admin
Templates

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.

Elementor Popup Form

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.

The Modal Popup widget of the Ultimate Addons for Elementor allows you to display a popup based on various actions. In this article we’ll see how to trigger a popup on the click of a WordPress Menu element. You can do this using a custom CSS class. Here are a few steps you need to follow. Create visually appealing and highly converting popups with the modal popup widget of the Ultimate Addons for Elementor. Display image, video, saved templates, etc within a popup. With Elementor’s unique features, you can create websites that have that certain ‘designer touch’. Among our design features are: Box Shadows, Background Overlays, Hover Effects, Headline Effects, Animations, Shape Dividers, Gradient Backgrounds and much more. 100s of Pre-Designed Templates & Blocks. Want to expand your Elementor options without spending a penny? We've got you totally covered with this extensive collection of tried and tested. In this video, I share with you how to get an additional 100 free Elementor Pro popup templates to help you build better popups faster. Get it free: https://.

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.

Elementor pro pop up builder

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

Elementor Popup Templates

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 available. 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

Templates

– 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.

Elementor Popup Templates Download

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.

Elementor Pop Up

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

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.

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.

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.

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.

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.

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.

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)

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

In this tutorial I will show you, how to do and when to use exit intent popups with your Elementor websites. If you need the full guide to Elementor popups follow this link.

Exit intent popups are the ones that will be triggered when the visitor is about to leave your website. When they are moving the mouse cursor towards the edge of the browser window that is the point when our popup will show.

Using this can be very irritating, so, you need to make sure to offer great value to your visitors or a good reason to stay on the website. Usually on an e-commerce website the exit intent popups should offer a discount or a coupon code for the buyer.

To get started, log into your WordPress admin area and hover over the Templates menu. From here, click on the Popups menu and hit the Add new button or give a name to your popup if you do not have anything created yet.

As a next step, you can build a popup based on your own ideas, or you can import one from the built in option OR one of the Katka Popup templates. In this case I will use a Katka Popups Pro template to demonstrate how quickly you can get started.

Astra Elementor Templates

After you are finished with your editing, it will be time to set the conditions, triggers and rules based on your requirements.

Elementor Modal

For conditions choose the pages where the popup should show up. In this demo I will leave this at entire site.

For triggers you will have to switch the “on page exit intent” to YES

For rules you can add additional options, like disable it on mobile and tablet screen sizes or make it visible only to people arriving from search engines only.

Elementor Popup Template Download

You can create multiple variations and target specific pages. For example create a coupon for the product category 1 and a different one for the product category 2.

Free Pop-up Templates

Hope this tutorial was helpful!