How to Create Modal Popup in WordPress Website

How to create modal popup with WordPress

If done correctly, modal popups can significantly boost your website’s conversion rate, collect qualified leads and ramp up your sales volume.

In this tutorial, I’m going to explain what a modal popup is, its benefits and the difference between a modal popup and a regular popup.

Then I’ll show you the way to create a modal popup for an Elementor powered website. Finally, I’ll guide you through creating one for a non-Elementor powered website.

So, let’s build some popups!

What Is a Modal Popup?

A modal popup or dialog box is a window that appears on top of a web page after clicking on a button, image or other CTA. It takes over the page and you actively have to close it to access the contents.

You can use modal popups to display discount offers, daily specials, seasonal offers or to provide extra information about a product or service that can drive a sale.

You can also use them to ask a question, deploy an email opt-in, or request feedback on your products.

Modal popups are typically easy to use and can be closed by clicking the close button, hitting the ESC key, or simply clicking the outside area of the popup.

You have probably seen hundreds of modal popups over the past few days, we know we have!

Here are a couple of examples…

Modal popup example

Here is a real-life example. If you have ever visited JiffyShirts, you may find the following modal popup.

JiffyShirts popup

Why Should You Use a Modal Popup on Your Website?

Using a modal popup for your website is a great way to convert your visitors into paying customers.

For example, you can display a form inside the popup to collect user data without having to clutter up your page with too many fields.

Later, you can use the user data in your email campaign or other retargeting ads. If you collect user first name and email address, you can even send personalized emails for extra engagement

How to Add a Modal Popup in WordPress Using Elementor

If you are using an Elementor-powered WordPress website, I suggest using Ultimate Addons for Elementor.

The tool comes with a modal popup widget along with other useful tools.

Currently, it has 40+ widgets and 300+ creative responsive templates.

Not only will it allow you to create modal popups for your Elementor-powered website, but it will also give you a bunch of other features.

To add a modal popup with the Ultimate Addons for Elementor, follow these steps:

Step 1: Install and Activate the Ultimate Addons for Elementor Plugin

Go to the official website of Ultimate Addons for Elementor and get the plugin from there. Once you get the ZIP file, you are ready to install it.

To install the plugin, head to your WordPress admin dashboard and then go to the Plugins > Add New section.

modal popup plugin - add new

Now, upload the plugin using the Upload Plugin button.

modal popup - upload plugin

Now, select Choose File to upload the zip file you downloaded.

modal popup plugin - choose file

Click on the Install Now button.

modal popup plugin - install now button

Now Activate the plugin.

modal popup plugin - activate

Now, select the Activate License option to insert the license key.

modal popup - activate license

After you enter the license key, hit the Activate License button.

enter license key - activate license button

Now, you will be able to see the success message provided you enter the valid license key.

modal popup plugin - license key activation successful

Congratulations! You have successfully installed and activated the Ultimate Addons for Elementor plugin.

Step 2: Adding a Modal Popup

To add a modal popup, you need to edit a page with Elementor. Let’s add one on the home page.

Navigate to the WordPress admin dashboard and then go to Pages > All Pages.

modal popup plugin - pages - all pages

Select Edit with Elementor for the page you want to edit.

modal popup plugin - homepage - edit with elementor

Next up, you’ll find the Elementor widget area as marked with the red rectangle below.

modal popup plugin - elementor widget area

Now search for the keyword, “modal” in the search bar. After that, you’ll get the Modal Popup widget.

search with the keyword, "modal"

Now drag and drop the Modal Popup widget to the place where you want. In this case, I’m going to replace the FIND MORE button with the Modal Popup widget’s button.

drag-and-drop-the-modal-popup-widget

Now, I’m going to delete the FIND MORE button. To do so, hover over the button and click on the pencil icon.

click-on-the-pencil-icon

Click the Delete option.

click-on-delete-option

Now, let’s place the button on the right side of the SHOP NOW button.

To do so, right-click on the new button, CLICK ME.

right-select-click-me-button

Select the “Edit Modal Popup” button.

select edit modal popup button

Now, select the “Advanced” tab.

select advanced tab

Select the Width dropdown menu.

select width dropdown

Now, click the link icon to unlink the values.

unlink the values selecting the link icon

Give padding of 20px to the left.

give a value to 20px for the left side padding

Now, let’s see how the modal popup appears. Click on the button to see how the users see it.

select the CLICK ME button to see the preview of the modal popup

Here’s the preview of the modal popup:

modal popup preview

Update the changes.

update changes

Congratulations! You have successfully configured the modal popup.

Please note that you can insert any type of content on the modal popup. Feel free to experiment to discover all the functionalities.

Use a Functional and Beautiful Modal Popup With the Ultimate Addons for Elementor

If you want to use more attractive custom designs for your modal popup, you can use the Saved Section option.

Modal popup - using Saved Section option

However, to use the feature you need to have sections already created with Elementor.

Here’s an example of a modal popup using the Saved Section option.

How to Add a Modal Popup in WordPress for Non-Elementor Websites

Now, let’s see how you can add a modal popup for a WordPress website that does not use Elementor.

Step 1: Install and Activate Convert Pro

First, you’ll need to install a plugin called Convert Pro. It’s a premium popup plugin that helps create sales funnels as well as modal popups.

Aside from creating modal popups, this plugin can help you create email opt-ins and increase leads.

This is a paid plugin and you can get the plugin from the official website.

Upon downloading the pro version, head to the WordPress admin dashboard and navigate to the Plugins > Add New.

modal popup for nonelementor website - plugins - add new

Now, upload the plugin using the Upload Plugin button.

modal popup for nonelementor - upload plugin

Now, select Choose File to upload the zip file.

modal popup plugin - choose file

Click the Install Now button.

modal popup for nonelementor website - install now

Hit the Activate Plugin button.

modal popup for nonelementor website - activate plugin

On the next page, you can enter your license by clicking the Activate option.

modal popup for nonelementor website - activate

Now, enter your license key in the input field.

modal popup for nonelementor website - license key

After that, hit the Activate License button.

modal popup for nonelementor website - activate license

You should see a success message.

modal popup for nonelementor website - success massage

That’s it! You’re done with installing and activating Convert Pro.

Step 2: Create and Configure the Modal Popup With Convert Pro

To create a modal popup using Convert Pro, navigate to the WordPress admin dashboard.

After that navigate to Convert Pro > Create New.

modal popup with Convert Pro - convert Pro - create new

At this stage, you’ll be able to see a bunch of Call to Action types.

Select Modal Popup by hitting the SELECT button.

modal popup with Convert Pro - select

Select a modal popup template. I’m selecting this one (SUBSCRIBE TO OUR NEWSLETTER) for this tutorial:

modal popup with Convert Pro - SUBSCRIBE TO OUR NEWSLETTER

Next, name your call to action or modal popup. I’m naming mine “Newsletter subscription modal popup”.

modal popup with Convert Pro - Newsletter subscription modal popup

Select the Create button.

modal popup with Convert Pro - create

Now, you’ll see an editor panel where you can design, configure and publish your modal popup.

Initially, you’ll land on the design section where you can build your modal popup much like a page builder. So, feel free to play around with the buttons, texts and images.

But I’m going with the default design.

Click the Configure tab.

modal popup with Convert Pro - configure

By default, it is set to trigger in the event of a certain period of a session. Meaning, a popup will appear 1 second after a visitor lands on the page.

But we don’t want that automatic trigger option. So, we’re going to turn it off as we’ll use a button or image to trigger the modal popup.

To do so, click the “After Few Seconds on Page” option.

modal popup with Convert Pro - After Few Seconds on Page

Click the toggle button to turn it off.

modal popup with Convert Pro - Click on the toggle button to turn it off

Now, select On Click.

modal popup with Convert Pro - on click

Click the toggle button to turn it on.

modal popup with Convert Pro - Click on the toggle button to turn it on

Now, select the Copy Link Code button so that you can use the code on any page.

modal popup with Convert Pro - copy link code

Click Save.

modal popup with Convert Pro - save

Make it public by switching on the toggle bar.

modal popup with Convert Pro - Make it public by switching on the toggle bar

Step 3: Placing the Modal Popup on a Page

Navigate to the WordPress admin dashboard and then select Pages > All Pages.

Placing the modal popup on a page - Pages - All Pages

Now, select the page that you want to implement the modal popup. In this case, I’m selecting the Home page.

Placing the modal popup on a page - home

If you get the dialog box, close it using the (X) button.

Placing the modal popup on a page - dialog box

Now, click on the plus icon at the top of the page to see the available blocks.

Placing the modal popup on a page - click on the plus icon

Now drag and drop the Custom HTML block onto the page.

Placing the modal popup on a page - Custom HTML

Paste the code that you copied in step 2 into the HTML block.

Placing the modal popup on a page - paste the code

You can change the text or use other elements like button tags or image tags if you want.

Placing the modal popup on a page - like button tags or image tags

Update the page when you’re done.

Placing the modal popup on a page - Update the page

Congratulations, you just created a modal popup!

Here is the preview of the modal popup when a visitor comes on your website and clicks on the CTA.

Bonus Tip: Using a Button or Image as the Trigger

With Convert Pro, you can also use a button or image as the trigger.

I made a video that shows you how to create a button as the trigger for the modal popup.

Now, It’s Your Turn

Now that you know how to create modal popups on a WordPress website, it’s your turn to give it a try.

If you’re already using one of these tools to create and configure the modal popup for your WordPress website, feel free to share your thoughts below.

If you liked the post, don’t forget to subscribe to my website so that you can get more exciting tips, offers and newsletters directly in your inbox.

Leave a Comment

Your email address will not be published. Required fields are marked *

Want To Know My Go-to Tech Stack for Building WordPress Sites?

Get immediate access to my top recommendations for hosting, themes, plugins, and more!