What is a Custom Content Popup?
Having a popup on your website is an important thing and designing it based on your wishes and style is another sort of joy. The WordPress Popup plugin is known for its various popup types, including cookie popups, map popups, video popups and finally Custom Content. Custom Content popup type is widely used among users, who want to improvise and create their own popup from scratch. The main advantage of choosing this type is that you can easily add your desired buttons, texts and images to the popup immediately. As the purpose of the popups is to attract users' attention and make them follow your CTAs then, the Custom Content is ideal for you to add your desired button and CTA with basic HTML skills.
You may have guessed that to do so, you may need to have some coding skills. If you don't, then no need to worry. This article is for those who want to make use of the Custom Content popup type, but do not have enough coding skills. Here you will find all the needed steps for creating the popup of your dreams.
Make sure to read the article till the end, as at the end, you will find 3 ready-made templates for your popups.
How to Create a Custom Content Popup from Scratch
If you are already using the best popup plugin aka Popup Box plugin, then you will know where exactly to find the needed popup type. But if you still don't have the chance to use it, then make sure to follow all the steps (don't skip it, read till the end).
First of all, install and activate the Popup Box plugin and then go back to read this article.
Step 1
Now, if everything is set up, we are starting to create our Custom Content popup together from scratch. For the first step, you will need to click on the Add New button, for creating your popup.
After that, various popup types will be visible, but in this case, we will need to choose "Custom Content".
Now, we are clicking on the "Select" button and moving to the next step.
All the important things are chosen, and it's time to create the popup.
Step 2
Make sure to activate the Enable Popup option, otherwise, the popup will not be displayed. But in case you want to test the Popup only for yourself, there is a special option, called Enable popup only for author, that is only the author of the popup will be able to see it.
For the final step, you can choose where to display your popup with the help of the Display feature. 3 possible options are available, All pages, Except and Include. By choosing the All Pages option, the popup will be displayed on all pages, by choosing the Execpt option, you will choose the pages in which the popup will not be visible and vice versa for the Include option.
Step 3
On your dashboard, you will be able to see the Custom Content feature with a field to add your HTML code there. So, if you already have a code you just need to paste it here. But before pasting it be sure that you will move the editor from Visual view to Text view so that the code will work.
In the below example, you can see that I have added the content to the popup and given the button my desired style.
How the code looks like:
How to reach the specific result:
For pasting your created code, you will need to move to the General Tab > Custom Content
To have the exact popup style you will need to copy the below mentioned HTML and CSS and add them in the appropriate fields.
HTML
<h1 class="popup-box-custom-content-0-popup-title">Limited-Time Summer Sale</h1>
<div class="popup-box-custom-content-0-popup-button-container">
<a class="popup-box-custom-content-0-popup-button-77" href="#">Shop Now</a>
</div>
<div class="popup-box-custom-content-0-popup-content">
<h2>Unbeatable Deals for a Limited Time!</h2>
</div>
But in this case, I have added various styles to the button and to make it work, you will need to add them in the Custom CSS field. To find it, please move to the Styles Tab > Custom CSS
CSS
.popup-box-custom-content-0-popup-button-77 {
background-image: linear-gradient(92.83deg, #FF7426 0, #F93A13 100%);
color: #fff;
text-decoration: none;
cursor: pointer;
display: inline-block;
font-family: Eina01,sans-serif;
font-size: 16px;
font-weight: 800;
margin: 25px;
box-sizing: border-box;
min-height: 64px;
padding: 19px 26px;
text-align: center;
border-radius: 80px;
box-shadow: 0 0 0 5px rgba(249, 58, 19, .32);
}
.popup-box-custom-content-0-popup-title, .popup-box-custom-content-0-popup-content {
text-align: center;
color: #33647F;
}
.popup-box-custom-content-0-popup-button-container {
margin: 25px 0;
text-align: center;
}
So, if you want to reach the same result as it is in the image, then all you need to do is to copy the mentioned codes and paste them into the appropriate field.
But as promised, you will get a bonus of 3 templates that are ready-made and again all you will need to do is copy and paste them. All the examples are created using the "Default" template.
3 Different Custom Content Popup Templates
1. Join Us Popup Template
HTML
<h1 class="popup-box-custom-content-1-popup-head-img">
<img src="https://img.freepik.com/free-vector/flat-design-join-us-concept_23-2148946802.jpg" alt="" width="300" height="250" />
</h1>
<h1 class="popup-box-custom-content-1-popup-title">Join Us</h1>
<div class="popup-box-custom-content-1-popup-content">
Join us now and become a part of our big community. You are free to share your feedback with us!
</div>
<div class="popup-box-custom-content-1-popup-button-container">
<a class="popup-box-custom-content-1-popup-button-41" href="/">Join Now</a>
</div>
Button CSS
.popup-box-custom-content-1-popup-button-41 {
background-color: initial;
background-image: linear-gradient(-180deg, #00D775, #00BD68);
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: Inter,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
line-height: 44px;
outline: 0;
text-align: center;
user-select: none;
-webkit-user-select: none;
width: 100%;
border: 0;
text-decoration: none;
text-transform: uppercase;
}
.popup-box-custom-content-1-popup-button-41:hover {
background: #00bd68;
}
.popup-box-custom-content-1-popup-head-img,
.popup-box-custom-content-1-popup-title, .popup-box-custom-content-1-popup-content {
text-align: center;
}
.popup-box-custom-content-1-popup-title {
color: #33719F;
}
.popup-box-custom-content-1-popup-button-container {
margin-top: 20px;
}
2. Help Us Improve (Survey) Popup Template
The width of the popup is 400 px and the height is 300 px (You will need to change them in the Styles Tab> Popup Dimensions)
HTML
<h1 class="popup-box-custom-content-2-popup-title">Help Us Improve</h1>
<div class="popup-box-custom-content-2-popup-content-container">
<div class="popup-box-custom-content-2-popup-content">
Help us improve! Take a short survey and get a chance to win a gift card.
</div>
<div class="popup-box-custom-content-2-popup-button-container">
<a class="popup-box-custom-content-2-popup-button-87" href="/">Start Survey</a>
</div>
</div>
Button CSS
.popup-box-custom-content-2-popup-button-87 {
padding: 15px 30px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
border-radius: 10px;
display: block;
border: 0px;
font-weight: 700;
box-shadow: 0px 0px 14px -7px #f09819;
background-image: linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.popup-box-custom-content-2-popup-button-87:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
.popup-box-custom-content-2-popup-button-87:active {
transform: scale(0.95);
}
.popup-box-custom-content-2-popup-button-container {
margin-top: 25px;
}
.popup-box-custom-content-2-popup-title,
.popup-box-custom-content-2-popup-content-container {
text-align: center;
}
.popup-box-custom-content-2-popup-title {
color: #33719F;
}
3. Register Now Popup Template
HTML
<h1 class="popup-box-custom-content-3-popup-head-img">
<img src="https://img.freepik.com/free-psd/school-admission-background_23-2150357574.jpg" alt="" width="250" height="150" />
</h1>
<h2 class="popup-box-custom-content-3-popup-content">Marketing Course</h2>
<ul class="popup-box-custom-content-3-popup-list">
<li>YouTube Marketing</li>
<li>Email Marketing</li>
<li>Content Writing</li>
</ul>
<div class="popup-box-custom-content-3-popup-button-container">
<a class="popup-box-custom-content-3-popup-button-88">Register Now</a>
</div>
Button CSS
.popup-box-custom-content-3-popup-button-88 {
display: flex;
align-items: center;
font-family: inherit;
font-weight: 500;
font-size: 16px;
padding: 0.7em 1.4em 0.7em 1.1em;
color: white;
background: linear-gradient(0deg, rgba(20,167,62,1) 0%, rgba(102,247,113,1) 100%);
border: none;
box-shadow: 0 0.7em 1.5em -0.5em #14a73e98;
letter-spacing: 0.05em;
border-radius: 20em;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: fit-content;
margin: auto;
}
.popup-box-custom-content-3-popup-button-88:hover {
box-shadow: 0 0.5em 1.5em -0.5em #14a73e98;
}
.popup-box-custom-content-3-popup-button-88:active {
box-shadow: 0 0.3em 1em -0.5em #14a73e98;
}
.popup-box-custom-content-3-popup-list {
list-style-position: inside;
padding: 0;
width: fit-content;
margin: auto;
text-align: left;
}
.popup-box-custom-content-3-popup-button-container {
margin-top: 25px;
}
.popup-box-custom-content-3-popup-head-img,
.popup-box-custom-content-3-popup-content {
text-align: center;
}
.popup-box-custom-content-3-popup-content {
color: #004E87;
}
.popup-box-custom-content-3-popup-head-img {
box-sizing: conte content-box;
}
Wrapping Up!
Using Custom Content Popups on your website can significantly enhance user engagement and boost conversions. When used correctly, these popups can become win to win solution for those who want to grab the website visitors' attention and reduce the bounce rate. So, to wrap up, if you are using the free version of the Popup Box plugin, then you will be able to create attractive popups with the help of the Custom Content Popup type. With the help of this article, you will know the exact keys for creating eye-catching popups with simple HTML and CSS. Although, if you don't have any coding skills, you can make use of the provided codes and customise them based on your wish.
If this article was useful for you, make sure to follow us on YouTube, to not miss any video tutorials created by our team special for you.
