How to Use The Table of Content Widget of Elementor

How to Use The Table of Content Widget of Elementor

Looking for a way to add the Table of the Content widget to your Elementor website? You can easily improve your website navigation using the table of content. A table of content can also improve the SEO of your website too. A table of content can be used in different places on your websites like landing pages, blog pages, and others.

The Elementor page builder has the Table of a Content widget which you can use to make it easier for your reader to navigate your content. So here in this article, we will guide you to use the Table Of Content widget of Elementor.

Use The Table of Content Widget of Elementor

The Table of Content widget is available on Elementor Pro, so make sure that you have upgraded to Elementor Pro before using the table of content widget. After enabling Elementor Pro open up a page with Elementor editor where you want to add the table of content. Elementor Table of Content widget will automatically generate its contents based on the hierarchy of heading tags. So before using the table of content on your post or pages, it should have headings on it. 

Now click on the “+” icon to create a section and then choose your column.

elementor table of content

Now add the Heading widget and set the HTML tag for your heading.

elementor table of content

After adding the heading now add the Table Of Content widget anywhere you want.

elementor table of content

It will automatically generate all the headings of the page under the table of content.

elementor table of content

Now on the content tab from the edit dashboard, you can add the title for the table of content. After that, you can include and exclude the HTML tag to add to the table of content. Then you can add the container that controls the Table of Contents to heading elements under a specific container. After that, you can set the marker view as a number or icon.

elementor table of content

Go to the Additional Information menu to enable or disable the Word-Wrap & Minimize Box feature. Then you can select the minimize icon. At last, you can enable the Collapse Subitems features but the “Collapse” option should only be used in the Table of Contents is made sticky.

elementor table of content

Now move on to the Style tab to style up the table of the content section. Under the Box menu, you can set the background color, border color, and loader color. Then you can set the border width, border radius, padding, and height.

From the Header option, you can set the background color, text color, typography, and icon color of the heading area. You can also set the Separator width too.

Go to the List option from there you can set the max height, typography, and indent of the list item. After that you can set the text color, marker color & size for normal, hover, and active conditions.

That’s it! Your table of content is ready to use.

Wrapping Up

Following the process, you will be able to add a table of content to your website using the Elementor page builder. You can see our other articles to learn How to Create an Image Scroll Effect on Hover in Elementor

How to Add a Link to a Column in Elementor

​​How to create a custom WooCommerce Cart page

We hope this article will help you. If you like this article please like our Facebook page to stay connected.