How to Add a Customized Popup in WordPress

Popups are Great for Collecting Leads and Promoting Offers on WordPress

Popup personalizers and automation plugins are the best way to show popups without opt-ins. You can customize your popups for pleasing messages or verifying website legal terms. I suggest following WordPress Plugins.

1. Growmatik

This plugin is a marketing automation plugin that enables you to personalize popups/email campaigns and web page content. Grammatik offers a visual popup builder with ready-made templates to customize the text and individual elements such as images, video, buttons, icons, coupon codes, layout, or even input fields. You can further automate your popups by setting conditions like location, device, page, or product visit, or more behavioral conditions such as shopping activity and email activity. Grammatik uses its resources to create automation so it won’t affect your website performance.

2. Popup anything on click

Popup Builder allows you to add highly customizable popup windows. You can add unlimited popups with your configurations. With the Popup anything on click plugin, you can insert any content into your Popup (HTML, Image, etc.) using shortcodes.

3. Popup Builder

This is a responsive WordPress plugin for popup, subscription, and newsletter. It provides a popup builder to customize different types of popups such as image, HTML, subscription, video, countdown, restriction (yes/no confirmation), etc. You can set automation to show the popups whenever you want. For popup analytics, you should get a separate extension.

Also, you can add popups using jQuery and CSS. Just follow the below steps carefully to add customized popups on your WordPress site:

Step 1: Add pop-up HTML on your web page.

<button class="open">Click to open popup</button> 
<div style="display: none;" class="pop-outer">
<div class="pop-inner">
<button class="close">CLOSE</button>
<h2>Your popup title</h2>
<p>Your popup content</p>
</div>
</div>

Step 2: Add CSS style in active theme’s style.css or in custom style.

 

<style> 
.pop-outer {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pop-inner {
background-color: #fff;
width: 500px;
height: 300px;
padding: 25px;
margin: 15% auto;
}
</style>

Step 3: Add jQuery code in active theme’s header file.

<script> 
jQuery(document).ready(function ($){
$(".open").click(function (){
$(".pop-outer").fadeIn("slow");
});

$(".close").click(function (){
$(".pop-outer").fadeOut("slow");
});
});
</script>

Darshana Tharanga

I’m Darshana. A Computer Network undergraduate based in Colombo, Lk, who enjoys building things that live on the internet. I develop exceptional websites, web apps, and web content.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button

We use cookies to give you the best online experience. By agreeing you accept the use of cookies in accordance with our cookie policy.