In this tutorial I will show you how you can design a popup with Elementor for your WordPress website.
The pop up is completely responsive and you can set this up very easily and in this tutorial I will show you exactly how to do it.
Below this post you can also find the link to the YouTube video in which I will explain things in more detail.
Watch tutorial on YouTube
Create Popup template
You will need the Elementor Pro upgrade to create Pop ups with Elementor.
For this example, I’ve made a popup for my own website and I will show you exactly how to do this:
To create a popup template you first need to go over to the WordPress dashboard for your website. Once you have done that you can go over to Elementor options in the left menu and then go straight to Templates option.
After you have clicked on it you can see all the templates that are available in Elementor and you need to click on popup.
Now you need to click on this green button over here add new popup.
Over here you can enter a template name and after that you need to click on create templates.
Select Elementor Popup Template
Now you can select a popup template in the library, which will save you a lot of time and effort. Or you can design your pop up from scratch if you prefer that.
For now, I’ll select a random template and click on insert.
Now you can see that the template for the pop up has been displayed on the Elementor canvas.
Design Elementor Popup
You can adjust all the Elements if you want to, or you can remove or add widgets.
In the video tutorial I will go more in detail about the styling settings.
After the styling is done you need to publish this pop up by clicking on the green button.
Elementor Popup settings
Now we can select where to display this popup in the condition settings. Here you can add a condition and I want this pop up to be displayed on the entire site after the page is being loaded. In the video tutorial I will go more in depth on the other options that are available.
After you have done the settings, you can click on this green save and close button.
Elementor Popup is live
Now the pop up is live!
So let’s open an Incognito tab and go over to the website. After 15 seconds the pop up should show up. After 15 seconds you can can see that the pop up is displayed:
Everything works fine! I wish you good luck with designing your own pop up.
In the video tutorial I will explain everything in more detail and you can watch it on YouTube over here.
If you have responsive issues with designing in Elementor for mobile or tablet view you should check out this tutorial. There I will explain how you can fix this very easily.
In another tutorial I have explained how to create a Elementor popup on a button click.
In other tutorials I have explained how to create cool effects such as:
- Sticky header scroll effect with Elementor
- Scroll effect (paralax for sections) with Elementor
- Motion effects with Elementor
- Z-Index with Elementor
- Open Pop up on button click with Elementor
- PDF Download button with Elementor
Check out this tutorial to learn the Elementor basics in 7 minutes.
If you found this tutorial helpful, please make sure to hit thumbs up and subscribe to the channel. I will appreciate it very much, thanks and I hope to see you back in the next tutorial!