table of content elementor

Need to create or add a table of contents in Elementor?

When writing a long article, such as a list of tools or places, you can 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 post.

But with Elementor, you don’t need to install a TOC plugin if you want to add a TOC. Elementor has a default widget that lets you add a table of contents to your long post. We’re going to cover it here.

Table of Contents is a new widget recently introduced by Elementor. With this widget, you can provide additional navigation on your long article page, allowing your visitors to easily jump between sections of your article.

Elementor’s Table of Contents widget lets you choose the exact header tags to display on your table of contents. You can also use headers from a specific container on the page.

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

table of content elementor

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 of all, you can use it on Pages and Posts (pages and posts created entirely with Elementor). Alternatively, you can create the Table of Contents widget on top of your WordPress website’s unique post template.

Of course, the unique post template has to be done with Elementor. By implementing the Table of Contents widget on the single post template, a table of contents will be automatically generated on your post as long as the post contains the header tags based on the header levels you set. on the Table of Contents widget.

Add the Table of Contents widget to a single post template

In this article, we’ll show you how to add the Table of Contents widget to a single post template. You can create a new single post template or edit the existing template. We will create a new single post template in this example.

To get started, log into your WordPress dashboard and navigate to Templates -> Theme Builder. On the Theme Builder page, go to the Single tab and click the ADD SINGLE button to create a template.

In the Select template type section, select Single Post. Give your template a name and click on the CREATE TEMPLATE button.

We will create the single post template from scratch; close the template library.

Add a new section by clicking the plus button in Elementor’s edit box and select the three-column structure.

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

Add common elements like post title, post info, and post content to the second column and customize accordingly. Once done, add the Table Of Contents widget to the first column.

Set the title of your table of contents in the Title section and set the header levels you want to include in the Anchors By Tags section.

If you know CSS, you can exclude CSS selectors to prevent them from appearing on the list of contents.

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

Open Additional Options to display additional setting options and select the desired settings.

Now go to the Style tab to customize your Table of Contents. You can set the background color, border color, border width, and border-radius in the Box section.

While to set the header color, header typography, and header text, you can go to the Header section .

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

To make your Table of Contents more useful, you can make it visible when your visitors scroll lower. To do this, open the Advanced tab and navigate to the Motion Effect option. Set the Sticky to Top and set the Offset to around 80. If you want, you can also set the input animation in the Input Animation section .

You can play around with the left panel until you are happy with your table of contents. Once done, click on the PUBLISH button and set the display condition.

If you set the display condition of the single post template you created above to All Singular, you will automatically have a table of contents every time you write a long post that contains the header tags according to the header level you specified.

Read more: How to add pagination in Elementor or Elementor pro

Ultimately

Adding a table of contents to a long article provides a better user experience for your visitors. They can easily jump from one section to another of your article by clicking on the items in the table of contents. With Elementor’s new widget, 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 your WordPress website’s unique post template so that every time you write a long post that contains header tags, the table of contents is generated automatically.

 

For website maintenance service contact us.

Leave a comment

echo "";