Create and display the table of contents of your posts

The Table of Contents component for the free version of Elementor allows you to automatically create your table of contents with ease and convenience for all types of posts you need to share your knowledge and expertise.

Table of Contents

Accessibility for table of content widget

Keyboard and screen reader accessibility

Enter / Space keyboard keys on header to open/close content
ArrowDown / ArrowUp keyboard keys to move between links
Enter / Space keyboard keys on links to trigger the jump to the section
Escape keyboard key to close the content and give the focus on header
aria-label with an Open/Close text
aria-expanded to indicate whether the TOC is expanded or not
aria-controls to identify the HTML tag whose content are controlled by the element

Introducing widget Table of Contents

Adding a table of contents, also called summary, at the start of your blog posts can be a “vrai plus”, both in terms of optimizing your blog’s SEO and improving the user experience. (UX) of your readers.

If your articles are less and less succinct and more and more developed, a summary helps to make the content more digestible and understandable by your readers.

The widget can display all levels of headings based on the h1 to h6 tags.

Heading levels are shown by indent to the right.

How to activate the Table of Contents

The ‘Elementor‘ plugin is installed and active.

The ‘EAC components‘ plugin is installed and active.
From the panel settings you have to drag & drop the ‘Table of Contents‘ icon on the panel preview.

Choose the level of analysis and the title tags

You must enter the title to display and determine the target of the scan.

For each entry, the analysis will be deeper.

For example select ‘Entry- content’ to exclude sidebars and page title or ‘Article’ to uniquely display the headers of a posts grid.

Then select the title tags that will be included in the TOC.

Select anchor names and content characteristics

The ‘Auto generated anchor‘ toggle will generate an anchor name of the form “toc-heading-anchor-X” where X is a rank number

If you deselect the toggle ‘Auto generated anchor’ the title name wil be used to generate the anchor name.

And with the ‘Rank number’ toggle you can add a number at its end if the title is not unique in the page.

Select the layout of the content when loading by toggle ‘Collapse content on load’
Choose the pictogram to display for each entry
Select the container width and alignment