In this tutorial I want to show you how you can set up a Elementor popup on a button click.
If you haven’t done it before and you want to set it up then it can be quite difficult to find out how to do that. So, in this tutorial I will walk you through step by step.
This way you can show a specific popup to your website visitors when they click on a button.
With Elementor you can easily set this up and there are many beautiful popup templates included. This way you can create a professional popup within a few clicks.
Don’t forget to like and subscribe to the channel!
Watch tutorial on YouTube
Create Elementor Popup template
As you can see now, I am logged in the WordPress dashboard of my website.
To create popups with Elementor you’ll need the Pro version, so keep that in mind.
In other tutorials I’ve showed you how you can install and set up Elementor. If you don’t know how to do that make sure you check that out.
With the free version you won’t have this option.
If you have Elementor installed, you can see the Templates option in the menu and you need to click on Popups.
Click on the green button, add new pop up.
Now you can see this screen and the only thing you need to do is enter a name for the pop up.
Remember the name that you give this template because you will need to remember it later when we need to connect the popup to the button.
After you have entered a name, you can click on create template.
Now you can scroll down and see which pop up template you like. You see a lot of templates are available with Elementor so that’s great because then you have a base to work off.
So, choose popup you like and click on insert to add the pop-up to the canvas.
Design Elementor Popup and save Elementor popup
Now you can see the template for the popup has been loaded. And the great thing is that you can design everything the same way as you’re used to with Elementor the same way as for the pages and post.
You can style everything completely how you want it to be.
So, after you are done with designing the pop up for desktop, tablet and mobile the next thing you have to do is click on the green Publish button.
Now you see this screen will be loaded and over here you can set the conditions for this pop-up.
Here it becomes a little bit tricky because you would assume that you would have to set it up over here, but it’s not the case.
So, you can skip the conditions. We don’t have to add a condition over here. Also, for the triggers you don’t have to add any condition, make sure everything is turned off.
Also, for the advanced rules you need to make sure to don’t switch anything on. So, leave everything as it is. Don’t select any of the options and the only thing you need to do is click on Save and close.
Set up Elementor Popup on Button click
Now let me make sure to show you how to connect this pop up to a button so go back to the WordPress dashboard. For example, I’ll open the Elementor editor for the homepage.
I will add a button to the canvas and select it. Now go to the content tab. Over here you can see the link field and you need to make sure it’s empty. Then you need to go to the dynamic tags option and click on it.
Now go to the Actions option and there you can see pop up. Click on the popup option.
Next thing to do is click on the tool icon. Now you can see the action is open popup that’s the case by default. So, leave it as it is.
Now in the field you can select the pop up that we have just created. So, click on it and enter the name of the Elementor popup template that was created earlier and select it.
Always make sure to flush the cache after you have saved the settings.
Make sure you do that, because if that’s not the case, then sometimes when you open the website after you have done the changes it won’t be visible right away. It’s because the caching is not flushed yet.
Elementor Popup on button click example
Now I will open a new Incognito tab and go to the website. You can see that the page is loaded with the button that we’ve just added.
So now let’s see if it works. I’ll click on the button. And you can see that the pump up now opens. So, it works perfectly.
A great thing is that the popup keeps opening whenever the button is clicked. So, this is a very helpful future if you want to use Elementor popup on button click on your website.
In the video tutorial I will explain everything in more detail, and you can watch it on YouTube over here.
I have also made a tutorial were I explain how to create a pop up and design it with Elementor.
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
- Pop ups with Elementor
- PDF Download button with Elementor
Check out this tutorial to learn the Elementor basics in 7 minutes.
I hope this tutorial is helpful. It that’s the case make sure to subscribe to the channel and drop a like and comment. Thanks, and I hope to see you back in the next tutorial!