Did you know that in a recent study on 2 billion modal popups, the top 10% had a conversion rate of 9.28%?
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.
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.
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 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 WordPress, you will need a page builder and a WordPress popup plugin to make modal in your website:
Elementor is a free page builder and ElementsKit is one of the best WordPress popup plugins.
Done installing? Let’s start the main process now.
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 a modal in wp easily.
Step 1: Enable Modal Popup Widget
- Go to ElementsKit => Widgets => Turn on Popup Modal => Click Save Changes
Step 2: Add Modal
- Search for a popup modal, drag and drop the widget on the section you want your Modal to appear.
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
- To change the title and subtitle go to Content => Header and change the options with your custom text.
- To change the content of the body, expand the content section and edit the text.
- Go to contect => Footer = >Button => CTA and change the CTA label and URL
- Finally, click on Update to save.
Done. Now click on the preview button to see the results.
Well Done! You have created your modal popup.
Additional Settings For Modal
Now let’s have a look at the additional modal settings you can customize :
Expand the layout option to change toggler type, popup position and popup show up option.
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.
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 Right
- Bottom Left
- Bottom Center
- Bottom Right
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.
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.
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.
Apart from changing the title and subtitle, you can also show or hide the divider from here.
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 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 modal.
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
- 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.
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.
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
- After the insertion, you can change the image, texts or background color according to your preference and update.
And here is the final result!
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.
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.
Congratulations! Now you know how to create popup modals, create contact form popups, and do any customization in WordPress site effortlessly using the easy popup maker plugin ElemensKit Pro and Elementor Page builder.
Don’t just stop here. Keep experimenting on how many ways you can use modal on your website. And if you need any help, leave a comment below.