Elementor is not merely a page builder. It’s a versatile WordPress plugin. There are several other things you can do with Elementor other than creating web pages. One of which is popups. In this post, we will show you how to create a popup with the Popup Builder feature of Elementor.
Creating a popup with Elementor is super easy. You can design your popup with the visual interface of Elementor where everything is drag and drop. Your job is getting easier since Elementor also offers premade popup templates. You can simply select a template, publish it, and set the trigger. That’s it!
Before going further, it’s crucial to note that the Popup Builder of Elementor is only available on the pro version.
How to create a popup with Elementor
When creating a popup with Elementor, you can set a trigger (an action to show the pop) and display condition (in which pages you want your popup to appear). In addition, you can also set an advanced rule (covered later below).
In this example, we will create a call to action popup with a button click trigger. The popup will appear when a user clicks on a button.
Assuming you have installed Elementor Pro, login to WordPress dashboard and go to Templates -> Popups and click the Add New button on the top side.
Give your popup a name and click the CREATE TEMPLATE button.
Select a popup template you want to use. Hover your mouse over it and click the Insert button to take it to the Elementor editor.
If you prefer to create the popup from scratch, you can simply close the template library to open the Elementor editor.
On the Elementor editor, you can customize the popup. You can replace the default content (texts in particular) with your own content. Use the Navigator to make it easier for you to jump between sections and widgets. You can also add an entrance/exit animation, enable/disable the overlay, and enable/disable the close button.
Once you are done, click the PUBLISH button.
On the next step, you will be asked to set display conditions and triggers. There is also an option to set advanced rules:
- Display conditions: Determine on which pages the popup appears throughout your website. You can set the popup to appear on the entire website, specific pages, specific posts, specific categories, and so on.
- Triggers: A trigger is an action to show the popup. Elementor supports 6 trigger types: On Page Load, On Scroll, On Scroll To Element, On Click, After Inactivity, On Page Exit Intent
- Advanced Rules: The requirements need to be met for the popup to appear. For instance, you can set the popup to appear if a visitor comes to your website via a search engine or certain UR. Elementor Popup Builder itself has 7 advanced rule options you can set choose from.
Since we want to display the popup when a user clicks a button, open the Triggers tab and activate the On Click option. Click Save & CLOSE.
Create a new page/post and edit it with Elementor (you can also edit an existing).
Add the Button widget by dragging it from the left panel to the canvas area. Or, if you are editing an existing page that already contains a button, click the Button widget to turn it into an editing mode. On the Button option under the Content tab, set the link to Popup. To do so, you can click Dynamic on the Link section.
Click the wrench icon on the Popup field and select the popup you have just created. Type the popup name to find your popup.
Click the PUBLISH/UPDATE once done editing the page. Before clicking the PUBLISH/UPDATE button, you can preview your page first to see if the popup already works.
The bottom line
With Elementor Pro, you don’t need to install a popup plugin anymore since the features offered by Elementor Pro include a popup builder. The Popup Builder of Elementor allows you to create any kind of popup. From a call to cation popup as we have just created above, a registration form popup, notification bar, social share button, and so on. Since the popup is created with the Elementor editor, you can basically add any widget to your popup. With the Popup Builder of Elementor, you can also create a creative website menu as follows:
Elementor offers premade popup templates to save you time in creating a popup. You can also use a template if you are run out of idea about the design of the popup you want to create.