DEV Community

Cover image for How to Add a Popup to WordPress Websites Freely and Quickly
GretaThemes
GretaThemes

Posted on • Originally published at gretathemes.com

How to Add a Popup to WordPress Websites Freely and Quickly

When visiting a website, have you ever seen an image or message suddenly shown on the screen? That’s the popup or the notification window of the website.

Popup is a popular and effective marketing strategy, used by a lot of business runners and website owners. To add a popup like that to WordPress, you can use a free plugin to make it quick and simple. Even if you’re not an expert, it takes only 10 minutes to follow our instruction.

Why Should You Use a Popup on a Business Website?

The image below is an example for the popup of a business website. It looks great, isn’t it?

Install and activate the plugin in the Dashboard.

Popup is not only stunning (if you manage to design a well-matching and attractive one) but also have many other benefits like:

  • Promote important information, sale and marketing campaigns,...
  • Call to action, increase conversion rate
  • Generate lead

Add a Popup to WordPress with Popup Builder plugin

To add a popup to your WordPress website, you can hire a credible web design company or a coder. However, to save time and money, plugin is the best option. Among a plenty of popup plugins out there, Popup Builder may be the most easy-to-use and effective.

It is a free plugin and available on wordpress.org, so you just need to install and activate the plugin right in the Dashboard.

Install and activate the plugin in Dashboard.

Upon finishing, follow these steps below.

Step 1: Choose the Popup’s Type

Now the Popup Builder submenu will show up on the Dashboard. Go there, click Add News and choose one of the 4 provided popup’s types.

Click Add News on Popup Builder submenu and choose 1 of 4 popup's style.

For better illustration, the image below is how the 4 types of popup provided by this plugin display on the front end.

There are 4 types of popup.

After choosing the type you want, go to the next step.

Step 2: Add Content to the Popup

First, give the popup a name to manage it more easily.

Name the popup.

Different types of popup need different contents. Let’s dig in each type.

Add Content to Facebook Popups

On the interface to create Facebook popups, you need to fill in these information:

  1. The message that shows up in the popup. You should use a call-to-action sentence to encourage readers to interact. Also, you should add images, banners so that it will be more stunning.
  2. Insert Facebook URL.
  3. Choose a layout for the popup on a whim. Basically, these layouts are not so different. Thus, you can try them out and choose your favorite one.
  4. Click here to hide the share button if you want.

Fill in the popup's information.

And this is what I’ve got:

Result of the Facebook popup.

Add Content to Image Popups

Here you just need to upload the image or insert the image’s link. This plugin supports JPG, PNG and GIF.

You need to upload the image or insert the image's link.

This is a beautiful banner that I made by myself for the Black Friday campaign of my website:

Example of the Black Friday image popup.

Add Content to HTML Popups

Adding content to HTML popup is just like writing a post in WordPress Gutenberg editor. You can insert images, videos, tables, buttons, quotes, … or any other content that WordPress editor supports. The interface is kinda similar to Gutenberg editor, so it’s quite friendly and native.

Adding content to HTML popup is so easy like writing a post.

And this is my HTML popup on the front end:

Here is HTML popup on the frontend.

Add Content to Subscription Popups

Here we have quite a lot of content to fill in and customize for your subscription form. However, what you need to notice most is fields of the form, such as First name, Last name, Email, and customize their Placeholder and Required field.

You can fill many information in Subscription Popups.

After that, scroll down and customize the display of the form in terms of Form background options, Inputs’ style, Submit button styles to make it more stunning and matching to the website.

Notably, in the After successful subscription section, tactfully choose a suitable message, or information that you want to show to your users after they subscribe. For example, you can display thank-you notes, coupons, gifts, gift cards, … for these subscribers. By doing that, you can drag users’ impressions and improve their experience.

Choose a suitable message or information that you want to show to your users after they subcribe.

For example, this is my subscription email popup. Once they have submitted, I will show a notification about the Black Friday sale campaign, urging customers to go shopping.

Example of my content subscription popup.

Go to Popup Builder > All Subscribers to manage subscribers.

Go to Popup Builder > All Subscribers to manage subscribers.

You can even send emails to subscribers in the Newsletter tab.

You can even send emails to subscribers in the Newsletter tab.

After adding content to it, scroll down. You will see many other setting options. Let’s dig in each option in the steps 4,5,6.

Step 3: Set up the Display Location and Condition of the Popup

Set up the Display Location

In the Popup Display Rules section, we need to adjust where the popup will/ will not show up.

You can choose Everywhere to show it on every page, post, tag, or customize, or show it in a certain place that you want. You can also click the (?) tooltip to get more details.

For example, I choose the location as a certain page, choose “is” to display it, and choose the display page as “Home”. In addition, you can add other locations by choosing Add.

In the Popup Display Rules section, we need to adjust where the popup will / will not show up.

Set up the Display Condition

In the Popup Events section, choose the time when the popup shows up (when the website has loaded for a few seconds, when users click somewhere, etc). This plugin support these following display conditions:

  • On load: The popup will automatically show up after a few seconds (you can add the number of seconds in the Delay tab) from when the site finished loading.

The popup will automatically show up after a few seconds from when the site finished loading.

  • Set by CC class: allows users to click some component to enable the popup. This component will be based on the ID of it. This part is kinda complicated so you had better read the documentation carefully.

Set by CC class: allows users to click some component to enable the popup.

  • On click: similar to Set by CSS class section but you don’t need to use the ID of the popup to install the “button” to enable it.

Instead, if you choose Default in the Options section, the plugin will create a default class for the popup in the Default Class section as below.

if you choose Default in the Options section, the plugin will create a default class for the popup in the Default Class section.

If you choose Custom CSS, fill in the class that you have created yourself in the Custom Class section.

If you choose Custom CSS, fill in the class that you have created yourself in the Custom Class section.

After that, add the class of the popup into the CSS of the component that you want.

For example, in this post, I added a button and the class I want in the Additional CSS classes section.

I added a button and the class of the popup I want in the Additional CSS classes section.

This is the result on the front end:

Here is the result of popup.

  • Hover Click: when hovering on a component, the popup will show up. You can do the same as in the On Click section.

Hover Click: when hovering on a component, the popup will show up. You can do the same as in the On Click section.

Step 4: Customize the Popup’s Display

After step 3, you have had a basic popup. But if you want it to be more stunning, scroll down to the Design section. Here you can customize some components like interface, overlay, background to make it perfect as your favorite.

In the Design section, you can customize some components as you like.

More than that, in the Dimensions section, adjust the its width and length by choosing Custom mode, or choosing Responsive mode to make its size match its content automatically.

In the Dimensions section, you can customize width and length of the popup.

Step 5: Customize Other Advanced Settings

These advanced settings allow you to configure displaying and interacting with popup, … in a more detailed way.

For example, you can choose how to close the popup window in the Close Settings section. There are many ways to close it, such as press Esc, or add a close button, … Choose one or more, that’s up to you.

You can choose how to close the popup window in the Close Settings section.

If you want to add effects of closing and opening popup, or adjust the times it is shown for one user, … scroll down to the Popup Options section. You just need to click on the option that you want, and there you’ve done.

Note that when using the free Popup Builder plugin, the sections named Unlock Option colored in yellow like the image below are pro version’s features. You have to buy more extensions of this plugin to use them.

There are some premium features of Popup Builder

Finally, on the sidebar, there is a very interesting option: adding a fixed button on the website to show the popup when click on. This floating button is really convenient, allowing people to see it everytime and everywhere. Its design is also pleasant and not annoying.

On the siderbar, you can add a fixed button on the website to show the popup when click on.

This is the floating button on the website:

his is the floating button on the website.

Or you can disable it by clicking Disable.

You can disable the popup by clicking Disable.

Finally, click Publish to get it done.

So you have completed your popup after 6 steps from basic to advanced settings. You have done a good job!

Last Words

As you can see, adding a popup to WordPress is not really complicated. You just have to be patient a little bit when customizing its display, that’s all of the hard work!

In addition, there are many things to increase conversion rate of the website. If you want to build an effective landing page, you had better read some more articles about how to create a high-converting landing page, or how to create a product page.

Good luck!

Top comments (0)