modal-popup-elem

8 minutes

How to make modal popup on Elementor?

Want to create Elementor modal popup? This guide will cover all the things that you need to see. We will see various ways by which you can do this. The guide will cover an in-depth tutorial on the same. As a result, you will be able to create your modal popup with ease. It’s easy and won’t take long to create the same. We will see multiple ways to create a popup using your favorite builder that is Elementor builder.

So, without wasting more time here, let’s get started and see what are the ways you can create the popup for yourself. We will first learn more about the same.

What is Modal Popup?

You obviously have a head about a popup right? When you visit a website and you see a sudden box asking for your email address is the popup. Now, this is very common as these popups have been on the internet for a long time. It’s an ultimate way to tell the users about a discount offer or ask them for the email address.

Modern days website owners also use it to offer freebies. They will ask for your email address in return. Now, a normal popup can be very different from the website.

The modal popup is something similar. A modal popup will use the same theme as the website. So, the users will feel like the popup is the best suited for the website. Of course, the users can easily know that it’s the popup but they will feel like it’s a part of the website.

Hence, the modal popup is more popular these days.

Now, if you are wondering whether you can create a modal popup using Elementor, your answer is yes. You can easily create a modal popup using Elementor.

Different ways to create Modal Popup

Now, there are three ways you can create Elementor modal popup.

As you might be knowing there is a free version of Elementor available. However, the bad news is that the free version can’t help you to create an Elementor modal popup. For that, you will have to go with the pro version.

It’s a bit hard to create a modal popup using the pro version too. Therefore, we will see an easy way to do it.

The easy way is to get a third-party addon. You can go with a third-party addon and they will allow you to create a modal popup in the easiest way possible.

Now, some people might already have the pro version of Elementor and some will be planning to get one. So, this guide will cover all three ways. If you are wondering what’s the third way, it’s the same as the second one. We will use another third-party plugin to add the popup. The only difference is that the third plugin is free to use but there are certain limitations. We will learn more about it as we move further.

We will first see how you can create a modal popup using the pro version of Elementor and then we will see the same for the third party addon. It will cover almost all the things that you need to know about creating the popup. So, there is nothing to worry about.

Take a mug of coffee and follow the steps.

Create Elementor modal popup using Elementor Pro

At first, you need to get the pro version and pay for it. You can do the procedure and then follow the steps. We won’t cover the basic steps like installing the plugin, etc.

Instead, we will directly get to the point and cover more important things.

Step 1: Creating the Layout

At first, you need to reach the layout. When we create a page, we go to New > Page and then select a layout.

Here, we are not creating a page, hence, we will have to directly select a template.

For that, you can open your WordPress dashboard and then head over to the Template. When you go to the template option, you will have to select the Popup option.

It will show a bunch of popups if you have imported the data. If not, there will be an option to add a new popup. We will directly click on the add new popup and then do the rest of the procedure from there.

When you click on add new, it will create a blank layout.

Step 2: Creating a Template

As we are creating an Elementor modal popup, we will have to fix a template. If we have a template, we can call it an Elementor modal popup.

You can give any name to the template. If you are learning, you can give the name “Elementor modal popup” to get started with.

After you give the name, you are all set to proceed to the next steps.

The next step is where you need to choose a perfect template. Now, if you have a generic theme that is popular, you can use any template from the Elementor templates. However, if you are using any unique or custom-made theme, you will have to give some time to the template.

Here, you will have to create one template of your own. Before you create your template, you can look for the best template that might suit you.

The good thing is that Elementor allows you to customize the template the way you want. So, if you think that colors and some basic configuration are an issue, you can select any template from the given list and then make the changes in the same. In this way, you will have a unique template that suits your theme.

However, if you can’t find any suitable template, you will have to create one by yourself. It won’t take you long as there is some basic customization needed.

The best way would be to take the inspiration from one of the templates and create one accordingly. However, if you are an expert, you can create your Elementor modal popup all by yourself. This depends on your expertise.

Don’t worry, you can get started with the basic template and customize it later which brings us to the next step.

Step 3: Configuration and Editing

This is where you will have to make the changes in the customization panel. Just like you edit the page in Elementor, you can edit the modal popup too.

modal popup elementor

Therefore, you can do the customizations here. It will include changing the size, position, colors, text style, etc. The left panel will have all the options to choose from.

Step 4: Triggers and Conditions

As soon as you hit the publish button, you’ll be asked to set the conditions and trigger. This is where you can set certain conditions on when the popup will show.

modal popup elementor

For example, if you want the Elementor modal popup to show only when the user comes to the home page, you can set the same thing in the condition.

Similarly, you can also set the trigger. This will tell you when the popup should be triggered. For example, you can set 2 seconds after the user visits the page.

Thereafter, you can publish the popup and see if it’s working properly or not.

How to add Elementor Modal Popup using UAE?

modal popup elementor

Elementor has some of the addons using which you can create a modal popup. There is a popular add-on plugin called Ultimate Addons. It’s a paid plugin where you will get access to hundreds of widgets.

The modal popup is one of them. So, if you want to use this, you will first have to get the Ultimate Addons for Elementor from the official website. You can install it as a plugin and activate it.

Thereafter, you can follow the steps given below to create your modal popup.

Step 1: Create the page and add the widget

You can create a page just like you create a normal page in Elementor. You can head over to New > Page and then use the Elementor.

Now, this is where the game begins. You will have to select the widget option from here. As soon as you select the widget option, you will see the modal popup option there. You can then select it.

Step 2: Select the Type

You can then select the type. There are various layouts such as in-video, slide-in, etc. You can select the best one that suits you.

Step 3: Customizations

In the next step, you will have to do all the customizations. Please note that there are no other places where you can set the conditions and trigger.

You will have to do all these things here. In the left panel, you will have three main columns from which you can do all the configurations.

You can change the text, color, size, and even set the triggers from here. Once you have made all the changes to the popup, you can directly publish it. It might take some time for you to figure out how you can set the triggers and conditions.

In the first tab that is the “Content” tab is where you will see the display settings, modal popup settings, and the close button settings. You can set all these options and you are halfway there. This is how you can get started with the customization part.

Once you do the customizations, you can publish it and that’s pretty much it.

How to create a Modal popup for free?

The above two were mainly focused on the paid part. This is where you will have to buy the addon or plugin to get the modal popup. Now, we are going to see a free technique by which you can create a modal popup.

We are going to use an addon here. It’s called Elementor Addon Elements. The plugin is not as popular as the above two. However, if you want to create a popup and get started for free, you can surely use this.

At first, you need to install the plugin and then you can follow the steps.

Of course, there are certain limitations here. The biggest limitation is that you can’t have the popup directly being triggered. The user will have to click on a button to see the popup. This is one of the reasons why people don’t use the free plugin.

modal popup elementor

Further, the template can also be an issue. In the above-mentioned plugins, there are various templates from which you can choose. Here, you will have very basic templates with a very limited amount of customizations available. Hence, you need to keep this in mind while using the plugin.

Steps to create modal popup on Elementor

We will now see the steps on how you can get started.

  • At first, you need to create your Elementor page just like you do it.
  • Now, select the modal popup widget from the addons.

modal popup elementor

  • Thereafter, you will have to select the type of popup whether it’s simple content or mixed content where you will display the text and the images.

modal popup elementor

  • After selecting the type, you can edit the text and images.
  • Thereafter, you can publish it directly.
  • You will see the popup when you will click on the button specified.

This is the best way you can use if you want to show the popup only on button click. For other things, you might want to use the above-mentioned tips.

Final Word

To conclude, this is how you can create Elementor modal popup. There are few ways you can do it. We highly recommend you to use one of the first two methods. As there are more features, you can create a perfect Elementor modal popup and collect the leads as per your choice. Both of them are great plugins. You can use the one that suits you the most. You can have a look at the other widgets that Elementor Pro and Ultimate addons are offering. Thereafter, you can select the best one as per your choice and your requirements.






0/5


(0 Reviews)

Alexey Seryapin

Alexey is a WordPress wizard with 10+ years of experience as a lead developer, He has launched 500+ WordPress websites and 100+ WooCommerce shops.

WEBSITE UP TO DATE & SECURE WordPress Maintenance Service

Save 17% with our Annual pricing plan.

IS YOUR WEBSITE HACKED?

WordPress Malware Removal Service

We fix any WordPress hack and make your website hackproof.

Related Posts

what-to-choose

Everlasting Dilemma: What to Choose – A Paid WordPress Theme or a Free One?

my-website-to-elem

How to migrate my website to Elementor?

export-template

How to export template in Elementor?

template-import-elem

How to import template in Elementor