How to Add a Popup to WordPress Websites Freely and Quickly
Tags: wordpress, popup, wensite
Published: 2021-05-07 07:31:25

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.

<!--more-->
<h2>Why Should You Use a Popup on a Business Website?</h2>
The image below is an example for the popup of a business website. It looks great, isn’t it?

<img class="aligncenter" src="https://i.imgur.com/74o9fr1.gif" alt="Install and activate the plugin in the Dashboard." width="1907" height="939" />

Popup is not only stunning (if you manage to design a well-matching and attractive one) but also have many other benefits like:
<ul>
 	<li>Promote important information, sale and marketing campaigns,...</li>
 	<li>Call to action, increase conversion rate</li>
 	<li>Generate lead</li>
</ul>
<h2>Add a Popup to WordPress with Popup Builder plugin</h2>
To add a popup to your WordPress website, you can hire a credible <a href="https://elightup.com/" rel="follow">web design company</a> 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 <a href="https://wordpress.org/plugins/popup-builder/">wordpress.org</a>, so you just need to i<a href="https://gretathemes.com/install-wordpress-plugin/">nstall and activate the plugin</a> right in the Dashboard.

<img class="aligncenter" src="https://i.imgur.com/vv5EQuH.png" alt="Install and activate the plugin in Dashboard." width="772" height="611" />

Upon finishing, follow these steps below.
<h3>Step 1: Choose the Popup’s Type</h3>
Now the <strong>Popup Builder</strong> submenu will show up on the Dashboard. Go there, click <strong>Add News</strong> and choose one of the 4 provided popup’s types.

<img class="aligncenter" src="https://i.imgur.com/vch1rPU.png" alt="Click Add News on Popup Builder submenu and choose 1 of 4 popup's style." width="1902" height="933" />

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

<img class="aligncenter" src="https://i.imgur.com/0c2dHJs.png" alt="There are 4 types of popup." width="1000" height="800" />

After choosing the type you want, go to the next step.
<h3>Step 2: Add Content to the Popup</h3>
First, give the popup a name to manage it more easily.

<img class="aligncenter" src="https://i.imgur.com/ygjpy9L.png" alt="Name the popup." width="1624" height="905" />

Different types of popup need different contents. Let’s dig in each type.
<h4>Add Content to Facebook Popups</h4>
On the interface to create Facebook popups, you need to fill in these information:
<ol>
 	<li>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.</li>
 	<li>Insert Facebook URL.</li>
 	<li>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.</li>
 	<li>Click here to hide the share button if you want.</li>
</ol>
<img class="aligncenter" src="https://i.imgur.com/iaL0NpM.png" alt="Fill in the popup's information." width="1920" height="933" />

And this is what I’ve got:

<img class="alignnone" src="https://i.imgur.com/43N3TJj.png" alt="Result of the Facebook popup." width="1920" height="931" />
<h4>Add Content to Image Popups</h4>
Here you just need to upload the image or insert the image’s link. This plugin supports JPG, PNG and GIF.

<img class="aligncenter" src="https://i.imgur.com/eSkpPma.png" alt="You need to upload the image or insert the image's link." width="1900" height="932" />

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

<img class="aligncenter" src="https://i.imgur.com/7Ha32Aj.png" alt="Example of the Black Friday image popup." width="1920" height="937" />
<h4>Add Content to HTML Popups</h4>
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.

<img class="aligncenter" src="https://i.imgur.com/ewIjX3h.png" alt="Adding content to HTML popup is so easy like writing a post." width="1905" height="846" />

And this is my HTML popup on the front end:

<img class="aligncenter" src="https://i.imgur.com/KE1SGhB.png" alt="Here is HTML popup on the frontend." width="713" height="784" />
<h4>Add Content to Subscription Popups</h4>
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 <strong>First name</strong>, <strong>Last name</strong>, <strong>Email</strong>, and customize their<strong> Placeholder</strong> and <strong>Required field</strong>.

<img class="aligncenter" src="https://i.imgur.com/70VWcX0.png" alt="You can fill many information in Subscription Popups." width="1920" height="937" />

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

Notably, in the <strong>After successful subscription</strong> 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.

<img class="aligncenter" src="https://i.imgur.com/gPji94v.gif" alt="Choose a suitable message or information that you want to show to your users after they subcribe." width="1920" height="937" />

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.

<img class="aligncenter" src="https://i.imgur.com/859kNnD.gif" alt="Example of my content subscription popup." width="1920" height="937" />

Go to <strong>Popup Builder &gt; All Subscribers</strong> to manage subscribers.

<img class="aligncenter" src="https://i.imgur.com/DElHVwd.png" alt="Go to Popup Builder &gt; All Subscribers to manage subscribers." width="1920" height="937" />

You can even send emails to subscribers in the <strong>Newsletter</strong> tab.

<img class="aligncenter" src="https://i.imgur.com/sPByT88.png" alt="You can even send emails to subscribers in the Newsletter tab." width="1920" height="937" />

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.
<h3>Step 3: Set up the Display Location and Condition of the Popup</h3>
<h4>Set up the Display Location</h4>
In the <strong>Popup Display Rules</strong> section, we need to adjust where the popup will/ will not show up.

You can choose <strong>Everywhere</strong> 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 <strong>“is”</strong> to display it, and choose the display page as <strong>“Home”</strong>. In addition, you can add other locations by choosing <strong>Add</strong>.

<img class="aligncenter" src="https://i.imgur.com/3zNSk3t.gif" alt="In the Popup Display Rules section, we need to adjust where the popup will / will not show up." width="1449" height="673" />
<h4>Set up the Display Condition</h4>
In the <strong>Popup Events</strong> 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:
<ul>
 	<li><strong>On load</strong>: The popup will automatically show up after a few seconds (you can add the number of seconds in the <strong>Delay</strong> tab) from when the site finished loading.</li>
</ul>
<img class="aligncenter" src="https://i.imgur.com/3gHYZb2.png" alt="The popup will automatically show up after a few seconds from when the site finished loading." width="1151" height="442" />
<ul>
 	<li><strong>Set by CC class</strong>: 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 <a href="https://help.popup-builder.com/en/category/events-3cslam/">documentation</a> carefully.</li>
</ul>
<img class="aligncenter" src="https://i.imgur.com/evgzxT2.png" alt="Set by CC class: allows users to click some component to enable the popup." width="1108" height="502" />
<ul>
 	<li><strong>On click</strong>: similar to<strong> Set by CSS class</strong> section but you don’t need to use the ID of the popup to install the “button” to enable it.</li>
</ul>
Instead, if you choose <strong>Default</strong> in the<strong> Options</strong> section, the plugin will create a default class for the popup in the <strong>Default Class</strong> section as below.

<img class="aligncenter" src="https://i.imgur.com/p8Z8R9g.png" alt="if you choose Default in the Options section, the plugin will create a default class for the popup in the Default Class section." width="1422" height="422" />

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

<img class="aligncenter" src="https://i.imgur.com/kNvxaMS.png" alt="If you choose Custom CSS, fill in the class that you have created yourself in the Custom Class section." width="1402" height="486" />

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 <strong>Additional CSS classes</strong> section.

<img class="aligncenter" src="https://i.imgur.com/L1c3AXy.png" alt="I added a button and the class of the popup I want in the Additional CSS classes section." width="1523" height="905" />

This is the result on the front end:

<img class="aligncenter" src="https://i.imgur.com/RwIXrgj.gif" alt="Here is the result of popup. " width="1920" height="937" />
<ul>
 	<li><strong>Hover Click</strong>: when hovering on a component, the popup will show up. You can do the same as in the <strong>On Click</strong> section.</li>
</ul>
<img class="aligncenter" src="https://i.imgur.com/95pM9r7.png" alt="Hover Click: when hovering on a component, the popup will show up. You can do the same as in the On Click section." width="1396" height="492" />
<h3>Step 4: Customize the Popup’s Display</h3>
After step 3, you have had a basic popup. But if you want it to be more stunning, scroll down to the <strong>Design</strong> section. Here you can customize some components like interface, overlay, background to make it perfect as your favorite.

<img class="aligncenter" src="https://i.imgur.com/vM0bqKU.png" alt="In the Design section, you can customize some components as you like." width="1580" height="515" />

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

<img class="aligncenter" src="https://i.imgur.com/FzunhgL.png" alt="In the Dimensions section, you can customize width and length of the popup." width="1427" height="390" />
<h3>Step 5: Customize Other Advanced Settings</h3>
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 <strong>Close Settings</strong> section. There are many ways to close it, such as press <strong>Esc</strong>, or add a close button, … Choose one or more, that’s up to you.

<img class="aligncenter" src="https://i.imgur.com/1p2a1ly.png" alt="You can choose how to close the popup window in the Close Settings section." width="1432" height="578" />

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 <strong>Popup Options</strong> 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 <strong>Unlock Option</strong> colored in yellow like the image below are pro version’s features. You have to buy more extensions of this plugin to use them.

<img class="aligncenter" src="https://i.imgur.com/svDUs8I.png" alt="There are some premium features of Popup Builder" width="1431" height="591" />

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.

<img class="aligncenter" src="https://i.imgur.com/zGe1W6j.png" alt="On the siderbar, you can add a fixed button on the website to show the popup when click on." width="1902" height="895" />

This is the floating button on the website:

<img class="aligncenter" src="https://i.imgur.com/LTtLXoz.gif" alt="his is the floating button on the website." width="1900" height="934" />

Or you can disable it by clicking <strong>Disable</strong>.

<img class="aligncenter" src="https://i.imgur.com/hWgzQRq.png" alt="You can disable the popup by clicking Disable." width="518" height="574" />

Finally, click <strong>Publish</strong> to get it done.

So you have completed your popup after 6 steps from basic to advanced settings. You have done a good job!
<h2>Last Words</h2>
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 <a href="https://gretathemes.com/create-landing-page-really-convert/">how to create a high-converting landing page</a>, or <a href="https://metabox.io/create-product-pages/" rel="follow">how to create a product page</a>.

Good luck!