You have the Elementor Popup Builder to offer our customers the best way to create popups that look great and are consistent with their site design, and don’t require custom CSS in the process.
In this guide, I will show you why you no longer need to be limited by external WordPress popup plugins. Instead – use Popup Builder and build pop ups in the same editor you use to build your entire site.
This is just the first of several videos and written tutorials we are releasing to explain how to create various amazing popups in Elementor.
Ready to build your first popup with Elementor? Let’s go for it…
The Popup You’ll Create
In this guide, we’ll show you:
- How to edit the popup window
- How to create an Elementor popup that includes a contact form
- How to open the popup when the user scrolls down past 80% of the page
- How to close the popup after the user submits the form
- How to manually trigger the popup on click (when the visitor clicks on a button)
Step 1: Getting Started
Follow this easy, step-by-step guide for building popups in WordPress using Elementor’s Popup Builder.
In Elementor, popups are built just like any other type of template.
If you’re familiar with the Elementor Theme Builder, you’ve come across templates like the header, footer, single and archive.
Popups are built in the same way.
In the WordPress dashboard, go to Templates > Popups > Add New
Let us name our Popup template My First Template and hit ‘Create Template’.
Then, the popup templates window will open. You’ll be able to choose from over one hundred pre-designed popup templates.
As you can see, we did a lot of work creating a huge library of beautiful popup templates for you to use. You can also build the entire popup yourself using the power of Elementor Pro and its widgets.
Step 2: Designing the Popup Window Under Popup Settings
After you close the Library window, the Elementor editor will open up, with the Popup settings panel appearing on the left.
BTW, this panel is always accessible through the bottom gear icon.
In the Layout tab, we’ll set the width of the popup to 700 pixels, and the height as ‘Fit to Content’. Our popup will be positioned to the center, both horizontally and vertically.
In the Style tab, we’ll set a solid yellow border, with a 35-pixel border-radius, giving our popup a rounded look.
Popup settings also include additional settings, like showing the close button after a set time, automatically closing the popup, a switch to prevent the popup from closing, a switch to disable page scrolling and a switch for avoiding multiple popups.
We won’t be using them here, but it’s handy to know in case you need them.
Step 3: Build the Inside of the Popup
Since designing the inside of popups is the same process as designing any page, we won’t go over the process in detail.
Simply note that every type of content and template you have in Elementor can be used in your popups.
The final design of our popup looks like this:
How to Target Popups Using Publish Settings
As you will see, setting advanced targeting and triggers is as easy as flipping a switch. Hit publish and the Publish Setting window will open up.
Let’s quickly go over the targeting options in the Popup Builder, so you know how to properly target popups using the Conditions, Triggers, and Advanced Rules targeting options.
Using Triggers, we can set the popup to show:
- On-Page Load
- On Scroll
- On Scroll to Element
- On Click
- After Inactivity
- And On-Page Exit Intent
For this tutorial, we’ll be using a manual popup that is triggered when the user clicks on a button.
Under Advanced Rules, e can set very specific requirements that have to be met for the popup to appear:
- After a certain number of Page Views
- After a certain number of website visits
- When visitors arrive from a specific URL
- When visitors arrive from external links / internal links
- When they arrive from search engines.
You can also hide popups from logged-in users or choose to only show them on desktop, tablet, and mobile devices.
Step 4: Set Popup to Show on Scroll & Close on Submit
We wanted to show you two different ways to set off the popup we created: one manual via link click, the other automatic using the on scroll trigger.
For the automatic trigger, we also want the popup to close after the user submits the form inside the popup.
Open Popup With On Scroll Trigger
So, for the first popup example, we want the popup to appear when the user scrolls through 80% of the page.
Under Triggers, switch on ‘On Scroll’ keep the direction set on ‘Down’ and enter 80 in the ‘Within’ field.
Close Popup With Form Submission
Go to the Form widget inside the popup, and under ‘Actions After Submit’, choose ‘Popup’.
Click on the popup item that will now appear below.
Under ‘Action’, choose ‘Close Popup’.
Step 5: Manually Connect Popups to Links or Forms
To set a manual trigger, we will go to our landing page and connect one of our buttons to the popups.
Hit CMD / CTRL + E to open the finder, and type ‘Add a new page’.
On the new page, drag in a Button widget.
In the Button settings, under content, click on the dynamic icon next to the Link field.
Then, under Link > Actions, choose Popup.
Click on the Popup again, make sure the action is set to ‘Open Popup’, and type the name of the popup we created.
- Best WordPress Theme Frameworks
- How To Create A Slider In WordPress?
- How To Speed Up Your WordPress Site
FAQs | PopUp In WordPress
👀What is WordPress used for?
WordPress is web publishing software you can use to create a beautiful website or blog. It just may be the easiest and most flexible blogging and website content management system (CMS) for beginners.
😎Is WordPress really free?
The WordPress software is free in both senses of the word. You can download a copy of WordPress for free, and once you have it, it's yours to use or amend as you wish. The software is published under the GNU General Public License (or GPL), which means it is free not only to download but to edit, customize, and use.
🔥Is WordPress good for beginners?
WordPress is easy for beginners, yet powerful for developers: As discussed earlier, WordPress is a very easy platform to get started with. It's very easy to set up and run. Most web hosts come with what are called one-click auto-installers. ... WordPress is as simple to use as a word processor like Microsoft Word.
✔What language is WordPress written in?
🤷♂️Does WordPress require coding?
Yes. Some knowledge of coding would be helpful to changes to your website. Having a complete coding background while helpful is not required.
Conclusion | PopUp In WordPress 2023
Hit publish and view your live page. Now, clicking on the button should open the popup.
That’s it! We’ve successfully opened the popup using the Scroll trigger and the On Click manual trigger, and closed it on form submission.
This blog offers a first taste of the vast design and targeting options available in the Popup Builder. Be sure to check out the popup tutorial playlist we’ve prepared for you.
We’d love to hear from you — show us the popups you created and let us know if you have any questions.