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.

Shares

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!

22 Comments

  1. Regina

    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

      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

        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

        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.

  2. erik

    just wandering why did you use
    display: none;
    in
    .dl-info-popup

    Reply
    • Ania Romańska

      So that it is hidden on page load and then shown with JS after a little delay.

      Reply
  3. Tabitha DeSeranno

    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

      Nevermind… I was able to figure it out!!

      Reply
      • Tabitha

        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

        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.
  4. Gabriel

    Hello Ania!

    Nice tutorial, but I can’t make it work. The popup doesn’t show up.

    Reply
    • Ania Romańska

      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

        Thanks Ania! It worked!

  5. Don Catlett

    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

      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

        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

        Matt, can you share a link?

      • Matt

        Thanks for the reply, Ania; unfortunately the site is on a staging server and I can’t share the link yet.

  6. Brian

    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

      You’d need to use cookies.

      Reply
  7. Rikke

    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

      I’m glad it was helpful 🙂

      Reply

Submit a Comment

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

Enjoing our content?

You might find this interesting…

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

Would you like to...

Consult Ania and fellow students?

Join the conversation inside our private FB group.

Would you like to...

Get support privately?

Submit a support ticket via your account page.

Ask Ania?

Submit a question for the next live Q&A session.

Consult fellow students?

Join the conversation inside our private FB group.