Adding a Table of Contents Using Qi Addons
If you’re using Elementor, the hands-down easiest way to add a table of contents to your posts is to use Qi Addons for Elementor. It’s a collection of 100+ free and premium widgets for the popular page builder that expand the functionality of Elementor and help you add advanced features that range from typography and showcase to SEO and business (and everything in between). The Table of Contents widget is a free widget and all you need to do in order to use it is to have Elementor installed on your website, and to download the Qi Addons plugin.
After installing the plugin, all the widgets will automatically be added to the standard range of Elementor widgets and you can add them just like you would add any other widget.
Go to the post you want to add the table of contents to and find the right spot for it. Usually, it’s placed just below the introduction, or below the title.
Click on the + sign in your editor to add a new widget. In the left-hand menu, search for the widget by typing “Table of Contents” in the search bar.
The widget you need is the red one on the left. The other one is an Elementor Pro widget. If you’re using Elementor Pro, you can pick between these two. We’re sticking with the Qi widget.
Drag and drop the widget into an empty element on your page. By default the widget will look like this:
Notice that the widget has automatically detected your subheadings (in order for this to happen, they need to be H-tag headings (H2, H3, H4…). If you have hierarchical subheadings (for instance, an H2 section can contain several H3 or H4 sections), these will be hierarchically represented in your table of contents.
In the example we’re using, we only have a couple of H2’s, so we don’t need a hierarchy, and we also don’t need a subtitle or a title for your table of contents. We’ll delete those using the editing menu to the left – simply delete the dummy text and they will disappear.
We’ll also delete the introductory text. Of course, you’re free to keep any of these, if you need them. They are particularly suitable for longform posts with a lot of text and a lot of subheadings.
The menu also includes the option of limiting the table of contents to main page contact too. It’s set to “No” by default, meaning you can add other site content, like in the example above, such as related posts, contact page, social feeds, etc. If you don’t need those, toggle the switch to “Yes.”
There’s also a very useful option of excluding certain H tags (for example, if you only want to include subheadings H2 and H3 but not H4), as well as classes and IDs.
Now you can style the table of contents using the Style tab in the editor. Here you can set the typography options for the subtitle, title and text.
Scrolling down, you’ll find Spacing Style options, which we’ll also leave as they are. We’ll move on to List Style set of options, where you can decide whether you want your table of contents to be ordered or unordered. If you opt for ordered, the items in your table of contents will be numbered.
List Style Position determines whether your list will be inside or outside of the element, and under List Style you can decide what you want your bullets to look like (the options include Disc, Circle, Square and None).
Finally, here you can also set the List Hover Underline (it’s set to “Yes” by default, meaning an underline will appear under a list item when a user hovers over it).
After this, it’s time to style the typography of your list. The Item Typography is the option you’re looking for. Here you can set the font family (we changed ours to match the typography of the rest of the post), as well as weight, spacing, decoration and so on.
And that’s pretty much it when it comes to setting the basic styling and functional options. The final tab, Advanced, features additional options for your table of contents. We won’t go through them separately, but you can play around with the options and tweak the layout with margins and padding; add a motion effect if you want your table of contents to, for instance, fade in or out when the user reaches it, use the Transform options to have the section skew or flip; add a background or a border, and set the additional responsive options.
As we saw, using the Table of Contents widget is very easy and intuitive, and it comes with a rich selection of options to tweak your list just right.
If, for whatever reason, you don’t want to use either of these solutions, there’s another, albeit less rich plugin you can use, so let’s check it out.
