From the visitors’ perspective, popup might be an irritating thing. Especially if it consumes a large portion of the screen where the actual content is nearly invisible. But when implemented properly, a popup can be a great marketing tool to boost your sales or subscribers. Elementor comes with a popup builder to allow you to create a popup on your WordPress site in a visual way. You can use it to create a wide range of popup types. The best thing about Elementor popup builder is that you can set where the popup to appear using parameters like post tag, post category, and so on.
The easy-to-use Elementor visual editor makes it easy for you to create a popup. If you have no idea about the design concept of the popup you want to create, there are also readymade popup templates as the savior. Want to learn more? Read on!
Elementor Popup Builder: In a Nutshell
In case you are new to Elementor. It is a page builder plugin that allows you to create beautiful pages on your WordPress site, regardless of your skill level. Elementor comes with a visual editor to make your job a lot easier. Elementor is arguably a WordPress page builder plugin with the most comprehensive features. Popup builder is one of the features offered by Elementor. To use the feature, you need to use the pro version. In addition to popup builder, the pro version of Elementor also comes with features like theme builder, form builder, WooCommerce builder, third-party integrations, custom CSS, motion effects, and so on (read: Elementor Free vs Pro).
If you are interested to Elementor Pro, you can get a license on its official website. There are 5 plans you can choose from, depending on your needs.
Creating a popup using Elementor popup builder, you have limitless customization options. You can design your popup using the visual editor of Elementor just like when you are creating a regular page with Elementor. You can use all the Elementor widgets to add the content to your popup. If you haven’t used Elementor before, you can read our previous article to learn how to use it.
How the Elementor Popup Builder Works
The way Elementor popup builder works is pretty simple. First, you create a popup template using the Elementor visual editor. Once the template is ready, you can call it using the available trigger types. The trigger types supported by Elementor are:
- On click
- On page load
- On scroll
- After inactivity
- On exit intent
The detailed explanations about trigger types will be covered later shortly on the next section.
To start creating a popup template, you can go to Templates -> Popups. We have a separate article that covers how to create a popup in Elementor which you can read.
Before you start to create the popup content (template), you can make the settings first to make the popup show up according to what you prefer. Elementor itself offers plenty of setting options. From content layout (which includes content width, height, position, and so on), overlay, close button, entrance animation, popup background, and so on. You can access the settings panel by clicking the gear icon on the bottom-left corner within the Elementor editor.
Here are some setting options you can apply:
- Content width
- Content height
- Content position
- Enable/disable popup overlay
- Enable/disable close button
- Entrance animation
- Exit animation
- Animation duration
- Show close button after certain seconds
- Automatically close the popup after certain seconds
- Prevent popup close on overlay
- Prevent popup close on Esc key
Elementor Popup Builder: The Features
Visual Popup Builder
Again. If you haven’t used Elementor before, you will love the fact that Elementor comes with an intuitive visual editor to allow you to create a beautiful content on your WordPress site without dealing with code, including popups. Everything is drag and drop. To add a new element (called widget in Elementor), you can simply drag one from the left panel. There are over 90 widgets offered by Elementor in total. You can use all these widgets on your popup, without exception.
A Wide Range of Trigger Types
We have briefly mentioned the trigger types offered by Elementor popup builder on the previous section above. Now we will elaborate them in this section. In the context of popup builder, trigger type refers to a method to call the popup. Here are the trigger types supported by Elementor popup builder:
- On click
On click is a trigger type to call the popup based on a click on an element. The element can be a button, text, image, icon, and so on. You can call the popup using any Elementor widget that has a setting option to add a link. You can make use of the on click trigger type to increase the visitor engagement on your website. For instance, you can ask your visitor to click a button to show the email opt-in form, and so on. You can also make use of this trigger type to create a creative menu like a full-screen menu.
- On page load
You can use this trigger type to call the popup once a page is fully loaded. You can delay (in seconds) the popup emersion if you want it. One of the example uses of this trigger type is a cookie consent popup.
- On page scroll
This trigger type will call the popup based on page scroll. The popup will appear once the page is scrolled down and reached certain scrolling level. For instance, you can set the popup to appear once the page is half scrolled. The scrolling level is set in percent. You can use this trigger type to create a notification bar or the similar popup types in Elementor or WordPress site at large.
- On scroll to element
Same as the trigger type above, this trigger type also calls the popup based on page scroll. The difference is the parameter. Instead of scroll level, the on scroll to element trigger type will call the popup once the page is scrolled down and reached a certain element. The element can be section, column, or widget. You need to add a CSS class on the element you want to use to call the popup.
- After inactivity
You can use this type of trigger to show a popup when the user is idle for a certain period of time (in second).
- On exit intent
The name explains it all. This trigger type will call the popup when a user is intending to exit (close your page). You can make use of this trigger type to prevent your user from exiting your website. You can, for instance, offer something via your popup.
In addition to the 6 main trigger types above, Elementor also offers some advanced rules to display the popup. For instance, you can display the popup for visitors coming from search engines or specific URL. You can also display a popup based on the technology (device and browser) used by users. Here are the advanced rules offered by Elementor popup builder:
- After X page views
- After X sessions
- When arriving from specific URL
- When arriving from search engines
- When arriving from external links
- When arriving from internal links
- User state (logged in/logged out)
Display condition is one of the key features offered by Elementor Pro. This feature allows you to display a content — including a popup — on certain area(s) of your website. When it comes to popup, this feature is great as you can set where the popup to appear. You can make use of this feature for a marketing purpose or any purpose to grow your business. For instance, you can set a popup to appear only a certain landing page.
Here are some scenarios to display a popup in Elementor:
- Display a popup on the entire website
- Display a popup on post category page(s)
- Display a popup on post tag page(s)
- Display a popup on posts under certain category(ies)
- Display a popup on posts with certain tag(s)
- Display a popup on posts by certain author(s)
- Display a popup on individual posts(s)
- Display a popup on individual page(s)
- Display a popup on WooCommerce products by certain parameters (category, tag, author)
Readymade Popup Templates
Elementor comes with an intuitive visual editor to allow you create a beautiful popup more effortlessly. The problem is that you might have no popup design idea. If this is the case, lucky you. Elementor comes with tens of readymade popup templates to allow you to create a beautiful popup in a matter of minutes. You can simply replace the default content (texts, images) and stylings (colors, typography, and so on) and voila, your popup is ready to use.
The readymade popup templates are very well-organized on the Elementor template library. You can filter the templates by category. There is also a search form to save you time in finding a popup template you need.
The Ability to Hide a Popup on Mobile Device
Smartphones have a smaller screen than a desktop. Because of it, forcing to display a popup on smartphones can ruin the user experience of your website on smartphone. To avoid it, you can disable your popup on smartphones (or tablets). The popup builder of Elementor comes with a built-in setting option to show/hide a popup by device type.
Regardless of what users think, popup is a great marketing tool you can make use of on your website. Apart of it, you can also use a popup for other needs. For instance, you can use a popup to display cookie consent or notification. There are a bunch of WordPress popup builder plugins out there, but if you put design on the emphasis, Elementor should be your main option. Its intuitive visual editor is something you will love about so much. The fact that you can also use Elementor to create custom templates (header template, footer template, and so on) of your WordPress site — as well as the core pages of your website like the home page, about page, so on — is another selling point.
The popup builder of Elementor is multipurpose. You can use it to create a wide range of popup types. From a notification bar, popup consent, email opt-in, promotional banner, and so on. With a bit of creativity, you can also use it to create floating social share buttons, floating button, off-canvas menu, full-screen menu, and so on. Your creativity is the limit.
- Ease of use: (5 / 5)
- Features: (5 / 5)
- Usability: (5 / 5)