How to create a call to action (CTA) button on the bottom or top of the Divi theme page

This tutorial was inspired by Andy Tran and Mario Maruffi GitHub tutorial page about how to create a fixed help button for Divi.

This is a very nice trick to learn. It takes only a couple of code lines and it is an awesome feature to show your clients when introducing booking options or contact forms.

I have used this fixed call to action button on some client sites and – for sure – I’ll continue to use on my next projects.

In order to create this fixed button, you’ll need to create an anchor or a button with raw html.

I created a tutorial about how to create custom button on Divi theme. Check it out and then follow along this tutorial to achieve the fixed call to action in Divi pages.

Lets start!

First, create a code module and write the following code inside of it:

<a class="fixed-cta" href="#">Button</a>

Awesome! But, this is not a button at all! So, we need to add the following description to the “fixed-cta” class inside the custom CSS.

Add the code bellow inside Divi > Theme Options > Custom CSS:

.fixed-cta {
z-index: 100; /* Make the button stay on top of all content */
position: fixed; /* Yes, I want you to stay fixed */
right: 15px; /* Change to right or left side of the page */
bottom: 15px; /* Change to top or bottom side of the page */
background: #F1C40F; /* Change background color */
padding: 8px 12px !important; /* Change button padding */
border-radius: 6px; /* Change button border radius */
color: #000000; /* Change text color */
font-size: 18px; /* Change font size */
font-weight: 900; /* 100 for thin - 900 for bold */
text-decoration: none; /* No underline for you! */
}

Some important observations:

• Change the “top, right, bottom, left” properties of the CSS so you choose in which part of the screen you want the fixed button to be.

Example: If you want you button to be on the top left side of the screen, just change the right and bottom properties in the code above to left and top.

• You may create the code module wherever you want. Just remember to remove all sections and rows padding and margins properties so it does not influence the page layout design.

Conclusion

Hey! Did you already know how to create a fixed call to action in Divi theme?

I rather to have this CTA button on the bottom right part of my websites. And you?

Hope to help you with one or two code snippets along the way. You can contact me whenever you like with questions or opinions about this and all other tutorials.

See ya!