Add a floating button

Table of Contents

If you want to add a simple floating button to Divi to link to another page, or a pop-up, use the code below.

.sticky-divi-request {
color: #ffffff; /* You can change font color */
font-family: "Open Sans"!important;
font-size: 18px;  /* You can change font size */
background-color: #52BCB8; /* You can change color button */
border-radius: 4px;
letter-spacing: 0.8px;
text-transform: lowercase;
text-decoration: none;
	text-align: center;
box-shadow: 0px 25px 28px -21px rgba(194,180,190,1);
padding: 20px 3%;
z-index: 10;
position: fixed;
bottom: 80px;
right: 40px;
}

.sticky-divi-request:hover {
background-color: #000; /* You can change color button on hover */
box-shadow: none;
}

This needs to be added to the Divi-Options page under “Custom CSS”.

If you want different buttons on different pages, you simply replicate the code above changing the css ID:

.sticky-divi-request

For example:

.sticky-divi-sales

.sticky-divi-buyer

Add button to a page #

You now need to add the button to the page.

Go to the page where you want the button to appear and add a “code” block anywhere on the page, then insert this text:

<a href="link to page" class="sticky-divi-request">Text you want to write</a>

And that’s it!

Powered by BetterDocs

Submit a Comment

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