Need to know how to create popups with Elementor ?
Elementor is not just a page builder. It's a WordPress Plugin versatile. There are several other things you can do with it Elementor other than creating web pages. One of them is the creation of popups.
In this article, we will show you how to create a popup with the help of Popup Builder feature ofElementor.
Creating a popup with Elementor is super easy. You can create your popup with the visual interface of Elementor where everything is drag and drop. Elementor also offers popup templates that you can use to create your popups. You will simply have to select a model, publish it and define the trigger.
Discover How to install Elementor on WordPress
Before going any further, it is crucial to note that Elementor's Popup Builder 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 display the popup) and configure the condition (on which pages you want your popup to appear). Additionally, you can also set an advanced rule (covered further below).
Read also: How to Create Multicolor Gradient Button in Elementor
In this guide, we'll create a call-to-action popup with a trigger on button clicks. The popup will show when a user clicks a button.
Assuming you have installed Elementor Pro, log into the WordPress dashboard and go to Templates – > Popups And click on the button Add above.
Give a name to your popup and click on the button CREATE A MODEL.
Select a popup template you want to use. Hover your mouse over it and click the button Insert to insert it into the Elementor editor.
If you prefer to create the popup from scratch, you can simply close the template library to open Elementor's 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 browser to make it easier to jump between sections and widgets.
You can also add enter/exit animation, enable/disable overlay and enable/disable close button.
Once you're done, click on the button PUBLISH.
In the next step, you will be asked to set display conditions and triggers. There is also an option to set advanced rules:
- Display conditions: Determines on which pages the popup appears on your website. You can configure the popup to appear on the entire website, specific pages, specific posts, specific categories, etc.
- Triggers: A trigger is an action to display the popup. Elementor supports 6 types of triggers: On Page Load, On Scroll, On Element Scroll, On Click, After inactivity, On page exit
- Advanced Rules: Requirements that must be met for the popup to appear. For example, you can configure the popup to appear if a visitor comes to your website through a search engine or a certain URL. Elementor's Popup Builder itself offers 7 advanced rule options that you can set.
Since we want to show the popup when a user clicks on a button, open the tab triggers and activate the option On-Click. Click on Save and close.
Create a new page/post and edit it with Elementor (you can also edit an existing page).
Add it Button widget by dragging it from the left panel to the editing area. Or, if you're editing an existing page that already contains a button, click the Button widget to put it into edit mode.
Discover also: How to set custom size for Elementor button icon
On option Button under the tab Contents, set the link to Popup. To do this, you can click in the section Dynamic Link.
Click the wrench icon on the field Popup and select the popup you just created. Type the popup name to find your popup.
Click on PUBLISH / UPDATE after editing the page. Before clicking the button PUBLISH / UPDATE, you can preview your page first to see if the popup is already working.
Get Elementor Pro Now!!!
Conclusion
With Elementor Pro, you no longer need to install any popup plugin because the features offered by Elementor Pro include a popup builder.
Elementor's Popup Builder allows you to create any type of popup. From a call-to-action popup like we just created above, a popup of online form registration, a notification bar, a social sharing button, etc.
Since the popup is created with Elementor's editor, you can basically add any widget to your popup. With Elementor's Popup Builder, you can also create a creative website menu like the one below:
Elementor offers popup templates to save your time in creating a popup. You can also use a template if you have no idea what popup design you want to create.
Here ! That's it for this article that shows you how create popups with Elementor. If you have any concerns about how to get there let us know within Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
