How to Create Sticky CTAs with Divi

So you used Divi to build a gorgeous website, filled it with top-notch content and went through all the checkboxes to guarantee good search engine optimization. Yet after some time, your conversions aren’t quite where you’d expect. Now you might be asking yourself, “Did I do something wrong?”

There’s no need to panic and hit the reset button quite yet. Sometimes small changes can have a great impact in your conversions, and one of the best things you can do in terms of reward is optimize your calls to action.

Over the course of this article we’ll cover exactly what makes a call to action good, some of the psychology behind their workings, show you some great examples, and finally, teach you how to implement a sticky CTA in your Divi website.

CTA 101

It’s no exaggeration to say that there’s an entire science behind calls to action. Pretty much every aspect of them (copy, colors, size, width, etc.) can be broken down and analyzed until exhaustion, but some of them stand out in their importance.

Color

Most people associate yellow with optimism, red with energy, blue with trust, green with wealth and relaxation, orange with aggressiveness, pink with the feminine side, black with power, and so on and on. This is merely a superficial analysis, but depending on the kind of service or product you’re selling some specific colors will be more effective than others.

Copy

Color alone isn’t enough to compel unless it’s accompanied by the right words. According to research, 52% of customers are more likely to enter a store if simply asked to – be it a sign on the road or a flyer. The problem, though, is that users are so accustomed to being constantly bombarded with advertisements everywhere they go, they get pretty good at ignoring these kinds of messages.

Given this fact, your copy needs to be strong and concise when it comes to CTAs. For example, using active verbs is preferable to filler text such as “Click here”, which does nothing as far as enticing a customer goes. “Sign up for a free copy!” might get better results if the user deems the content interesting enough for a no-strings-attached look.

Buildup

On top of the text of the CTA itself, the buildup can also influence your rate of conversions. Take landing pages built for sales funneling as an example – they’re specifically made to entice customers into buying a product or service and often follow a similar structure: lay out a problem using a person as an example and then move onto telling how their product managed to help them out where all other options failed, then finally offer you the opportunity to apply their teachings to your own problems (it’s never a sale, always an opportunity).

A great call to action is, therefore, a combination of simply suggesting an action at the right time, creating a sense of anticipation, then using a compelling design and the correct words to entice your customers into making one initial choice. It sounds like a lot to process, but the road to creating a good CTA is well-trodden and there’s a lot of resources available to those who want to delve deeper into the subject.

Let’s take a look at a simple example built using Divi, which doesn’t make much use of a buildup for its main call to action.

The whole main page is littered with calls to action designed in a compelling manner, but the main one doesn’t beat much around the bush. “We love keeping you active, healthy and happy. Make an appointment.” is short, concise and gives a sense of urgency while placing the decision in your hands.

The Divi Call to Action Module

In order to make your life easier, Divi comes with a built-in CTA module. This enables you to implement CTAs at the click of a button using the Divi builder and enjoy the same level of customization available with all of its modules.

The module includes all the options you can imagine, such as colors, text orientation, customizable labels, IDs and classes, advanced design settings and the option to add changes via CSS.

An example of a call to action built using Divi.

While the module does have a lot of options, getting a call to action to remain fixed as you scroll through a page isn’t one of them by default. Thankfully, Divi makes it very easy to play around with some advanced tweaks through a combination of child theme usage and some simple CSS. So roll up your sleeves and get ready to play around with some code. (It’ll be painless, we promise!)

Creating a Sticky CTA with Divi

A sticky CTA in action using one of Divi’s demo pages.

A fixed call to action can be a simple solution to increasing conversions, as long as it’s not overly intrusive or otherwise breaks the flow of your websites design. Ideally, you want it to meld into the layout but still serve as a potential reminder to customers that they can opt into your services at any time.

As we mentioned earlier, this isn’t a default option on the CTA module, but thankfully, the folks over at Elegant Tweaks came up with a simple method to implement this feature.

First of all, you’ll need to copy your header.php file into a child theme and find the following lines of code:

<body <?php body_class(); ?>>

<div id="page-container">

In the following code snippet we’re creating a new unique ID called top-cta, whose name is self-explanatory. If you want to change the text of the CTA, replace the necessary lines of code after pasting.

<div id="top-cta">
<a href="#">This is an<span class="cta_gray">
example</span>of a sticky</a>
<span class="blurb_button">
<a class="et_pb_promo_button cta" href="#">
CTA
</a>
</span>
</div>

Now you’ll need to delve into some CSS to customize your brand new sticky CTA, which you can deploy using the Custom CSS field at the bottom of the ePanel.

The Custom CSS field included within the Divi ePanel.

Much of this code should already be familiar to you, and even if you’re not that used to dealing with CSS, it’s pretty easy to navigate. Let’s go over it step by step.

The first section covers the general design of the CTA bar, including the background, text alignment, padding, forcing the text into uppercase, stating the bar should occupy the full width of the browser, and the z-index (which is set to a high value to supersede all others).

Each successive section deals with the classes we previously outlined in header.php and include minor stylistic details which you can tweak to your heart’s content.

Finally, we have some media queries that helpfully resize the CTA bar for smaller resolutions so it doesn’t take over half the screen and scare all your visitors away (trust us, you don’t want to omit that part).

#top-cta {

background-color: #Insert your preferred color here;

background-color: rgba(57, 178, 235, .9);

text-align: center;

padding: 5px 0 5px;

text-transform: uppercase;

position: fixed;

top: 0;

width: 100%;

z-index: 9997;

}

#top-cta a {

color: #fff;

font-size: 28px;

font-weight: 700;

display: inline-block;

}

#top-cta a span.cta_gray {

color: #dfdfdf;

text-shadow: 1px 1px 1px #5a5a5a;

}

#top-cta .blurb_button {

padding-left: 20px;

}

#top-cta a.cta {

background-color: #ff9900;

}

#top-cta a.cta:hover {

background-color:#FFAD33;

}

/*-------------------[768px]------------------*/

@media only screen and ( max-width: 980px ) {

#top-cta {

padding: 10px 0 10px;

}

#top-cta a {

font-size: 20px;

}

}

/*-------------------[480px]------------------*/

@media only screen and ( max-width: 767px ) {

#top-cta {

padding: 7px 0 7px;

}

#top-cta a {

font-size: 18px;

}

#top-cta .et_pb_promo_button {

padding: 4px 15px;

}

}

/*-------------------[320px]------------------*/

@media only screen and ( max-width: 479px ) {

#top-cta {

padding: 5px 0 5px;

line-height: 1.2em;

}

#top-cta a {

font-size: 16px;

}

#top-cta .et_pb_promo_button {

padding: 2px 10px;

}

}

It’s Time for Split Testing!

As you might have noticed in our previous section, even with such a simple bar, there’s a ton of customization options available to really make it your own. You could, of course, simply pick a nice style, put your CTA up and cross your fingers, or we could take things a step further.

It’s a simple truth that visitors will respond better to some designs than others, and although you can follow all the latest trends, there will always be some room for optimization. The smart way to choose which changes to implement is by using analytics to guide yourself.

For example, if you have two designs available for your sticky CTA, you should proceed to test how each affects your metrics during a specific period of time and then stick with the clear winner. This allows you to build upon the knowledge of what works for your specific viewers and really tailor your content as much as possible.

Split testing becomes a bit more complicated when you have a wide variety of options available. If you include wildly different designs within the same tests you’re liable to get skewed results. Therefore, if you have the time and patience to do so, you should try to build upon the results of previous tests (using each bit of knowledge to improve your designs) until you’re satisfied with your metrics.

Don’t be scared, though – this is much easier than we’re making it sound. Your tests can be as long or as short as you want (as long as you’ve received enough traffic to reach an informed decision) and the metrics aren’t hard to read. Are you getting more clicks? Is your bounce rate falling? Most importantly, are you getting more sales? If so, then kick back and enjoy it, you’re earned it.

Conclusion

You can have all the visitors in the world or the most popular products, but sometimes people simply require a little nudge before they decide to sign up for your services or crack their wallet open. That nudge can be as simple as an effective call to action.

Find inspiration in our examples of great CTAs built using Divi, follow the steps outlined above to create your own sticky calls to action, and remember to use split testing to optimize your conversions.

Have you had any success using calls to action? Share your experiences with us in the comments section below!

Article thumbnail image by Bplanet / shutterstock.com