One of the advantages of Elementor compared to other WordPress page builder plugins is that it comes with a popup builder feature to allow you to create beautiful popups on your WordPress in a visual way. You can use it to create any type of popup. From a simple popup like an email opt-in popup to a complex popup like a full-screen menu. To give you some insight, we will share some ideas on how to use the popup builder of Elementor.
Creating a popup using the Elementor popup builder is not different to creating a page or template. You can add any widget you like and implement all of the styling options available. You can also set the display conditions to make your popup appear on a certain page(s) on your website. You can read our previous article to learn how to create a popup with Elementor.
The popup builder of Elementor itself supports the following trigger types:
- On page load
- On scroll
- On scroll to element
- On click
- After inactivity
- On page exit intent
Here 7 ideas of how to use the Elementor popup builder
1. To create a full-screen and off-canvas menu
Elementor has no widget or feature dedicated specifically to create a full-screen menu or an off-canvas menu. It doesn’t mean you have to install an add-on to create a full-screen or off-canvas menu on your WordPress site. You can make use of the popup builder to create one. Here is an example.
To create a full-screen/off-canvas menu using Elementor, you can create a popup template and set the trigger to on click. You can then call the template via a link (Elementor allows you to set a link to a popup template). You can use any widget that has an option to add a link to call the popup template. Such as the Button widget, Text Editor widget, Heading widget, Icon widget, and so on.
2. To create a notification bar
Want to display a notification bar on your WordPress site? If your WordPress site is built with Elementor, you don’t need to install an extra plugin. You can make use of the Elementor popup builder to add one.
When creating a notification bar using Elementor, you can set how the bar to appear. Whether after users make a click, scroll the page, or even when they intend to close the page. Elementor itself offers some premade popup templates dedicated to displaying notification bar. Here is the example of the notification bar created with Elementor.
3. To create a cookie consent popup
4. To create promotional banners
This is the most common use of a popup builder. You can implement the idea especially if you have an e-commerce site. You can, for instance, create a banner to let your visitors know about the products being on sale. On the banner, you can add elements like a countdown, call-to-action button, or any required elements. You can also find some premade promotional popup templates on the template library of Elementor.
5. To create an email opt-in popup
As we said earlier, you can add any widget to your popup just like when you are creating a page using Elementor. The Form widget is not an exception. You can use this widget to add a form to your popup. You can then connect your form with popular marketing services like MailChimp, MailerLite, and so on. Elementor also offers some premade popup templates dedicated to creating an email opt-in popup.
6. To create a content locker popup or age verification popup
Not all websites are intended for everyone. For instance, if you have a website that sells cigarettes, your site is certainly prohibited to those under 18. In such a case, you can create a popup that requires your visitors to click a certain action. The concept is pretty similar to a cookie consent popup, but you can apply a full-screen overlay setting to hide the content and force your visitors to perform a certain action before they can see the content. In this context, the action can be a verification that they are above 18. Otherwise, you can send them to another website like Wikipedia.
You can also find this sort of popup on the Elementor template library.
Another idea regarding content locking is that you can force your visitors to log in by showing a full-screen login form overlay for all anonymous visitors.
7. To create floating buttons
Elementor comes with both the Share Buttons widget and Social Icons widget which you can use to add social media share buttons and social media follow buttons, respectively. While you can add those widgets to a page or theme builder templates, it would be a great idea to add those widgets to your popups.
To create floating social media follow buttons/share buttons, you can disable both the overlay and close button. By applying a trigger, you can even set how and where the buttons to appear. In addition to social media buttons, you can also create a floating call-to-action button as we implemented on this website (you can see a pink floating call-to-action button on the right side when reading an article on this site).
If you are interested to create floating social media follow buttons/share buttons, Elementor also offers some premade templates you can use.
The bottom line
One of the practices applied by website owners to speed up their WordPress site is by using as minimum possible plugins. Elementor is capable of handling some jobs of other plugins so you don’t need to install too many plugins on your WordPress site. With its popup builder alone, you can create a full-screen menu, an off-canvas menu, a notification bar, a cookie consent popup, and so on. Your creativity plays a vital role in maximizing the features of Elementor, including its popup builder.