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