Are you looking for a way to add a sticky table of contents in Elementor? In this tutorial, we will see how you add a table of contents in the sidebar using the free Elementor widget.
Google loves long-form content. The statistics show long-form content perform better and rank higher in the search engine results. But, the strange truth is that the material is not consumable in the long-form.
We need to break it into small pieces and guide the readers precisely in the article. This is why most people use a table of contents in long-form articles.
Let us see the different ways to add a sticky table of contents in Elementor.
Adding a sticky table of contents in Elementor
Here we will see two methods of adding sticky table of contents in Elementor post and pages.
But before jumping into the actual techniques, we would like to inform you that this tutorial will help you add a sticky table of contents in the sidebar.
Why sticky table of contents in sidebar?
If the table summary is at the start of the article, readers can have a glimpse of the article before starting it. But if the table of content is in the sidebar, readers have a clear idea where exactly they are on the post and how far they’ve read the article.
Let us see the methods:
Using Elementor Pro:
In case you’ve Elementor Pro, then adding a table of contents in the sidebar is very easy. You can simply follow the below steps:
- To begin with, you can create a two-column section
- Add the main content like headings, text, etc. on the left side.
- Add a Table of contents widget on the right-side column.
- Click on Edit Table of contents > Advanced > Sticky > Top
- You can select the options to display sticky on Desktop, tablet, mobile.
This is the most easiest way to add sticky table of contents in Elementor if you have many posts/pages. Get started with table of contents from Elementor Pro.
Using free Elementor Plugin:
In the case of free Elementor plugin, you might be using the Table of contents widget from some Elementor Addons plugins.
Similar to the first case, add the TOC widget in the right column. To make this widget sticky, add a CSS class to this widget from the advanced settings.
I’ll name it ‘toc-sticky‘
Now, add a class name to the column like ‘parent-sticky‘
The classes need to be added from the advanced settings, i.e, Advanced > CSS classes.
After adding the classes, add the below CSS code in the Column’s Advanced tab > Custom CSS. You can also add this to the theme’s customizer CSS option.
.toc-sticky{
position: sticky;
position: -webkit-sticky;
top: 3rem;
}
.parent-sticky
.elementor-widget-wrap {
display: block!important;
}Save the post/page after following the above steps. This will make the table of contents sticky in the sidebar, and the content on the left side will be scrollable.
The above steps can be applied for any widget, and it is not specific to TOC. You can create a sticky CTA button or an image in the sidebar.
I hope this tutorial has helped you. If you’re looking for many advanced features for your website, then we recommend going for Elementor Pro, because it will save you a lot of time to customize the site quickly.
