Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates.

If you are posting long content, adding a table of contents helps both search engines and human visitors navigate and understand your content.

With the widget Table of Contents widget for WordPress, you can easily add a table of contents to your website which automatically generates its content based on the hierarchy of title tags in your content.

For example:

If you are using this widget with the visual theme builder from Elementor Pro, you can automatically add a table of contents to all your content without lifting a finger. When a visitor clicks on a link in the table of contents, it acts as an anchor and takes them to that section of the page.

In this post, we will show you exactly how to configure the widget Table of Contents widget for WordPress with Elementor ThemeBuilder.

But before, let's discover together How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog.

Then, back to why we are here.

How to add a table of contents with Elementor

First of all, we should note that you can also use this widget in a basic way. However, in this tutorial, we are focusing on automatically adding TOC to all (or some) of your content using Elementor Theme Builder and single post templates.

Here's how to do it.

1. Create or modify a single post template

To get started, use Elementor Theme Builder to create a new unique post template or edit any of your existing unique post templates where you want to add the table of contents.

Easily create your website with Elementor

Elementor lets you create Easily and Free any website or blog design with a professional look. Stop paying a lot for a website you can do yourself.

You can apply your template to any type of post (blog, page, custom post type), but we'll focus on blog posts.

2. Add the Table of Contents widget

Once you have opened your unique post template, add the widget Table Of Content where you want your table of contents to appear. It's located in the Unique category, with the widgets for the post title and post content:

Once you've added the widget, you should automatically see a list of all the titles that are present in the post.

Now it's time to configure the settings of this widget.

3. Configure the widget table

Make sure to open the settings for the Table Of Content widget. Then use the tab Content to configure the content that appears in your table of contents.

First, add the title - for example, "Table of Contents". This is static text that appears above the list of anchor links that the widget automatically generates.

Do you want to sell your products on the internet?

Download WooCommerce for free, the best e-commerce plugins to sell your physical and digital products on WordPress and easily create your online store. Perfect for beginners.

Then choose the content to include. In the tab Include, you can come in :

  • HTML Tag. For example, you can include and, but not anything less. You need to define your title tags in the WordPress editor.
  • Containers. You can also add anchor links to other containers outside of your post content. For example, your foot toe. This is an advanced feature.

If you access the tab exclude, you can exclude specific headers from your post using a CSS selector. For example, if you want to exclude a single title , you can add a special CSS class " ignore To that header using the WordPress editor, then exclude it using the rule  Anchors by Selector :

Then you can use the parameter MarkerView to choose between numbers and bullets in your table of contents list. If you choose " bullets ", you can choose from any Font Awesome icon.

Finally, you can use the section Additional Options to control other parameters:

Word Wrap - whether the elements can take several lines or not.

Minimize Box - whether or not visitors can collapse the table of contents. If you enable this option, you will also be able to choose custom icons and define responsive behavior. For example, you can automatically collapse this table of contents for mobile visitors.

Hierarchical View - when enabled, subheadings will be indented under parent headings. If disabled, everything is displayed in a single list with no indentation.

4. Configure style settings

Next, navigate to the Style tab to configure your table of contents design. You can change all the colors and typography to create a user-friendly experience and match the rest of your design. website :

5. Configure advanced settings

To finish things up, go to the tab Advanced to configure a few more settings for how your table of contents works.

For example, if you set Width  equal to Custom et Position equal to Fixed in the section Positioning, you can make sure that the table of contents stays in the same position even when users start scrolling the page.

If you use Positioning to display your table of contents on top of another element (like your header), you can also increase the Z index to make it appear at the top:

And that's all ! You've just learned how to automatically add a table of contents to your content using the Elementor Visual Theme Builder and Table of Contents widget.

To get started, buy Elementor Pro today and create your table of contents in Elementor Theme Builder.

%d bloggers like this page: