sticky CTAs

Sticky CTAs are extremely effective at grabbing the attention of visitors without being overbearing or distracted. The trick is to include one or two items in the sidebar that “stay visible” or fixed to the side of the post’s content as 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 (no sidebar), with the benefit of presenting calls to action. important on 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.

sticky CTAs

How to add fixed calls to action in your blog post template in Divi

Adding the theme generator 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, go to Divi> Theme generator. 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 there are templates currently installed at your site, be sure to uncheck any options that may override your current templates. Then click on the import button.

Building 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 template layout editor, find the row containing the content publishing module and change the column layout to a one-fifth by three-fifths by one-fifth column structure (1/5 3/5 1/5 ). This will allow us to keep the column centered for post content while providing two sections on either side for our sticky CTAs.

Once the column structure is changed, drag the content publishing module to the center column.

Updating Row Parameters

Open row settings and update the following design options:

  • Use a custom gutter width: YES
  • Gutter width: 2
  • Width: 100% (desk), 90% (tablet)
  • Maximum width: 1500px

This will give us the room we need for our dual sidebar setup.

Update column 1 setting

Then open the settings for column 1 and give that 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.

Styling the CTA sidebar

Update the settings as follows:

 Contents

  • Button: “Click here”
  • Body: “Your content goes here. Edit or delete this text inline or in the module’s content settings.”
  • Button link URL: #

Body text design

  • Police Corps: Montserrat
  • Font weight: semi-bold
  • Body of text: right alignment
  • Body text color: # 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
  • Button border width: 0px
  • Button radius: 80px
  • Font Weight: Bold
  • Button Font Style: TT
  • Button padding: 12px top, 12px bottom, 22px left, 22px right

Width, alignment, padding and borders

  • Width: 100%
  • Max width: 320px
  • Module alignment: right
  • Padding: 10px left, 10px right
  • Top Border Width: 10px
  • Top border color: #eeeeee
  • Bottom border width: 10px
  • Bottom border color: #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 rightmost column. Then update the settings for the duplicate as follows:

  • Body text alignment: left
  • Module alignment: left

Update Column 3 Parameters

For that CTA in the right column, we’re going to add a top margin to the column to establish a starting position for the CTA sidebar at a lower point on the page.

Start by opening the settings for column 3 and add the same CSS class we added to column 1:

  • 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.

Adding custom CSS to the template with a code module

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.

Read more: How to create a dynamic job list section with the Divi blog module

Save settings

Once you’re done, save the template layout.

And then save the theme generator settings

Final thoughts

These sticky sidebar calls to action are a refreshing alternative to the traditional sidebar. They suit the minimalist design well as 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 gradually appears and stays stuck to 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.

 

For website maintenance service contact us.

Leave a comment

echo "";