Creative, Pixel Perfect, One Page Parallax WordPress Theme. Fit for agencies or freelancers.

How to Add Responsive Popups on WordPress Website?

How to Add Responsive Popups on WordPress Website?

Do you want to add popups on your WordPress website? If you are then, you are in the right place.

In this article, we will discuss a short tutorial of how to add popup banners on WordPress website. These popups can be used for adding different types of call to action elements like email subscription forms, social icons, contact forms, etc to increase the engagement rate of your site. Besides, you can also display various deals/ discounts, announcements, newly launched products, etc to improve the sales and conversions.

How to Add Popups on WordPress Website?

One of the easiest ways to add popups on WordPress website is by using the WordPress popup plugins available on the internet. They come with various inbuilt templates, configuration and customization options to display stunning popup banners. However, all the plugin present on the web might not be good. So, you need to be careful about choosing the right plugin for your website. You must make sure that the plugin is fully optimized with speed and does not slow down the loading time of your website while displaying. Also, you might check out the functionality with the control options to trigger the right popup at the right time.

Here, we will be using WP Popup Banners Pro to get along with the tutorial and add responsive popups on WordPress website. It is a premium WordPress plugin by AccessPress Themes packed with tons of beautifully designed popup templates and various options to configure and customize the popup banners and display them in a stunning way. Moreover, the plugin is well tested and works well on all types of view devices, browsers, and WordPress themes.

Best Features Available on WP Popup Banners Pro:

  • 40 Elegant Popup Templates
  • Create and Add Unlimited Popup on your Website
  • PageWise Configuration Options
  • Configuration Settings for Mobiles
  • Drag and Drop Option Build Custom Popup Templates
  • 9 Different Options to Display Popups
  • Inbuilt Database to Store Subscriptions and Contact Form Logs
  • Different Actions and Display Modes of Popup

Full Details and Features of Popup Banners Pro

Adding Popup Banners Using WP Popup Banners Pro

Now let’s get started with the tutorial and create some attractive popups for your website using the WP Popup Banners Pro plugin.

Step 1:

WP Popup Banners Pro

The first thing you do is purchase WP Popup Banners Pro from CodeCanyon marketplace at a reasonable of $16.

The installation process of WP Popup Banners is same as the installation of other premium WordPress plugins. So, if you feel any difficulties while installing then, you can refer to its documentation.

Also, if you are a newbie and want to learn the installation of the plugin from a step by step guide then, check out the article: How to install a new plugin in WordPress website?

After you have completed the installation, activate the plugin.

Step 2:

Upon the activation of the plugin, you can see “WP Popup Banner Pro” appear on the left menu of your admin dashboard. Click on it to continue.

Landing Page

You will land to the “All Popup” page. This page contains the listing of all the popup banners you have created till date using this plugin. You can preview, edit, or delete any popups from here.

In order to add a new popup, click on “Add New Popup” button available.

Step 3:

You will land to the “Add New Popup” page of the plugin. It contains different settings section to create a new popup banner for your website.

Before, going through the settings, give the suitable name to your new popup banner.

Popup Title

The 1st settings section is select popup theme. It allows you to choose to use either the built-in templates that come along with the plugin or create a custom popup template.

Select Popup Theme

If you have chosen to use the builtin popup theme then, you can select any of the 40 predesigned templates as per the type of popup you need. The inbuilt templates include 21 subscription form popup templates, a login popup template, 6 contact form popup templates, 7 woo cart popup templates and 6 coupon popup templates.

Select Built-in Theme

So, choose the most suitable popup template matching the overall design of your website.

Else, if you chose to build custom popup then, you can drag and drop the inbuilt elements and add the custom text, image, videos on them.

The inbuilt elements for creating custom popup is highlighted in the picture below.

Build Custom Popup

Step 3:

After you have set the template for the popup banner or built custom popup design, move down below on the settings tabs. The settings tabs include various options to customize and configure the popup banner. They are:

Basic Layout Setting:

Basic Layout Setting

The basic layout setting tab will let you configure the basic appearance of the popup in terms of size, positions, background color, background image and shape. You can configure them as per your preference to give a stunning look for your popup banner.

Border Setting:

Border Color

Here, you can enable/disable the border on the popup. If you enable the border then, you can choose its type from 7 pre-available border types. Also, you set its size and pick its custom color.

Miscellaneous Setting:

Miscellaneous Settings


This setting tab will allow you to enable/disable the close button on the popup. If you choose to enable the close button then, you can add the custom icon color and background color for your close button.

Miscellaneous Setting

Also, you can enable the auto close setting of the popup banner after a certain period of countdown time with or without adding a custom countdown message.

Animation Setting:

Here, you can set the animation of your popup by choosing any of the cool pre-designed popup animation effects available on the plugin.

Animation Setting

After that, you can set the custom duration time and delay time for your animation.

Overlay Setting:

This setting section will allow you to enable/disable the overlay while the popup appears on your WordPress website.

If you chose to enable the overlay of the popup then, choose the custom overlay color and image you want to display on the overlay. You can either display the custom color or the custom image or both on the overlay.

Overlay Setting

Besides, you can also configure the overlay opacity, click on action and links on the overlay.

Form Setting:

This setting section will allow you to configure the settings of the form that you want to display on your popup banner.

You can either set the inbuilt form, opt-in subscription form or choose the external party form of MailChimp.

Form Setting

Also, you can enable the option to send the configuration email for opt-in subscription. This will send the confirmation email to your user before adding them on the subscriber list.

This will allow you to keep away the random email addresses entered by your users on the subscription form.

Besides, you can also insert the custom URL to direct your users after they have successfully filled up your popup subscription form.

Email Setting:

This setting will allow you to either choose the default email or the custom email of your email subscriber.

Email Setting

After you have configured everything then, click on “Save” icon to save your popup.

You can view the preview of your newly popup banner by clicking on the “Preview” icon.

Step 4:

Then go to the “Popup Settings” page to configure the main display settings of the popup banners.

The settings include:

General Setting:

Here, you can enable/disable the display of the popup banner on your website and mobile device.

General Setting

On Action Setting:

This setting tab will allow you to choose the popup that you want to display on page load, user scroll, idle condition, and on the hover on browser exit.

On Action Setting

You can choose the display type of the popup, set the pages where you want your popup to be displayed and delay time to display your popup.

Mail Setting:

Here, you can set the username and email address to be displayed to the receiver while sending the mail to your users.

Mail Setting

Also, you can add the email address of the site’s admin to send the mail notification about the successful subscription of your user.

External Subscription Mail:

Here, you can choose the external party for your subscription form (MailChimp). To activate the MailChimp on the plugin, you need to add the API key of your MailChimp account.

External Subscription Setting

Miscellaneous Setting:

Here, you can set the value to determine the expiry date of the cookie if you want to display cookie notification on your popup banner.

Miscellaneous Setting

Also, you can enable/disable the font awesome and animate.css file on the popup.

Wrapping Up

In this way, you can add responsive popups on WordPress website. These popups can be a very useful tool to collect the email address of your users for building your subscriber list for email marketing. Besides, you can also place different announcements, deals, discounts or products to promote them in an eye-catchy way to improve the conversions of your website. So, if you want to give it a try on adding a popup banner on your WordPress website then, you can use the above-mentioned plugin and follow this step by step tutorial.

If you are looking for the detailed comparison of the best-selling WordPress popup plugins then, checkout the article:

Ninja Popups vs Convert Plus vs Layered Popups – Which is the Best WordPress Popup Plugins?

If you are looking for the detailed comparison of the best-selling WordPress plugins for Email Optin then, checkout the article:

Bloom vs OptinMonster vs Thrive Leads – Which is the Best WordPress Email Optin Plugins?

You can also checkout the collection of:

Elegant WordPress Themes


Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.