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

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.

TOC Icone
Table of Contents component

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.

TOC settings target
Define the level of analysis for the TOC
Then select the title tags that will be included in the TOC.
TOC choose the title tags

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

Anchor name auto generated

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.

Anchor name with title content
  • 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
TOC content
TOC characteristics

Stylize the header and content

You will be able to customize the Header and Content of the Tabl. The Background, Border, Width, Alignment and color.

TOC Header

Change title color and typography as well as the backgroubd color.

TOC Content

Set the color, the typography of the entries as well as the background color.

You can set the border style and apply shadow to the widget.

Stylising the TOC

Leave a Comment