How to Create FREE Popups in WordPress using Boxzilla plugin

1. Paste this HTML code in text area as described in the Video.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="popup-container">

<img class="popup-logo" src="logo_source_url" alt="Community Logo" /><strong><span style="color: var(--td_text_color, #111111); font-family: var(--td_default_google_font_2, 'Roboto', sans-serif); font-size: 27px;">News Community</span></strong>

Join the groups below to get latest news and updates.
<div class="button-group"><a class="button tech" href="link1"><i class="fa fa-link" aria-hidden="true"></i> Tech &amp; Telecom</a>
<a class="button startups" href="link2"><i class="fa fa-link" aria-hidden="true"></i> Startups</a>
<a class="button auto" href="link3"><i class="fa fa-link" aria-hidden="true"></i> Auto</a>
<a class="button global" href="link4"><i class="fa fa-link" aria-hidden="true"></i> Global News</a>
<a class="button sports" href="link5"><i class="fa fa-link" aria-hidden="true"></i> Sports</a>
<a class="button entertainment" href="link6"><i class="fa fa-link" aria-hidden="true"></i> Entertainment</a>
<a class="button whatsapp" href="link7"><i class="fa fa-whatsapp" aria-hidden="true"></i> WhatsApp Channel</a></div>
</div>

2. Go to Appearance>customize>Additional CSS, paste this CSS code and then publish it.

.popup-container {
    text-align: center;
    padding: 20px;
}

.popup-logo {
    width: 200px;
mix-blend-mode: darken;
}

.popup-container h2 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 1px;
}

.popup-container p {
    font-size: 1em;
    color: #555;
    margin-bottom: 20px;
}

.button i {
    margin-right: 5px;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.button {
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    min-width: 120px;
}

.button.tech { background-color: #007bff; } /* Blue */
.button.startups { background-color: #000; } /* Black */
.button.auto { background-color: #dc3545; } /* Red */
.button.global { background-color: #ffc107; color: #333; } /* Yellow with black text */
.button.sports { background-color: #28a745; } /* Green */
.button.entertainment { background-color: #e83e8c; } /* Pink */
.button.whatsapp { background-color: #25d366; } /* WhatsApp green */

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles