Do you want to add a table of contents in Elementor? A long article is much easier to read when the reader can see its sections at a glance and jump straight to the one they came for.
The Table Of Content widget in The Plus Addons for Elementor Pro builds that list for you. It does not ask you to type the sections in: it reads the headings that are already on the page and turns each one into a link.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Table Of Content is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.
- Widget to enable: Table Of Content, switched on under The Plus Addons > Widgets.
- The page needs real headings: the widget does not create headings, it indexes the ones already on the page. Build the article with heading widgets (H2, H3, H4) before you judge the result.
Watch the Video Walkthrough
The same setup, start to finish, in video form.
Step 1: Turn the Widget On
- Go to The Plus Addons > Widgets in the WordPress dashboard.
- Search for Table Of Content.
- Switch the toggle on. The widget carries a PRO badge, so it only appears once the Pro plugin is active.
Step 2: Give the Page Some Headings
The widget indexes headings; it never creates them. Build the article first, using Heading widgets with the right tag — H2 for the main sections, H3 and H4 for what sits under them. The list mirrors that nesting, so an H3 placed after an H2 becomes a child of that H2.
Step 3: Add the Widget and Pick a Style
Drag Table Of Content on to the page. In the Layout section, Style offers five choices shown as pictures with no text on them: None (the default, a plain list) and Style 1 to Style 4, which add their own borders, spacing and markers.
Step 4: Choose the List Type
List Type switches the list between UL (bullets) and OL (numbers). It is set to OL to begin with, and it is only shown while Style is None.
Picking Style 1, 2, 3 or 4 also drops the numbering: in our test the list rendered as a bulleted list under Style 2 even though List Type was still set to OL.
Step 5: Decide Which Headings Are Listed
Select Tags holds H1 through H6, and all six are selected out of the box. Remove the ones you do not want. On most articles H2 and H3 alone give a list people can actually scan.
Step 6: Collapse the Sub-Items
With Child Collapsed switched on, only the top-level entries show. Clicking one opens its children, and the branch you are reading opens by itself as you scroll past it.
Step 7: Add a Title, a Description and an Icon
The Content section controls the block above the list. Content itself is on by default and starts with the title Table Of Content; type your own in Title. Description adds a line of text under it, and Icon puts an icon in front of the title.
Description is a rich-text field, so the line under the title can carry bold text or a link.
Switching Icon on reveals Select Icon, which starts as an exclamation mark in a circle.
Clearing the Title removes the whole heading block, and with it the collapse control. Keep a Title if you want readers to be able to fold the list away.
Step 8: Stretch It Across the Column
Full Width makes the block fill the width of its container instead of shrinking to fit the longest entry. It is off to begin with.
Step 9: Work Through Extra Options
Most of what changes the way the list behaves sits in Extra Options, and each of those has a guide of its own:
- Toggle — fold the list away behind its title
- Smooth Scroll — animate the jump to a section
- Fixed — keep the list on screen while the reader scrolls
- Hash Tag — a copy-link marker beside every heading
- Restricted Container Area — index one part of the page only
- Leaving one heading out — with the tp-toc-ignore CSS class, which is not in Extra Options but belongs with them
One setting has no guide of its own. Heading Active Offset decides how far down the screen a heading has to be before its entry is marked as the current one. It starts at 1 px and can be set per device.
Step 10: Style It
The Style tab is split by the part of the block it changes.
| Style section | What it changes |
|---|---|
| Heading | Padding, margin, typography and colour of the title, the description and the icon, plus the toggle icon and the background of the heading row |
| Content | Padding, margins, indentation and spacing of the list, and its height, minimum and maximum height and scrollbar |
| Content Line | Width and colour of the guide line beside the entries, normal and active. Only shown when Style is not None. |
| Level 1 Typography | Typography and colour of the top-level entries, normal and active |
| Sub-Level Typography | The same for the nested entries |
| Hash Tag | Typography and colour of the marker and of the Copied label (only while Hash Tag is on) |
| Box | Background, border, radius and shadow of the whole block, normal and hover |
Content Line only appears once you pick one of the preset styles, because the guide line it controls is part of those styles.
What You End Up With
On the published page the widget builds the list, links each entry to its heading and keeps the entry you are reading marked as you scroll.
Settings Reference
Layout
| Setting | What it does | Default |
|---|---|---|
| Style | Plain list (None) or one of four preset looks | None |
| List Type | UL for bullets, OL for numbers; shown only while Style is None | OL |
| Select Tags | Which heading levels are listed | H1, H2, H3, H4, H5, H6 |
| Child Collapsed | Hide the nested entries until their parent is opened | Hide |
| Full Width | Stretch the block to the full width of its container | Hide |
Content
| Setting | What it does | Default |
|---|---|---|
| Content | Show the title block above the list | Show |
| Title | The heading of the block | Table Of Content |
| Description | A line of text under the title | Empty |
| Icon | Show an icon in front of the title | Hide |
| Select Icon | Which icon | Exclamation mark in a circle |
Extra Options
| Setting | What it does | Default |
|---|---|---|
| Toggle | Let the reader fold the list away; needs Content on | Hide |
| Default On | Start expanded; can be set per device | Show |
| Select Open Icon / Select Close Icon | The two toggle icons | Chevron up / chevron down |
| Smooth Scroll | Reveals Smooth Duration and Scroll Offset | Hide |
| Smooth Duration | How long the jump takes, in milliseconds | 420 |
| Scroll Offset | Gap left above the heading you jump to, in pixels | 0 |
| Fixed | Pin the block while the reader scrolls | Hide |
| Fixed Offset | Distance from the top of the screen when pinned | 0 |
| Hash Tag | Add a copy-link marker beside every heading | Hide |
| Tag | The marker text | # |
| Copy Text | Show a Copied label after the click | Show |
| Hash Tag On Hover | Show the marker only on hover | Show |
| Heading Active Offset | How far down the screen a heading counts as current | 1 px |
| Restricted Container Area | CSS class of the one area to index | Empty |
How It Behaves
- The whole page is scanned by default. Unless you fill in Restricted Container Area, the widget reads every heading on the page, including headings your theme puts in the page title, header or footer. On our test page the default settings listed 14 entries, two of which came from the theme.
- Links are built from the heading text. Spaces become hyphens and punctuation such as
& ( ) . , : ? # %is dropped, so “Publishing & Maintenance” becomes#Publishing--Maintenance. - Repeated headings still work. Two headings with the same text get different links — the second one gets a
_1on the end — and each entry jumps to its own heading. - The current entry is highlighted and changes as the reader scrolls through the article.
- The list is built in the browser after the page loads, so it always matches the headings that are actually on the page.
Limitations
- The widget is Pro only. On a site running only the free plugin it is not in the editor, and a page that already used it shows nothing where the widget was.
- Theme headings are indexed too. A page title or a site title in the header shows up as an entry until you set Restricted Container Area.
- List Type only applies to the None style. Under Style 1 to Style 4 the list rendered with bullets whatever List Type was set to.
- There is no setting for the link text: an entry always shows the heading exactly as it is written on the page.
- Removing a level from Select Tags can flatten the outline. On our test page, taking H4 out of the list moved an H3 that had H4s under it up to the top level, alongside the H2 sections. Check the result after you change the tag selection.
- Clearing Title removes the heading row, which also removes the Toggle control from the published page.
Troubleshooting
The table of contents is empty
The page has no headings inside the area being scanned, or Restricted Container Area points at a class that is not on the page. Clear that field to go back to scanning the whole page.
Entries appear that are not part of the article
They are headings from the theme or from another section of the page. Put a CSS class on the container that holds the article and name it in Restricted Container Area, or add tp-toc-ignore to the headings you want left out.
Nothing changes in the editor when I edit a setting
The list is drawn by JavaScript after the page renders. Save the page and look at the published version; the editor preview does not always redraw it.
The list is too long to be useful
Trim Select Tags to H2 and H3, or switch Child Collapsed on so only the main sections show until a reader opens one.
