Skip to Main Content

How to add sticky CTAs to an article template with Divi Builder

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Sticky sidebars are extremely effective at catching visitors' attention without being intrusive or distracted. The trick is to include one or two elements in the sidebar that "remain visible" or fixed on the side of the content of the publication 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 sidebar), with the benefit of making calls to action important on the side of the page when necessary.

In this tutorial, we will show you how to add sticky call to action to a blog post template using Divi Theme Builder. The application of this layout is considerable. This will work for almost any publication page or template. In addition, you do not 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 Your Blog Publishing Template in Divi

Adding the theme builder template

The first step is to import our predefined template onto our site. We will use the release template of the Divi Theme Builder Pack # 1.

To get started, go to Divi> Theme Builder. Click on 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 in the folder. If templates are currently installed on your site, be sure to uncheck all options that may override your current templates. Then click on the import button.

Build the blog post template

Once the model is imported, we are ready to add our new CTAs to the adhesive sidebar at the model layout. To do this, click the edit icon for the custom body box.

Added a dual sidebar layout to hold CTAs in the sidebar

In the Model Layout Editor, find the line that contains the content publishing module and change the column layout to a fifth-by-fifth column structure over a fifth (1 / 5 3 / 5 1 / 5 ). This will allow us to keep the column centered for the content of the publication while providing two sections on both sides for our sticky CTAs.

After changing the column structure, drag the content publishing module to the center column.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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 an 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 is going here. Edit or delete this text online or in the content settings of the module. "
  • 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
CTA tights
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 that we just created and paste it in the rightmost 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.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

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 width of the line. Feel free to adjust this value according to your needs 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 upper 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 has a higher or lower height, you will need to adjust the 130 pixels up or down.

Save settings

Once you're done, save the layout of the template.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

And then save the theme builder settings

Final result

To view the end result, visit a blog article using the template.

CTA tights

And that is how sticky ACTs will stick to the scroll. You can see how it would work better for longer content.

Latest Thoughts

These sticky side calls to action are a refreshing alternative to the traditional sidebar. They are well suited to minimalist design because they are less intrusive and do not give the post a sense of congestion. In addition, you can position the CTA lower on the page so that it appears gradually and remains stuck on the parchment, making it more visible to visitors. 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 a lot of applications.

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
2 shares
Share2
tweet
Save