As a webdesign/product business, we put a lot of thought into our buttons. Why is that? Calls to action aren’t just important for business, they drive everything including lead and revenue generation, better click-through rates, superior user experience and more – customers want and expect them.
In this tutorial I will show you how to create a highly converting, site-wide floating button for any Divi powered website.
Let’s get started!
How to Create a Good Call-to-Action Button?
1. Make your Call-to-Action buttons look like buttons
Remember that you want users to take an action, which they’re only going to do if it’s clear what that action is. We don’t push diagonal bits of text, or weird bouncing icons: We push buttons.
2. Ensure your CTA button stands out
A general rule to follow is that your button stands out from the rest of the page design, you can achieve this in a number of ways but some of the most common approaches include bolder text, increased padding and white space, different or larger fonts and in some cases a background color that is reserved only for CTAs.
3. Write copy that encourages action
Particularly in the case of sales/product pages, your content should build up to the user taking an action. By the time they finish reading, users should know exactly what you want them to do and should be actively seeking out the next action.
4. Choose a bold colour for your buttons
Again, it all comes back to making sure they stand out. A good test is to scroll quickly through your content, did your buttons still catch your eye?
5. Ensure you have good contrast between text and button colour
Whether it be dark on light or light on dark, ensure your text is not washed out. Bear in mind that people see colors differently where as contrast is relatively consistent.
6. Make your buttons mobile and desktop optimised
This isn’t a principle reserved for buttons, but there is a lot more to lose from poorly optimised call-to-actions. Check that longer words aren’t being cut in half and placed on two lines and consider making your buttons span the entire view-port when your content is showing in a single column, on mobile for instance.
7. Put your first Call-to-Action button above the fold
in the case of ‘buy now’ buttons, consider that your user has already landed on the page with the intent of taking the next action. Don’t make them work for it.
Did you know that...
More than 90% of visitors who read your headline also read your CTA copy.
Why Do I Want to Create a Floating Button?
Consider this: A customer is shopping on your client’s page and scrolling through a product description. The customer is getting excited to buy the product, but they don’t see a ‘buy now’ button. The first CTA has been scrolled past and it’s a while before the next one comes into view, so the customer leaves. It happens.
With a floating button, your call to action is always visible to a website visitor. The button floats in a set position to follow the visitor’s activity, moving up or down the page as they scroll, so at they point they make a decision to take an action, they’re able to.
The type of button you choose to use is subjective and should be tweaked and informed by how successful it is. What works for other people may not work for you. Successful CTAs require a ton of experimentation, A/B testing, and a willingness to keep trying new things, even when you’re getting “good” results.
Good can always be great, with work.
How to Add Sticky Button Site-Wide
- In the back end of your site, go to “Divi > Theme Options”, where you will find the Divi theme options.
- Open the “General” tab (it should be the current one).
- Scroll down to the bottom of the tab.
- There you will find a box named “Custom CSS”.
- Paste the CSS code below into the box after anything else that may already be in there.
- Press “Save”.
color: #ffffff; /* You can change font color */
font-size: 18px; /* You can change font size */
background-color: #f5a623; /* You can change color button */
box-shadow: 0px 25px 28px -21px rgba(194,180,190,1);
padding: 20px 3%;
background-color: #3ccee2; /* You can change color button on hover */
- Go to “Divi > Theme Options”, where you will find the Divi theme options.
- Go to the “Integration” tab.
- There you will find a box named “<body>”.
- Paste the code below, into the box. Again, after anything else that’s in there.
- Replace # with your link.
- Press “Save”.
Do you want to add a button to single page?
Add the code to a Divi Code Module, instead of into the <body> option.
1. Create a A ROW with z-index:10; in CSS tab
2. Insert Code Module in there
3. Insert Code
<a href="#" class="sticky-divi-button">Buy now</a>
There you have it, with just two chunks of relatively simple code you have a sticky button! If you have any questions or suggestions, make sure you leave a comment in the comment section below 🙂