How to Create a Floating Sticky Blog Sidebar with Elementor Pro

A blog is only a blog if it has a sidebar! That maybe is no longer true, one column layouts for blog posts are a thing for a few years now. Still, you may want to promote additional content, like a special offer, a sign-up form, etc. in a sidebar.

Then again, the sidebar is only in the visible part of the page for a few seconds, your visitors will quickly scroll your post up and down and the sidebar is never paid attention to.

So how can you have a floating sticky sidebar on your single post layout, on a website running Elementor Pro?

Here is very simple approach to get your blog single layout with a sidebar up and running in minutes.

The following steps work only if you use Elementor Pro.

Create a single post layout using the Elementor theme builder.

In WordPress dashboard, click Theme Builder > Add New.

Screenshot: Elementor Theme Builder in Wordpres Dashboard

Next, choose the Single template, Post as Post Type and a type a name for your template. Just pointing this out in case you are unaware of this feature: Theme builder allows to design a template from scratch that exactly fits your needs. To design the single post template is just one of many ways to use the theme builder functionality of Elementor Pro. I.e., here on Fresh van Root.com, the templates for single posts, archive pages for categories and tags, are created using Elementor.

Screenshot: Options when creating a new template with Elementor Theme Builder

For this demo, we will choose the first template provided by Elementor. Don’t have Elementor installed yet? You can also take a look at the provided templates in the official Elementor blog.

Screenshot: Single Post Library in Elementor

Customize your single post template

Now duplicate the column, delete all content within it (but keep the inner section). Then customize the column width to your needs.

Demo: Duplicate a column, adjust width

Add the sidebar content

Now, add all the content you want your floating sidebar to hold. For this demo, we add a few elements to feature our WordPress Kick Start package.

Screenshot: My blog sidebar with promotional content.

Make the sidebar column sticky

Now the most important step: Enable the sticky property on the inner section of your sidebar column. Why an extra inner section? Because you don’t have the sticky property on column level, it is only available on section level or specific elements (you could also make one specific promotional image sticky, instead of a whole inner section).

Setting display conditions

The next step is to decide which posts this template should be used for. That’s again a very powerful Elementor feature: You could create post templates for different use cases, i.e.

  • a template for specific authors (i.e. a different layout for guest bloggers)
  • categories or tags (show a specific promotion for posts in the category X)
  • in a specific format (i.e. for photo blog posts)

Click the little arrow next to the green publish button to access display conditions. For this example we only want to display the single blog post template with the floating sidebar on posts tagged with GeneratePress.

Publish and test!

Now publish your template and browse to a blog post meeting your display conditions. The floating sticky sidebar should work!


Bonus Content

  • Keep the blog single template unpublished as long as you haven’t finished the design (you don’t want to confuse your readers with a changing blog design). Use the display conditions settings to test your blog layout on a live post (i.e. choose very specific tags to match only one post).
  • This how-to focused on blog single templates and creating a sticky blog sidebar, but keep in mind you can create a sticky sidebar (or content) on any page created with Elementor, and on any page template, you want!
  • Be cautious of over-using this feature, it makes maintaining your site and content more complicated, and spend extra time configuring and testing the responsive settings.

This site is created using Elementor and GeneratePress. We published a few posts about how we did it!

In Part 1 we provided insights why we started a redesign of our site in the first place, and what the process looked like. In Part 2, we focused on the GeneratePress theme and how it plays together with Elementor. In Part 3, we focus on Elementor, sharing the learnings made while building this site.

Subscribe to Creators of All Trades newsletter

Discover trending apps and must-reads across social, marketing, productivity, design, tech, and startups. Subscribe now and elevate your game!

10 Responses

  1. I love you deeply with all my heart! Yo don’t know how helpful you are! And it’s free!! Your capability will be returned! Thank you to infinity and beyond!!

  2. Thanks so much for creating this tutorial? Do you have any recommendations on how to do this without using a full-width page layout? When using full width my content looks massively stretched, and can’t seem to find a decent solution that scales to multiple screen sizes without the nav bar overlapping the content.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Elementor Crash Course - Now for $66 FOR FREE

Learn the most important Elementor tips & tricks in 90 minutes.