How to Add a Fixed Bubble Popup Link to Divi

Learn how to create a fixed image link to grab your website visitors attention.

There are certain situations when you want to display some information relevant to all your website visitors – no matter the page they are currently viewing. In many cases, that would be a time-sensitive offer or a Call to Action. A popular approach is to use the top “promo bar” and the full-page popup is another option to consider. Here, on the Divi Lover website – I like to use a fixed round image displayed in the corner of the screen – I call it the bubble popup – and we use it every time we are having a sale or a new product launch.

Watch the video below, to see how to create it in Divi step by step.

 

Step 1

Add the HTML Structure

Navigate to Divi Theme Options Integration tab and paste the code below inside the BODY element:

<div class="dl-info-popup">
	<div class="bg"></div>
	<a href="/landing-page">
		<img src="https://demos.divilover.com/wp-content/uploads/2021/07/click_here.png" alt="Super Offer"/>
	</a>
	<span class="close"></span>
</div>
Step 2

Style it with CSS

This is the CSS code I’ve used, feel free to modify it to fit your design:

.dl-info-popup {
	position: fixed;
	bottom: 20px;
	left: 20px;
	width: 150px;
	height: 150px;
	display: none;
}

.dl-info-popup a {
	background: #19191a;
	display: block;
	border-radius: 50%;
	padding: 10%;
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
}

.dl-info-popup span.close {
	position: absolute;
	top: 5px;
	right: 0;
	width: 30px;
	height: 30px;
	background: #fff;
	border-radius: 15px;
	box-shadow: 1px 3px 15px rgba(0,0,0,0.2);
	cursor: pointer;
	z-index: 3;
}

.dl-info-popup span.close:before {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	color: #19191a;
	font-size: 24px;
	font-family: 'ETmodules';
	content: '\4d';
	line-height: 30px;
	text-align: center;
}

.dl-info-popup .bg {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	background: #FDFA00;
	background-image: linear-gradient(-15deg, #FDFA00, #FF19CF);
	border-radius: 50%;
	z-index: 1;
	filter: blur(30px);
	animation:opacity 3s ease-in-out infinite;
}

@keyframes opacity {
	0% {opacity:0;}
	50% {opacity:1;}
	100% {opacity:0;}
}
Step 3

Make it work with jQuery

This JavaScript code can be added in the Integriation tab, just next to the HTML structure:

<script>
jQuery(document).ready(function($){
	
	$('.dl-info-popup').delay(2000).fadeIn();
	$('.dl-info-popup .close').click(function(e){
		e.preventDefault();
		$(this).parent().fadeOut();
	});
	
});		
</script>
Step 4 (optional)

Hide it on a specific page

I haven’t mentioned that in the video, but if you’d like to hide the “bubble” on a specific page of your website, you’d need to inspect that page, to see what CSS class is added to the BODY element. Each page in WordPress has a unique ID, and this ID is attached to the body tag as a class, eg. page-id-123. Once you know your page body class, you can target and hide the bubble popup element with this bit of CSS code:

body.page-id-123 .dl-info-popup {
	display: none!important;
}

Final Thoughts

I hope you like this approach and this walkthrough.

Sign up for the newsletter so you don’t miss out on any Divi tutorials. Also, keep an eye out for future Divi freebies! As always, please leave a comment with your thoughts below! Hope you find this useful.

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen