Sticky sidebars are extremely effective in attracting the attention of visiteurs without being intrusive or distracting. The trick is to include one or two elements in the sidebar that “stay visible” or fixed to the side of the contents of the post when the user scrolls the page. This is a refreshing alternative to the traditional sidebar layout, as it gives the impression of a modern full-width layout (without a sidebar), with the benefit of presenting calls to action important to the side of the page when necessary.
In this tutorial, we'll show you how to add sticky calls to action to a blog post template using Divi Theme Builder. The application of this layout is considerable. It will work for almost any page or post template. Plus, you don't have to limit yourself to CTAs; you can choose to add the Divi module (s) of your choice.
What you need to get started
To begin, you must to install and activate the Divi theme . Make sure you have the latest version of Divi.
You will also need at least one message created with Divi Builder for testing to display the desired result.
After that, you are ready to leave.
Preview
Here is a quick overview of sticky ACTs that have been added to a blog post template in Divi.
How to add fixed calls to action in your blog post template in Divi
Adding the theme builder template
The first step is to import our predefined template on our site. We are going to use the Divi Theme Builder Pack # 1 publication template.
To get started, navigate to Divi > Generator Themes. Click the portability icon at the top right of the page. In the portability modal, select the import tab and choose the divi-theme-builder-pack-1-post-template.json file from the folder. If you have templates currently installed on your site, be sure to uncheck any options that may overwrite your current templates. Then click the import button.
Build the blog post template
Once the template is imported, we're ready to add our new CTAs to the sidebar sticky to the template layout. To do this, click the edit icon for the custom body area.
Added dual sidebar layout to hold sidebar CTAs
In the Model Layout Editor, find the row containing the Publish module. contents and replace the column layout with a one-fifth by three-fifths by one-fifth (1/5 3/5 1/5) column structure. This will allow us to keep the column centered for the contents of the post while providing two sections on either side for our sticky CTAs.
After changing the column structure, drag the content publishing module to the center column.
Update line parameters
Open the line settings and update the following design options:
- Use a custom gutter width: YES
- Gutter width: 2
- Width: 100% (desktop), 90% (tablet)
- Maximum width: 1500px
This will give us the room we need for our double sidebar configuration.
Update 1 column settings
Then open the 1 column settings and give this column a custom CSS class:
- CSS class: sticky-cta
Adding a CTA sidebar to the left column
We are now ready for the first call to action. Add a call to the action module in the left column.
Stylize the CTA Sidebar
Update the settings as follows:
Contents
- Button: «Click here»
- Body: “Your content goes here. Edit or delete this text online or in the module's content settings. ”
- URL of the link of the button: #
Body text design
- Body Font: Montserrat
- Font weight: semi-bold
- Body text: Right alignment
- The body color of the text: # 444444
- Body text size: 22px (desktop), 18px (tablet)
- Body height: 1.3em
Button
- Button text size: 14px
- Button text color: #ffffff
- Button background color: # 6148df
- Width of the button border: 0px
- Radius of the button: 80px
- Font weight: Bold
- Button font style: TT
- Padding of buttons: 12px at the top, 12px at the bottom, 22px at the left, 22px at the right
Width, alignment, padding and curbs
- Width: 100%
- Maximum width: 320px
- Alignment of the module: right
- Padding: 10px on the left, 10px on the right
- Width of the top border: 10px
- Color of the top border: #eeeeee
- Width of the bottom border: 10px
- Color of the bottom border: #eeeeee
Adding the CTA sidebar to the right column
To create the CTA for the right column, copy the one we just created and paste it in the far right column. Then update the settings for the duplicate as follows:
- Alignment of the text body: left
- Alignment of the module: left
Update the 3 column settings
For this CTA in the right hand column, we will add an upper margin to the column to establish a starting position of the CTA sidebar at a lower point of the page.
Start by opening the parameters of the 3 column and add the same CSS class that we added to the 1 column:
- CSS class: sticky-cta
Then add the following custom CSS to the main element:
Office
margin-top: 50%
Tablet
margin-top: 0%
This will give us a different starting point for the sticky CTA on the right column, which is 50% of the row width. Feel free to adjust this value as needed for your own blog post.
Add custom CSS to template with a code module
In order to get our “sticky” positioning for our sidebar CTAs, we need to add custom CSS. To do this, create a new code module under the content publishing module (or anywhere on the page).
Then, paste the following CSS into the code box:
<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>
The top offset in this code is a calculation that positions the CTA vertically centered on the page when scrolling. The 50vh is half the height of the browser window and the 130px is half the height of the CTA. If your CTA is higher or lower, you will need to adjust the 130 pixels up or down.
Save settings
Once you're done, save the layout of the template.
And then save the theme builder settings
Final result
To view the end result, visit a blog article using the template.
And this is how sticky CTAs will stay stuck on scroll. You can see how it would work best for longer content.
Latest Thoughts
These sticky side calls to action are a refreshing alternative to the traditional sidebar. They work well for minimalist design because they are less intrusive and don't make the post feel cluttered. Additionally, you can position the CTA lower on the page so that it appears gradually and sticks to the scroll, making it more visible to people. visiteurs. And do not forget. You can replace the CTA with any Divi module or combination of modules to create just about anything you want. You can also choose to keep only one CTA on one side. It seems to have many applications.
