How to Add Modal Popup in Elementor

June 14, 2024

Are you looking to add Modal Popup to your Elementor website?

Popups can play an important role in your marketing strategy. They allow you to capture leads, promote your best deals and offers, and showcase your featured products and services.

Creating popups in WordPress can be a bit challenging.

Thankfully, Responsive Addons for Elementor plugin has come up with an easy way to implement a popup on your site.

In this article, we’ll provide an overview of creating a popup using Responsive Addons for Elementor plugin.

Let’s get started!

Table Of Contents

Things You’ll Need To Make a Modal Popup
- 1. Elementor Page Builder
- 2. Responsive Addons for Elementor
How to Add a Modal Popup to Your Elementor Website
How To Use the RAE Modal Popup Widget?
FAQ
Conclusion

To create an Elementor modal popup for your WordPress website, you’ll need to ensure that you have installed the following plugins:

1. Elementor Page Builder

Elementor allows you to create attractive pages using a simple drag-and-drop interface. If you haven’t done so already, installing Elementor is the first step.

Get Elementor

2. Responsive Addons for Elementor

Responsive Addons for Elementor plugin provides over 80 widgets, including a dedicated free Modal Popup widget.

With this plugin, your popups will appear flawless and function seamlessly across all devices, from desktops to smartphones.

Get Responsive Addons for ELementor

Without further ado, let’s see how to easily add a Modal Popup widget to your Elementor site.

Step 1: Install and Activate Responsive Addons for Elementor

Navigate through your WordPress Admin dashboard and go to Plugins > Add New Plugin.

Go to the search bar above and type Responsive Addons for Elementor. N

ext, click Install Now to install the plugin.

Click on Activate button to activate the plugin.

[Note: The Widget will only work for a page built with Elementor]

Once you activate the plugin, open the page where you want to add the widget. We’ll use Interior Design WordPress Website Template for this tutorial.

Click on Edit With Elementor on the page you want to edit.

Next, on the left sidebar, search for the Modal Popup. Drag and drop the widget in the section where you want to add it.

Once you’ve added the widget, let’s look at how we can customize the widget.

The widget allows you to customize various features:

Content

It has the following options to customize:

Content Tab

Preview Modal Popup: This allows you to see a live preview of your modal popup as you make changes.
Title: Set the title text displayed within the modal popup.
Content-Type: Choose the Content you want to display in the popup. Options include Text, Image, Video, Embedded, etc.
Photo: If “Content-Type” is set to Photo, you can upload or choose an image for the popup.

Popup Tab

Modal Popup Width: Define the width of the modal popup window.
Appear Effect: Select the animation effect when the modal popup appears (e.g., Fade In, Slide Up, etc.).
Overlay Color: Set the background color for the area behind the modal popup (usually a semi-transparent dark color).

Close Button Tab

Close As: Determine how the user closes the modal popup. Options include icons or images.
Close Icon: Choose the icon displayed to close the popup.
Size: Set the size of the close button.
Color: Define the color of the close button icon.
Image/icon position: Specify the location of the close button within the modal popup.
Close on ESC Press: You can enable or disable closing the popup by pressing the Escape (ESC) key on the keyboard.
Close on Overlay Click: Enable or disable closing the popup when the user clicks outside the modal popup (on the overlay area).

Display Settings Tab

Display Modal On: This setting determines when the modal popup appears.
Button Text: Write the text displayed on the button that triggers the popup.
Alignment: Choose the alignment of the trigger button.
Size: Define the size of the trigger button.
Padding: Set the padding around the text or icon within the trigger button.
Icon: Choose an icon to be displayed alongside the trigger button text.

Widget Styling

Here, you can style the Title, Content, and Button of the widget.

Title

Control the appearance of the popup title. Options include Alignment, Padding, Color, Background Color, HTML Tag, and Typography.

Content

Define the background color and padding within the popup content area.

Button

Style the trigger button’s appearance, including text formatting, background, and borders.

These settings allow high customization for your modal popups.

Now that you know how to add a modal popup widget to your website, you can access the customization settings.

Let’s understand how I used them to create a functional modal pop-up. You can follow the same steps to customize and style it or make changes as necessary.

The modal popup is a dynamic widget and offers many customization and styling options.

To begin with the content customizations, I first toggled on the preview to get a clear idea of the changes and changed the title to match the website’s appeal.

For the content type, I chose photo and uploaded an aesthetic picture to complement the modal popup.

To further customize the modal popup, I adjusted its width and used a fade-in and scale effect to give users an engaging experience when landing on the website. Additionally, I added a grayish overlay effect.

I kept most things as default for the close button setting, including the close button as an icon, color, and position.

I made a few adjustments in the icon size and toggled on close on ESC keypress and overlay click for a better user navigation experience.

Moreover, I kept the display modal automatic to optimize the display settings and toggled on exit intent. For the popup appearance, I set the system to appear after eight seconds of the user’s landing.

Undoubtedly, the widget provides many content customizations, which I did, and you can similarly follow or make changes as per your requirements.

Next, I started styling the pop-up, beginning with styling the title. I changed the title alignment to center and the content padding. Additionally, I changed the title and background color.

The widget’s typography looked a bit off, so I changed the font family, size, and style to create a better appeal.

With these customizations and stylings, the popup looked good, so I kept the content styling minimal, matching the content color to the title background and slightly adjusting the padding.

Once I successfully implemented these customization settings, the final appearance of the modal popup looked like this:

FAQ

How do I add an Elementor Modal Popup?

To create a modal popup on your Elementor website, follow the steps below:
1. Install and activate the Responsive Addons for the Elementor plugin.
2. Edit your page or post using the Elementor editor.
3. From widget search bar, search for “Modal Popup.”
4. Drag and drop the widget wherever you want to add it on your page.
5. Customize the popup’s content, settings, and appearance.
6. Once you’re done with the changes, publish your content. The popup will now be live on your website.

What is WordPress Modal Popup?

WordPress Modal Popup is a widget for creating custom popups on your WordPress website. It offers multiple customization options to make your popup look appealing to your audience.

Can I Add a Modal Popup to my WordPress Website for Free?

Yes, you can add a free modal popup to your WordPress website using Responsive Addons for Elementor plugin. This plugin lets you easily create and customize modal popups without any coding.

Conclusion

Popups are crucial for your lead generation and marketing efforts. They allow you to engage with visitors and retain their interest in your page.

Creating customized popups for your WordPress website is a breeze with the Responsive Addons for Elementor plugin.

Simply install the plugin, drag and drop the widget, and customize it to match your website’s branding. It’s that easy!

If you liked this article, don’t forget to check out our other articles as well:

Looking to add popup to your Elementor website, grab the Responsive Addons for Elementor now! Additionally, you can enhance your website building process by using the Responsive theme.

Disclosure: This post contains affiliate links. That means if you make a purchase using any of these links, we will earn a commission without any extra cost to you. Thanks for your support.

Join over 30k users who use Responsive Theme for building professional websites.

Ready to Launch Your Website?

Ready to built your business website with the fast and fully customizable website templates? Get started for free and extend the settings with easy affordable plans.