How to Add Table of Contents in Elementor

When writing a long article — such as a list of tools or places — you might want to add a table of contents. In WordPress, there are a bunch of plugins that you can use to create a table of contents on your article. But with Elementor, you don’t need to install any table of contents plugin if you want to add a table of contents. Elementor has a default widget that allows you to add a table of contents on your long article. We will cover it here.

Table of Contents is a new widget recently introduced by Elementor. With this widget, you can provide an additional on-page navigation on your long article, allowing your visitors to easily jump between sections on your article. The Table of Contents widget of Elementor allows you to pick the exact heading tags to appear on your table of content (TOC). You can also use headings from a specific container on the page.

Note: Table of Contents is a pro widget. You need to use the pro version of Elementor to use it.

How to use the Table of Contents widget in Elementor

There are two ideal ways to use the Table of Contents widget in Elementor. First, you can use it on Elemetor pages and posts (pages and posts fully created with Elementor). Alternatively, you can implement the Table of Contents widget on the single post template on your WordPress site. Of course, the single post template has to be made with Elementor. By implementing the Table of Contents widget on the single post template, a TOC will automatically be generated on your article as long as the article contains the heading tags according to the heading levels you have set on the Table of Contents widget.

Implementing the Table of Contents widget on a single post template

In this post, we will show you how to implement the Table of Contents widget on a single post template. You can either create a new single post template or edit the existing one. We will create a new single post template in this example.

To get started, login to your WordPress dashboard and go to Templates -> Theme Builder. On the Theme Builder page, go to the Single tab and click the Add New button to create a new template.

On the Select Post Type section select Post. Give your template a name and click the CREATE TEMPLATE button.

We will create the single post template from scratch, so you can simply close the template library.

Add a new section by clicking the plus button on the canvas area and select the three-column structure.

set the width of the columns with a comparison of about 28%:61%:10%.

Add common elements — such as Post Title, Post Info, and Post Content — to the second column and make the customization accordingly. Once done, add the Table of Contents widget to the first column.

Set the title of your TOC on the Title section and set the heading levels you want to include on the TOC on the Anchors By Tags section.

If you have CSS knowledge, you can exclude CSS selectors to prevent them from appearing on the TOC.

On the Marker View section, you can set the marker of the content items (bullets or numbers). If you select bullets, you can set the icon from the icon library.

Open Additional Options to see more setting options and select the settings you want.

Now go to the Style tab to customize your TOC. You can set the background color, the border color, the border width, and the border radius on the Box section. While to set the header color, header typography, and header text, you can go to the Header section.

On the List section, you can set the text color of the active item, text color of the item when you hover your mouse over it and the text color of the items in the normal mode. You can also set the color of the marker as well as the typography of the content items here.

In order to make your TOC be more useful, you can make it keep visible when your visitors scroll the mouse further down. To do so, open the Advanced tab and go to the Motion Effection option. Set the Sticky to Top and set the offset to about 80. If you want, you can also set the entrance animation on the Entrance Animation section.

You can play around with the left panel until you get satisfied with your TOC. Once done, click the PUBLISH button and set the display condition. Here is the example of the TOC we created.

If you set the display condition of the single post template you created above to Entire Site, you will automatically have a TOC every time you write a long article that contains the heading tags according to the heading level you have specified.

The bottom line

Adding a table of contents to a long article provides a better user experience for your visitors. They can easily jump between sections on your article by clicking the items on the table of contents. With the new widget from Elementor, you don’t need to install an additional plugin to add a table of contents to an article.

You can use the Table of Contents widget when creating a page or post with Elementor. Alternatively, you can also add the Table of Contents widget on the single post template of your WordPress site so that every time you write a long article containing heading tags, the table of contents will be automatically generated.