Create Two Step Modal Popup Effectively?

Popups are widely used on websites to capture leads, promote offers, and improve engagement. The most common types are auto-loading popups and exit-intent popups, which appear without user interaction. However, these can often feel intrusive and interrupt the browsing experience.

A smarter, more user-friendly alternative is the two-step modal popup—a popup that appears only when a user clicks a button or link.

In this guide, you’ll learn how to create a two-step modal popup using Elementor (free) and the Modal Popup widget from Elementor Addon Elements — no coding or Pro version required.

Key Takeaways: What You’ll Learn

• Understand how two-step popups work and why they’re better than auto-loaded popups
• Discover real use cases like lead capture, contact forms, or image carousels
• Learn how to create popups using Elementor Addon Elements’ free Modal Popup widget
• Design and link multi-step popups using Elementor Page Templates

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 the visitor interacts with a specific element, like a button or link.

This strategy is ideal for:

• Newsletter sign-ups
• Lead capture forms
• Showing promotional content
• Embedding contact or feedback forms

Unlike auto-loaded popups, two-step popups feel less intrusive, improve user experience, and increase engagement without disrupting flow.

They provide a cleaner, more respectful way to present meaningful content, especially on high-converting landing pages.

Why Use the Modal Popup Widget in Elementor

For Elementor users, Elementor Addon Elements offers the “Modal Popup” widget in their free version, providing advanced and powerful features to create and customize popups effortlessly.

This versatile widget offers multiple trigger options, allowing you to create and display various types of popups on your website. You can set a popup with Saved Sections, Saved Pages, AE Templates, or even write your own content.

It’s important to note that in the free version of Elementor, you can only create templates using the Page option.

Here are the key benefits of using the Elementor Addon Elements “Modal Popup” widget on your Elementor website:

• Multiple trigger options for displaying popups.
• Simple customization process.
• Capability to add effects to the popups.
• Ability to preview popups while editing.
• Option to upload images as modal buttons.

Popular Types of Website Popups You Can Create

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.

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 Modal Popup widget, you can refer to the 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.

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

Build Better Popups in Elementor

In conclusion, creating a two-step modal Popup using Elementor and Elementor Addon Elements free version is a straightforward and effective way to engage users with your website content. By breaking the information or actions into separate steps, you can present complex or lengthy content in a more user-friendly manner.