WPMet Site Logo
  • Home
  • Plugins
    • ElementsKit
    • ShopEngine
    • GetGenie AI
    • MetForm
    • WP Social
    • WP Fundraising
    • Wp Ultimate Review
  • About
  • Blog
  • Support
  • Contact
  • My Account
WPMet Site Logo

How to Add Modal Popup In WordPress Website Easily : 3 Steps Tutorial

Editorial StaffEditorial Staff Updated on: December 31, 2022 Elementor ElementsKit WordPress 7 Min Read
add_modal_popup_in_wordpress

Did you know that a recent study on 2 billion modal popups had a 9.28% conversion rate among the top 10%?

Yes. Popups make website visits user-friendly and help you gain more newsletter signups fast. Popups have changed drastically in how they look and function. As a result, they are becoming more popular on modern websites now than ever.

Do you also want to add modals to your website and leverage the benefits it has to offer?

Then this blog is exactly what you need. This is the only guide you will need to learn about popup modals and how to easily add them to your WordPress website. 

Contents hide
What is a Modal Popup?
Setup You Need To Get Started
How To Add Modal Popup In WordPress In 3 Steps In Elementor Using ElementsKit
How To Add Custom Design In Elementor Modal with ElementsKit Popup builder
Use Premade ElementsKit Sections For Beautiful Modal
Add Contact Form 7 in Modal with ElementsKit
Wrap up

What is a Modal Popup?

Modal popups are very common and it’s highly unlikely that you haven’t come across one. But do you know the definitions of the modal popup? Let’s have a look.

A modal (also called a modal window or lightbox) is a web page element that displays in front of and deactivates all other page content. To return to the main content, the user must engage with the modal by completing an action or by closing it.

– Hubspot

Modal windows are different from old modeless dialog boxes. In modeless pop-ups, users have access to the whole window even when the popup is on. So, they can ignore the popup and continue to do their work.

On the other hand, the new modal popup creates a new “mode” in the form of a child window and disables the parent window. As a result, the user can not work on the original window until he takes some action or closes the modal popup. 

What’s the benefit? The benefit is you have your website’s visitor’s attention even if it is for a second or two. And getting the user’s focus on your message is what you need, right? 

Because if they see what you have to offer, they will stick around for more than a second, which will ensure you a lead.

Why Use Popup Modal In Your WordPress Website

Most people think popups are annoying. Of course,  I am not blaming them. You go to a site to do your work and suddenly a popup arises and interrupts, it is surely annoying. 

But being a business owner, you need to look at a popup differently. Because believe it or not these annoying popups work like wonder. Popup modals are proven to be extremely successful especially in the lead collection.

According to Sumo, they collected about 23,645,948 email addresses in less than two years using a popup modal. In many cases, the conversion rate went up to as high as 50.2%! 

So, if you are looking to boost your email list and accelerate your conversion rate, modal pop is your thing as these are proven lead magnets.

Moreover, modals are simple and flexible and you do not need to send users to another page to complete an action. More leads with better user experience. So, never think modals are useless or dead and start using them today.

Common Uses of a Modal Window In Modern Web Design

Modals are highly effective whenever you need website visitors to take some action or notice some important message. Some of the common uses of a modal window in web design include:

  • Show Welcome Message
  • Collect email and lead for newsletter subscription
  • Login form
  • Show warning message before taking an action
  • Display cookie policy
  • Display media like image gallery(product) or video etc.  
  • For multi-step forms for a better user experience.

I have listed only a few of the many ways of using modal in web design. Once you know how to create one you will find various ways to use them on your website for optimal results. 

So, let’s get started.

Setup You Need To Get Started

I am assuming you have WordPress installed on your website. Besides that, you will need a page builder and a WordPress popup plugin to make modal in your website:

  1. Elementor (free version)
  2. ElementsKit (both free and pro version)

Elementor is a free page builder and ElementsKit is one of the best WordPress modal popup plugins.

Done installing? now you are all set to create a popup on click in WordPress! Let’s start the main process now.

Check Out ElementsKit Features
Download ElementsKit gif

How To Add Modal Popup In WordPress In 3 Steps In Elementor Using ElementsKit

If you think adding a popup to your WordPress site is hard, ready to get surprised. Follow the steps below and easily create an Elementor modal popup in wp easily. This is the easiest tutorial on how to add popup in WordPress.

Step 1: Enable Modal Popup Widget

  • Go to  ElementsKit  > Widgets > Turn on Popup Modal > Click Save Changes
enable ElementsKit popup widget WordPress modal popup Elementor modal popup
Enable Modal Widget

Step 2: Add Modal 

  • Search for a popup modal, drag and drop the widget on the section you want your Modal to appear.
drag and drop modal popup how to add popup in wordpress
Drag and Drop Widget

Step 3: Configure Settings To Complete

Click on the Edit icon on the popup section to go to the edit options.

  • To change the button text go to Content > Toggle Button > Label and edit
change toggler button text
Change Toggler Button Text
  • To change the title and subtitle go to Content > Header and change the options with your custom text.
change title and subtitle modal
Change Title and Subtitle
  • To change the content of the body, expand the content section and edit the text.
edit body text modal popup
Change Body Text
  • Go to Content > Footer > Button > CTA and change the CTA label and URL
change CTA text and url modal popup
Change CTA and URL
  • Finally, click on Update to save.

Done. Now click on the preview button to see the results.

modal preview
Preview

Well Done! You have created your Elementor modal popup.

Additional Settings For Modal

additional settings modal popup
Additional Settings

Now let’s have a look at the additional modal settings you can customize :

Layout:

Expand the layout option to change toggler type, popup position and popup show up option.

Toggler Type:

You don’t necessarily have to have a modal that triggers when someone clicks a button. ElementsKit offer you 2 more options to choose from besides button

Image: You can choose any custom image of any size instead of a button as a toggler for your modal. To choose a custom image 

  • Go to Content > Toggler Type > Choose Image
  • Go to Toggler Image > Choose an image, image size, and alignment

Time: You can also set the modal to trigger after a specific time without any action from the user. For example to set your modal to appear after 3 sec

  • Go to Content > Toggler Type > Time
  • Add time in Toggle After (in Seconds)
Popup Show Type:

You have two options for popup show type: Modal and Slide.

Popup Position: 

You can choose to place your popup anywhere in the window. The available position options to choose from are:

  • Top Left
  • Top Center
  • Top Right
  • Center Left
  • Center
  • Center Right
  • Bottom Left
  • Bottom Center
  • Bottom Right

Popup: 

Expand the popup option to choose the width and minimum height. Here you also get the option to show or hide the close icon, header, and footer. You can also adjust the horizontal and vertical position and add animation according to your wish.

Overlay: 

In case you don’t want to force the user to click on your modal to close it, turn on the Close Popup OnClick Overlay option. This way, the user can click anywhere on the window to dismiss the modal.

Close Icon: 

Here you can change the position of the close icon. You can set popup top right, popup top left, window top right, window top left. You can also change the vertical and horizontal positions. Moreover, you can choose any icon from the library or use an SVG image as an icon.

Header:

Apart from changing the title and subtitle, you can also show or hide the divider from here.

Footer:

Expand the footer option to change the Label, Variant, and Alignment of the footer buttons. You can also choose to hide them if you want from here. 

How To Add Custom Design In Elementor Modal with ElementsKit Popup builder

Now, you know how to change text, position, animate, and do much more to customize your modal window. But it still looks a little boring, right?  Just like any other WordPress modal popup.

If you can add a custom image or a video or any other widget in your modal window just like a page, it would be so awesome. You can add any custom design to your model with ElementsKit.

Follow the steps to easily create your desired custom design on modal:

  • Go to Content > Content > Turn on Enable Template
  • Click on modal button and once the modal opens, click on the edit option to open the widget area
enable template Elementskit elementor popup modal builder elementor modal
Enable Template
  • Once the widget area is open, you can search for any widget > drag and drop > update to save.

For example, if you want to add a video, then search for the video in the widget area and drag and drop to add in your model and update. Now, the video should appear in the modal window.

video in WordPress modal popup modal Elementor  how to add popup in wordpress
Preview Modal with Video
Download ElementsKit gif

Use Premade ElementsKit Sections For Beautiful Modal

Don’t have the time to create a design from scratch? No worries. ElementsKit popup builder provides many built-in sections that you can choose to create engaging modals to highlight your message to the viewer.

WordPress modal popup Elementor Modal popup
Open ElementsKit Widget Section

To use built-in widgets from ElementsKit, follow the below steps:

  • Click on the edit option on the modal  to open the widget area
  • Click on the EK Button to open another widget window with the premade sections.
  • Go to > Sections > Choose the section you like > Insert
insert premade section by ElementsKit to your WordPress modal popup elementor modal
Search And Insert
  • After the insertion, you can change the image, texts or background color according to your preference and update.

And here is the final result!

elementor modal popup with premade section by ElementsKit  WordPress pop up
Preview Modal with Premade Section

ElementsKit offers 60+ Widgets and 500+ Ready Sections. Learn more about ElementsKit and how to use them to enhance your website.

Add Contact Form 7 in Modal with ElementsKit

Like I said before, modals are effective in getting more newsletter subscriptions and collecting user data. But for that, you need to add a contact form in your modal, right? 

Don’t panic, you will not need another WordPress popup plugin to add a contact form in your pop window. ElementsKit WordPress plugin is an all-in-one popup maker plugin.

Follow the instruction below to add popular Contact Form 7 in your modal with the ElementsKit popup maker plugin.

Before you follow these steps, make sure you have created a contact form on your website using Contact Form 7, Elementor Page builder, and ElementsKit.

You can also have a look at the video tutorial below to create a contact form.

Let’s get started.

  • Go to Content > Content > Turn on Enable Template
  • Click on the edit option to open the widget area
  • Search Contact Form, drag and drop on the section you want to add it.
  • Expand the style option under contact form 7
  • Choose from premade form and update.
elementor modal popup with contact form 7  WordPress pop up
Modal With Contact Form 7 Preview

Here you have a modal popup with a contact form to boost your email list.

Did you know that you can create a custom widget without having any deep coding knowledge? Check how to build a custom widget easily without any code using ElementsKit.

Wrap up

Congratulations! Now you know how to create Elementor popup modals using an Elementor Addon, create contact form popups, and do any customization in the WordPress site effortlessly using the easy popup maker plugin ElementsKit Pro and Elementor Page builder.

Don’t just stop here. Keep experimenting on how many ways you can use popup WordPress modal on your website. And if you need any help with building WordPress pop up using ElementsKit, leave a comment below.

To learn more details and read more blogs on WordPress plugins join our community on Facebook and Twitter. If you prefer video tutorials, subscribe to our YouTube channel.

Download ElementsKit Now
Download ElementsKit gif
  • Share :

How to Create Team Member Section With Elementor for Free

Previous post

12 Useful And Best Shopping Cart Plugins For WordPress And WooCommerce 2023

Next post

4 Comments

  • Reply
    Steve says:
    January 26, 2022 at 9:16 pm

    There should be an option to create a popup modal using a text anchor link.
    Then this could be used with simple text links and icons etc.
    Personally I don’t want a button or image to click on, I would simply like to click on a text link and the modal pops up.

    • Reply
      Dipa Shaha says:
      January 27, 2022 at 6:11 am

      Steve,
      I hope you are doing well. Unfortunately, we don’t have the option you want right now.
      But apart from button and image, we also have a time toggler type which makes the popup appear after a certain time which you can set manually. You can try that one too.
      And, we welcome any new ideas. If you want this feature, you can request using this link https://wpmet.com/plugin/elementskit/roadmaps/

  • Reply
    Quint says:
    June 30, 2022 at 9:58 pm

    Can multiple modals be triggered by clicking one button? For instance, when a button is clicked two modals are rendered side-by-side or vertically (depending on window size), where the user is requested to select the button on modal one or modal two–A/B designs for example. The idea here is to manage/humor span-of-attention by presenting information/visuals in bite-sized pieces.

    • Reply
      Dipa Shaha says:
      July 3, 2022 at 4:27 am

      Dear Quint
      Unfortunately, the feature you want is not available. However, you can request for this feature. ElementsKit team is always happy to receive feature suggestions.
      You can request feature using this link https://wpmet.com/plugin/elementskit/roadmaps/#ideas
      Thank you

Leave a Reply Cancel reply

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

Get Subscribed Today!

WPMet Site Logo
© 2022, Wpmet. All Rights Reserved. Built with ElementsKit.

Company

About us
Contact us
Support
Blog
Collaborate
Documentation

Resources

Affiliates
Affiliate Area
Privacy Policy
Terms & Conditions
Refund Policy
Login/Register

Our Products

Elements Kit
ShopEngine
GetGenie Ai
Metform
WP Social
Wp Ultimate Review
Wp Fundraising

Follow Us

Payment systems accepted by Wpmet

Wpmet is not affiliated with or endorsed by Open Source Matters or the WordPress Project. The CMS logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Opt out!.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Vendor/Partner
SAVE & ACCEPT