If you publish long content, adding a table of contents helps both search engines and visiteurs humans to 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 focus on automatically adding the table of contents to all (or part) of your content using Elementor Theme Builder and unique 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.
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 Contents 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.
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 - if the visiteurs may or may not reduce the table of contents. If you enable this option, you will also be able to choose custom icons and set responsive behavior. For example, you can automatically collapse this table of contents for visiteurs on mobile.
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.
