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.
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?
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.
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.
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?
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.
just wandering why did you use
display: none;
in
.dl-info-popup
So that it is hidden on page load and then shown with JS after a little delay.
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…
Nevermind… I was able to figure it out!!
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?
Yes, you can place the
Hello Ania!
Nice tutorial, but I can’t make it work. The popup doesn’t show up.
Hi Gabriel,
It’s there, it is just hidden. Please try adding the
z-index:99;CSS property to the main.dl-info-popupelement. It should move it on top of the rest of the website content.Thanks Ania! It worked!
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/
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.
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!
Matt, can you share a link?
Thanks for the reply, Ania; unfortunately the site is on a staging server and I can’t share the link yet.
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?
You’d need to use cookies.
Hi Ania
Thank you so much for another valable tutorial. I will for sure revisit this one again and Alain.
Bres, Rikke
I’m glad it was helpful 🙂