Popups are a popular way to capture leads, promote offers, and boost user engagement. But auto-loading or exit popups often annoy users by interrupting their browsing. That’s where two-step modal popups in Elementor come in, a cleaner, user-friendly alternative that appears only when a user interacts with a button or link.
In this guide, you’ll learn how to build a two-step modal popup using Elementor and the free Modal Popup widget from Elementor Addon Elements, no coding or Pro version needed.
Key Takeaways: What You’ll Learn
- What is a two-step modal popup and why it works better than auto popups
- How to build popups using the Modal Popup widget from Elementor Addon Elements
- Step-by-step instructions for using templates and linking popups in Elementor
- Final preview and design inspiration
Want to streamline your workflow even further? Check out how to enhance your Elementor design process using smart widgets and tips.
What Is a Two-Step Modal Popup?
A two-step modal popup (also called an on-click popup) is a user-triggered popup that appears only after a visitor clicks a link, image, or button. It’s less intrusive than auto-loaded popups and delivers better engagement.
Popular Use Cases:
- Newsletter signups
- Contact and feedback forms
- Product promotions
- Welcome messages
- Portfolio previews or image carousels
This type of popup improves user experience, keeps the flow uninterrupted, and increases conversion rates, especially on high-performing landing pages.
Why Use the Modal Popup Widget in Elementor
If you’re using Elementor, the free Elementor Addon Elements plugin gives you access to the powerful Modal Popup widget, which supports:
- Multiple popup trigger types (on-click, buttons, icons, images)
- Dynamic content from Saved Pages, AE Templates, or custom content
- Simple design controls without needing Elementor Pro
- Animation effects and image modal buttons
- Live preview during design
With this widget, you can create fully customized, responsive popups for any use case—all without writing a single line of code.
Types of Popups You Can Build in Elementor
On a website, various types of popups can be used to engage visitors and achieve specific goals. Some common types of popups that can be included in the website are:
- Promotional Popup
- Forms for capturing leads
- Newsletter signup form
- Contact Forms
- Login and Welcome popups
- Restricted content popups
- Exit intent form
- Forms for upselling and cross-selling
- Feedback Collection Popups
- Social Media Engagement Popups
- Survey Popups, and more.
How to Create a Two-Step Modal Popup in Elementor (Step-by-Step)
To utilize this fantastic widget on your website, you’ll need the following essentials:
- Elementor Addon Elements(Free)
- Elementor(Free)
Let’s begin the process of creating a Modal Popup. Follow these simple steps to design an engaging and attention-grabbing popup for your website.
Step 1: Add Modal Popup to the Elementor Editor
To use the Modal Popup widget, start by locating it in the left sidebar menu of the editor. Once found, simply drag and drop the widget onto the desired area of your web page. This action will initiate the setup process for your Modal Popup.
Once the widget is added to your editor, the next step is to configure the popup design.
Step 2: Create a Page Template using Elementor
Note: To create a two-step Modal popup, it is essential to design and customize three separate Page templates according to your specific requirements.
- To create a new template, go to the “Templates” section and click on “Add New.”
- Once you click on “Add New,” a new popup will appear, prompting you to select the template type. Choose “Page” as the option since other trigger options supported by Modal Popup are available only in the Elementor Pro version.
- Next, provide a name for the template and click on the “Create Template” option.
Want to know more about Elementor templates? earn how to manage templates in Elementor to streamline the creation of popup content.
Step 3: Design Your Popup Box
I will create a box with a modal popup button that redirects users to another page template. The box will have a simple layout featuring an icon at the top and some descriptive text below it. Finally, there will be a modal popup button with an icon that takes users to a different page template.
For more detailed information about the control settings of the widget, you can refer the Modal popup widget’s documentation.
As mentioned earlier, to create a two-step Modal popup, you need to create three Page templates. Now, let’s take a look at what the second template looks like.
Here, I’m also using a modal popup button and some text to create a two-step popup.
Now, let’s see the third template, where I utilize the Image Carousel widget to showcase a series of images. Additionally, I have integrated links within the carousel, allowing users to click and be redirected to specific destinations.
You can also use our Dual Button, Advanced Button, Coupon Code, and any other widget inside popups to offer clear call-to-action choices.
Final Preview: What Your Modal Popup Will Look Like
The design of the popup can be customized so you can design the popup according to your website theme, ensuring a cohesive and visually appealing user experience. After making all the desired changes and adjustments, you can confidently publish the template, making the engaging popup box available for your visitors.
After publishing, this is how the popup box appears on the website.
Here are some other exciting possibilities you can do with this Modal Popup widget. To explore the full range of design possibilities available in the pro version, you can check out the Modal Popup Demo.
FAQs on Modal Popup in Elementor
What is a two-step modal popup?
A two-step modal popup appears only after the user clicks a button or link—making it more user-friendly and less intrusive than auto-popups.
How many templates do I need for a two-step popup in Elementor?
You need to create three page templates: one for the trigger, one for the content popup, and one for the final destination.
How do I create a page template in Elementor?
To create a page template in Elementor, go to your WordPress dashboard → Templates → Add New, choose “Page” as the template type, name it, and click “Create Template.” Then, design your content using Elementor and save it.
Can I add forms inside a two-step popup?
Absolutely! You can insert contact forms, newsletter forms, survey forms, or custom form widgets into your modal popup templates.
Do you want to show a Read More popup in Elementor that opens when someone clicks a button? Check out our article.
Build Better Popups in Elementor
Creating a two-step modal popup in Elementor doesn’t have to be complex. With Elementor Addon Elements, you get a powerful and free Modal Popup widget that lets you design clean, user-triggered popups without needing the Pro version.
If you want to display forms, carousels, or lead magnets in a modern and respectful way, this is the perfect solution.
Try the Modal Popup widget and enhance your website experience today!
