How to make a pop up using Elementor
Did you know, you can make a pop up using Elementor?
Yes, it is one of the unique features of Elementor where you can design popups yourself.
The thing is, Elementor is not your average page builder plugin.
It’s a versatile tool with thousands of possibilities.
Popups may serve as notification, luring traffic, displaying offers, and for exit intends.
With the latest version of Elementor, you can design popups by custom or using templates.
It just takes seconds to make a whole marketing-level popup on this platform.
Let me show you how to make a pop up using Elementor.
Before you start!
Elementor is the best and leading web page builder for WordPress.
As it is a Freemium plugin, certain features will cost you.
Elementor Popup Builder is a tool that comes with the Elementor Pro and will cost you $49/year for 1 website.
The good news is, Elementor has lots of other plugins that provide such features at moderately low cost, along with a bunch of different features.
One of such plugins is Element Pack, a top-grade widget pack for Elementor.
This thing has more than 190 widgets (120+ more than Elementor) at it.
By using a widget called Modal, developed by the plugin creator, you can make tones of pop ups easily.
Such a great plugin comes with only $29/year for all the 190+ widgets.
Here’s how to make a popup using Elementor pro.
On the other hand, we will guide you to the fastest way to create a pop up using Modal in Elementor.
Let’s get started!
Making a pop up using Elementor
Here, you will get to know-
- Make a popup template
- Use the template to make a popup
Note: although there are a lot of ways to design a popup template, the quickest way is to have an image on the background with a call-to-action button. This article will be imposing this method.
Step 1: The First Thing To Do
The first thing you need to do is to create the pop up that you will show on your webpage.
To do this, you need to go to your WordPress dashboard and create a template inside your page editor.
Now, this part usually needs a lot of steps using Elementor Popup Builder.
But, we are going to another route that will mostly take a couple of minutes to design such popups.
So, let’s open a page using the way you are familiar with Elementor.
Open a new page and go to the Elementor page editor window.
Create a blank section by clicking the plus (+) sign.
Step 2: Design Your Pop up
Drag a Button widget on your blank page to start creating the template.
You can choose the button widget either from Elementor or Element Pack.
A popup needs the button to initiate the call-to-action.
Step 3: Pop up Window Settings
You need to determine the dimension of the popup you are making with Elementor.
Click on the section settings icon, go to the layout tab, and set the content width to 900.
You can choose narrow or broad content width as well.
It just follows the amount of info to be delivered with the popup.
Next, click on the Column settings icon, go to the Advanced tab, and set a padding of 150 in all directions.
By doing this, you will create a limited area to display the background image perfectly.
Step 3: Style The Pop up Using Elementor
Add a background image to the popup by clicking the Column settings icon.
Choose your image from Style> Background and make the position Center Center.
If your image is too big, you can use the Custom option on Size and adjust the image width accordingly.
Note: you can place texts and images side-by-side using many sections if you like. Anything is possible.
To make a pop up using Elementor, you must add the button to a certain position.
As an important call-to-action prompt, place the button with enough white area on the popup.
Click on the button widget, go to the Advanced tab, and then Positioning.
Now, change the Position from default to Absolute and adjust using the offset values.
You can change the button style using colors and stuff to make it look more eye-catching.
Perfect!
You have just made an awesome pop up using Elementor.
Step 4: Finalize Template
Now that your pop up template is completed, it’s time to save it in Elementor.
To do that, click on the section settings icon using the Right mouse button and click Save as Template.
Next, you will get a name field and a Save button.
Give a name to the template and hit the save button.
With that, Elementor just imported the design into its template library.
Step 5: Make The Elementor Pop up
By using the pop up template with Modal, you can finish making a pop up that will show up inside your webpage.
You need to go to the page where you want to show the pop up.
Drag and drop the Modal widget (by Element Pack) inside the page.
Modal works as a pop up with 4 different settings; default (button operated pop up), splash screen (time operated pop up), exit pop up (exit intend), and custom link.
Let’s go with Splash Screen this time.
Select it from the Layout option.
Then select the time of the pop up.
We used 10 seconds for the pop up.
Any user accessing and staying on the page for 10 seconds will see this pop up appear on the page.
Step 6: Attach Pop up Template
This is the last step.
Just attach the template to modal and you can make any pop up using Elementor.
In the second section Modal, select Elementor Template as the source.
Now from the option Select Template, scroll until you find the template you have just made and choose it.
You will see the pop up instantly as a preview.
Here, you will find Header & Footer text field alongside the template.
Both will appear by default.
You can show any text if you like or simply erase them to turn them off.
One more thing, you can keep the close button on the pop up or choose to remove it.
It’s totally your choice.
See Pop up in Action
Just to make it clear to you, let me show you the pop up in preview mode.
Awesome, right?
This is how you can make amazing pop ups using Elementor.
Conclusion
Making pop ups is super easy!
With a minimum effort, you can actually get a bunch of traffics using pop ups smartly.
In order to achieve the best result, see this blog:
How to Make Exit Intent Popup in elementor
It will tell you how to design the perfect pop up to grab your potential customers into your buyer list.
Thanks for enjoying the article.
