Table of Contents in such a necessary widget that needs to be there in any Blog, not only for users simplicity to find any Topic specifically but for Google’s crawling purpose. Having a TOC (Table of Contents), the positive factor is that users can simply jump to a specific portion of an Article, keeping the navigation & surfing really simple.
There are numerous Plugins that can add a Table of Contents with different Styles inside your Article, but there are really no Plugins specifically designed to display a Floating Table of Contents section. Let’s see how to Add a Floating Table Of Contents In WordPress Blog posts.
Floating TOC features
It does offer a lot of customizability options, You can Literally change any settings by tweaking the Style menu.
- Can be Minimized
- It activates once page is scrolled to a point
- Can stick to Left or Right side of a page
- Completely customizable Color & Design
- Any Heading tags can be included in Table
Apart from all the basic features, Elementor Addons lets you Design the Floating Table of Contents from scratch, the sidewise positioning, Top margin, Width, Font, Text decoration, spacing, and many many more.
Here is a demo preview of the Floating Table of Contents, It activates after scrolling a bit, and can be minimized as well as reopened with a click.
Demo Preview
Installing Required Plugin
In order to have the Floating Table of content feature, you need to install two plugins, one of them is a very popular, top-rated, and majorly used plugin, named ‘Elementor Website Builder’, which is basically a codeless page builder. We won’t be using it to design our pages though it is mandatory to enable the needed feature.
Along with the Elementor plugin, we’ll need another plugin ‘Essential Addons for Elementor’ which helps to add some really unique and useful features to a website.
Download the Plugin & Install both from the WordPress repository or You can Navigate to Left Panel, Click on ‘Plugin > Add new > Search for ‘Elementor’. Click on Install and Later Activate it.
Adding the Table of Contents
From the left window of the WordPress dashboard, click on ‘All Posts’, choose any post and click on Edit, an option ‘Edit with Elementor’ will be visible to you (if you have properly installed Elementor Plugin), Click on it and the page builder will open up.
It takes a few seconds to load up the Editor, inside Elementor builder, navigate to the bottom left corner, click on the ‘Settings’ option. Two options will be there if the Essential Addons plugin is installed properly.
Reading Progress Bar
Table of Contents
Click on the Table of Contents menu and Enable the Table of Contents option as well as the ‘Enable Table of Contents Globally‘ option. Global visibility lets the TOC be visible for each and every post on your site, no matter if the post is made of Elementor or a simple WordPress block builder.
Make sure to check ‘Display on‘ to posts only, unless Pages will be affected which might create a bad designing impression.
Related: How to Add Floating Login Popup in WordPress
Styling the TOC
After you’ve enabled the Floating Table of Contents option, it’s time to customize the design according to your choice. If you’ve previously used Elementor Page Builder, you’ll be good to go, else with a basic knowledge of CSS is completely fine and enough to edit through the Interface.
If having trouble, you can follow the demo video which includes the total customization of the Floating Table of Contents section as well as the complete guide to it.
Conclusion
This tutorial is a part of the WordPress setup series, as well all know how powerful the Table of Contents section is, we have gone too far by making the Table of contents section in a popup floating window.
I hope this article was helpful to you, If you are still having any troubles comment down below.
