How to Add Sticky Sidebar CTAs to a Blog Post Template in Divi

Sticky Sidebar CTAs are extremely effective at grabbing the attention of visitors without being overbearing or distracting.

This is a refreshing alternative to a traditional sidebar layout because it provides the feel of a modern fullwidth (no sidebar) layout with the benefit of showcasing important CTAs on the side of the page when necessary.

Adding a Dual Sidebar Layout to Hold the Sidebar CTAs

find the row that contains the post content module and change the column layout to a one-fifth three-fifths one-fifth (1/5 3/5 1/5) column structure.

Open the row settings and update the following design options:

Use Custom Gutter Width: YES

Gutter Width: 2

Width: 100% (desktop), 90% (tablet)

Max Width: 1500px

open the settings for column 1 and give the column a custom CSS Class:

CSS Class: sticky-cta

Update the settings as follows:

Button: “Click Here”

Body: “Your content goes here. Edit or remove this text inline or in the module Content settings.”

Button Link URL: #

Body Text Design

Body Font: Montserrat

Body Font Weight: Semi Bold

Body Text Alignment: right

Body Text Color: #444444

Body Text Size: 22px (desktop), 18px (tablet)

Body Line Height: 1.3em

Adding the Sidebar CTA to the Right Column

To create the CTA for the right column, copy the one we just created and paste it into the far right column.

Then update the settings for the duplicate as follows:

Body Text Alignment: left
Module Alignment: left

Update Column 3 Settings

For this CTA in the right column, we are going to add some top margin to the column in order to establish a starting position of the sidebar CTA at a point farther down the page.

open the settings for Column 3 and add the same CSS Class that we added to Column 1:

CSS Class: sticky-cta

Adding the Custom CSS to Template with a Code Module

In order to get our “sticky” positioning for our sidebar CTAs, we need to add some custom CSS. To do this, create a new code module under the post content module (or anywhere on the page).

And this is how the sticky sidebar CTAs will stick on scroll. You can see how this would work best for longer post content.

8 Types of CTAs You Should Absolutely Try on Your Blog

Bottom-of-the-Post Smart CTAs

At the end of your blog post, it is important to have a CTA leading your readers to take an action after they finish reading your blog post.

Based on where people are in your database (if at all) is in the buying process or which list they belong to, they can see different calls-to-action.

A random website visitor (someone who hasn't filled out a form yet) is shown a call-to-action that leads to a lead gen offer on SEO.

Connect on Social CTAs

Tweet This CTAs

Speaking of social media, there is another type of an in-line call-to-action involving social media. We call them "Tweet This" links.

You can create links like this yourself using a tool calls ClickToTweet.

Blog Subscription CTAs

Comment CTAs

Slide-In CTAs

The latter types of pop-up CTAs will often not allow you to read a blog post before you either fill out the form or click cancel.

The slide-in CTA is a great way to offer additional information to your readers while still allowing them to read the blog post.

In-Line CTAs

When you think of a call-to-action, you probably think about a big, exciting image that stands out at the end of your blog post.

A call-to-action can simply be a link within your blog post that provides more information on a given topic.

It does the same thing as a button call-to-action -- it directs people to take an action -- but it's just a written link, not a hyperlinked button.

Sidebar CTAs