Sticky Sidebar for Blog Posts with Elementor

I wanted to organize each blog post by subtopics and provide the option to navigate through them using anchor links that remain visible as you scroll within the post content.

Creating the Sticky Sidebar

To start, we’ll create the sticky sidebar. We’ll work on the Elementor template that displays each blog post. To access or create it, go to Templates > Theme Builder from the WordPress admin sidebar.

Then, we’ll see the site sections, where we’ll select Single Post to open the Single templates for any Custom Post Types (CPTs) we’ve created. We’ll work with the default CPTs, i.e., the Posts or blog entries.

Open the Single Post template for editing by clicking Edit.

In the template editing page, go to the Column Edit button in the section containing the post content. It’s a small gray box at the top-left corner of the section when you hover over it.

Right-click to open a menu and select Add New Column.

To work more comfortably, open the Navigator panel, where you’ll see all template parts as drop-downs. This panel may appear by default on the right side of the window, but if not, open it by clicking the overlapping layers icon at the bottom of Elementor’s toolbar.

Expand the first section, where there should now be two columns. Rename these as Content and Sidebar.

Create a new section within the Sidebar, which will stay fixed when scrolling.

In the section’s editing panel, open Motion Effects options. For the Sticky setting, select Top from the dropdown.

In my case, I’ve chosen not to apply the sticky effect on mobile devices, so I deselected the Mobile option under Sticky On.

The Offset value can vary; I couldn’t set it to 0 at the top of the window because the header also has a sticky effect, and I needed the sidebar’s sticky effect to activate only after surpassing the header’s height and a certain distance. A value of 100 pixels works for me, but you may need to adjust this.

Enable the option to keep this inner section within the Sidebar column so that when we finish reading the post content, the sticky section doesn’t remain fixed as we scroll to the end of the window.

Creating the Table of Contents

Now it’s time to create the menu with subtopics anchored to the content. We’ll do this by adding an Elementor widget found in the Single section.

Once inside the table of contents editing options, you can choose from several configurations.

For my blog, I’ve made minimal changes: I adjusted the title, spacing, hid the border, and generally left the default options. The main aspect is selecting which heading levels to include; I chose to display only level-3 headings, or H3.

Facebook
Twitter
LinkedIn