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.

Live preview

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.

Have you seen our

Divi child themes?

Divi Toolbox plugin?

We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

Divi Lover Shop

23 Comments

padma knowles on 2024-08-14 at 18:06

Works great. Thank you. Is it possible to add to the click to close also a loading of a page? I am assuming that would go into the Jquery bit?
Reply
Regina on 2022-01-15 at 11:38

Hi Ania,

the popup works really good. I´ve used the code module.
But I have one problem. The popups runs behind the footer, which is made with the Divi Theme Builder. Changing the z-index of the footer didn´t change anything.
Reply
- Ania Romańska on 2022-01-17 at 09:29
  
  I would need to see the URL to help, but when trying to fix any z-index issue – please remember that the z-index value can never be higher than the z-index of a parent container.
  Reply
  - ReginaSt on 2022-01-17 at 11:28
    
    Hi Ania,
    
    now, I´ve put the code in the integration tab and it worked. 🙂
    
    Do you have any tip how to set a cookie, so the popup does not appear again after clicking it away?
  - Ania Romańska on 2022-01-17 at 11:37
    
    You might want to look at this litte JS cookie library. You could create/set a cookie when the popup is closed and at the begining of the function – include a condition which reads if the cookie exist and only displays the popup is the cookie is not set.
erik on 2021-10-03 at 14:16

just wandering why did you use
display: none;
in
.dl-info-popup
Reply
- Ania Romańska on 2021-10-06 at 22:46
  
  So that it is hidden on page load and then shown with JS after a little delay.
  Reply
Tabitha DeSeranno on 2021-09-15 at 20:28

Is it possible to only have it shown on the homepage… I have a lot of pages I wouldn’t want it to show up…
Reply
- Tabitha DeSeranno on 2021-09-15 at 20:32
  
  Nevermind… I was able to figure it out!!
  Reply
  - Tabitha on 2021-09-30 at 15:51
    
    Actually, it ended up adding the image to the bottom of every page… is there a solution to only adding to the home page and not having to hide from every other page?
  - Ania Romańska on 2021-10-06 at 22:45
    
    Yes, you can place the
    
    inside a Code module on a home page instead of the Integration tab. It may require some CSS adjustments, but it should work.
Gabriel on 2021-07-22 at 18:40

Hello Ania!

Nice tutorial, but I can’t make it work. The popup doesn’t show up.
Reply
- Ania Romańska on 2021-08-02 at 14:52
  
  Hi Gabriel,
  
  It’s there, it is just hidden. Please try adding the z-index:99; CSS property to the main .dl-info-popup element. It should move it on top of the rest of the website content.
  Reply
  - Gabriel on 2021-08-06 at 14:33
    
    Thanks Ania! It worked!
Don Catlett on 2021-07-16 at 18:51

Anna,
Thank you for the “Fixed Bubble Popup Link to Divi” tutorial.
The image loads but is non-responsive. I used the body code, CSS code, and jquery code, and added both the image link and page link.
I can’t determine what I’ve done wrong.

Does anyone have an idea how I can fix this?
https://www.bethewestcott.com/
Reply
- Ania Romańska on 2021-07-16 at 19:07
  
  Make sure to change the z-index value of the whole .dl-info-popup container, it is being covered by other elements on your website.
  Reply
  - Matt on 2021-11-18 at 02:02
    
    Any idea to get this to float above Divi Section Dividers? (My site uses these on nearly all sections.)
    
    For the css:
    .dl-info-popup has a setting of: z-index:99999;
    
    Tried all different numbers, nothing works.
    
    Thanks anyway, this is an amazing set of code!
  - Ania Romańska on 2021-11-18 at 11:06
    
    Matt, can you share a link?
  - Matt on 2021-11-23 at 18:51
    
    Thanks for the reply, Ania; unfortunately the site is on a staging server and I can’t share the link yet.
Brian on 2021-07-16 at 15:46

Great tutorial. Is there a way to set it so it only shows once per session so site visitors don’t have to close it out on every page visited?
Reply
- Ania Romańska on 2021-07-16 at 19:08
  
  You’d need to use cookies.
  Reply
Rikke on 2021-07-16 at 10:02

Hi Ania

Thank you so much for another valable tutorial. I will for sure revisit this one again and Alain.

Bres, Rikke
Reply
- Ania Romańska on 2021-07-16 at 19:09
  
  I’m glad it was helpful 🙂
  Reply