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 article.
But with Elementor, you don't need to install a 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're going to cover it here.
Table of Contents is a new widget recently introduced by Elementor. With this widget, you can provide additional page navigation for your long article, allowing your visiteurs 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.
Please note: Table of Contents is a pro widget. You must install 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 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 your unique post template. website WordPress.
Read also: How to create a file upload form in Elementor
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, navigate to Single tab And click on the button ADD A SINGLE to create a template.
In the Select the section type of models, select Single Post. Give your model a name and click on the button CREATE A MODEL.
We will create the single post template from scratch; close the template library.
See also: How to add reCAPTCHA to your Elementor form
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.
Define the title of your table of contents in the section Title and set the header levels you want to include in the section Anchors By Tags.
If you have knowledge of CSS, you can exclude CSS selectors to prevent them from appearing on the list of contents.
Read also: How to add divider to create section in Elementor
In the section MarkerView, 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 other setting options and select the desired settings.
Now go to the tab Style to customize your Table of Contents. You can set the background color, border color, border width and border radius in the section Box.
While to set header color, header typography and header text, you can go to section Header.
In the section list, You can set the text color of the active element, the text color of the element when you hover your mouse over it, and the text color of the elements in normal mode. You can also set the marker color as well as the typography of the content elements here.
See also: How to install Elementor on WordPress
To make your Table of Contents more useful, you can make it visible when your visiteurs scroll the mouse down. To do this, open the tab Advanced and access the option Movement effect. Define the Sticky on Top and set the offset to around 80. If you want, you can also set the input animation in the section Entrance animation.
You can play around with the left panel until you are happy with your table of contents. Once done, click on the button PUBLISH and set the display condition.
Here is an example of a table of contents that we created.
If you set the display condition of the single post template you created above to All Single, you will automatically have a table of contents every time you write a long article that contains the header tags according to the header level you specified.
Ultimately
Adding a table of contents to a long article provides a best user experience to your visiteurs. They can easily move from one section of your article to another by clicking on 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 while creating a page or post with Elementor. Alternatively, you can also add the Table Of Contents widget on your single post template website WordPress so that whenever you write a long post with header tags, the table of contents is automatically generated.
Get Elementor Pro Now!
Conclusion
Here is ! That's it for this article which shows you how to add a table of contents in Elementor. If you have any concerns on how to get there flet us know in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
