The Table of Contents (TOC) component for Elementor allows you to automatically create your table of contents with ease and convenience for all types of publication you need to share your knowledge and expertise.
Adding a table of contents, also called summary, at the start of your publication 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 Table of Contents automatically generates a list of links based on the headings you’ve defined in your content.
Table of Contents
How to use 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.
Select analysis target and title tags
In the settings section type the heading text displayed above the Table of Contents and select its HTML tag.
Select the part of the content to be analyzed from the Target list. Useful when you want to limit TOC to the titles of a certain section of your page. See next section.
With the Custom entry, you can enter the class relative to the container you wish to parse.
Finally, select the list of tags in the Include tab that will be used to build the TOC.
You can activate the Rank number option to distinguish titles that are not unique.
Select the block to be parsed and exclude parts of it
The Target list contains a number of predefined entries from which you can select a particular container by its class.
Under the Exclude tab, you can enter one or more container classes, separated by a comma, which will be excluded from the analysis.
For example: Enable/Disable 'Add rank number' option.
This ensures that any changes you make to the inclusion or exclusion settings take effect properly.
Define table behavior and entry numbering type
Content can be condensed on page load with the Collapse content on load option.
The option Word wrap cut the text when column width cannot accommodate long text on one line.
If you want the TOC to be displayed as a block or on top of other widgets, enable/disable the Display block option.
Define table width and alignment for each screen resolution.
And finally, select the type of marker (Marker view) to be displayed in front of each link.
Stylizing table of contents header and content
Unser the style tab you can customize the TOC using style, and other advanced parameters. For the table header and content, you can define the color and font of the title and content links. Their respective background colors and border type.
Accessibility of the table of contents widget
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