---
title: "How to Add a Table of Contents in Elementor?"
url: https://theplusaddons.com/docs/add-a-table-of-contents-in-elementor/
date: 2025-01-11
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "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..."
word_count: 1695
---

# How to Add a Table of Contents in Elementor?

## 

- The Table Of Content widget in The Plus Addons for Elementor Pro reads headings already on the page and turns each one into a link.
- The widget is Pro only, and it is not in the editor at all when the Pro plugin is switched off.
- Select Tags includes H1 through H6, and most articles use only H2 and H3 for a list people can scan quickly.
- Child Collapsed hides nested entries until a parent opens, and the branch being read opens by itself as the reader scrolls past it.
- Restricted Container Area limits indexing to one part of the page, which avoids theme headings from the page title, header, or footer.

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.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/table-of-contents/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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.

https://www.youtube.com/watch?v=NWhr5lOm_3Y

## 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.

![The Plus Addons Widgets screen with Table Of Content found by search and its toggle switched on](https://theplusaddons.com/wp-content/uploads/2025/01/table-of-content-activate-new-1024x369.png)

## 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.

![Layout section of the Table Of Content widget with the Style picture chooser outlined, the table of contents showing beside it in the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/toc-style.webp)

## 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**.

![List Type dropdown outlined in the Layout section, set to OL](https://theplusaddons.com/wp-content/uploads/2026/09/toc-list-type.webp)

> *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.

![Select Tags field outlined with only H2 and H3 chosen, and the shorter table of contents in the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/toc-select-tags.webp)

## 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.

![Child Collapsed switched on in the Layout section, outlined in the panel](https://theplusaddons.com/wp-content/uploads/2026/09/toc-child-collapsed.webp)

![Published page with Child Collapsed on: the sub-items under Building Your First Page and Publishing Your Work are folded away, while the section being read stays open](https://theplusaddons.com/wp-content/uploads/2026/09/toc-result-child-collapsed.webp)

## 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.

![Title field outlined in the Content section, changed to On This Page](https://theplusaddons.com/wp-content/uploads/2026/09/toc-content-title.webp)

**Description** is a rich-text field, so the line under the title can carry bold text or a link.

![Description field outlined in the Content section with a line of text in it, showing under the title in the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/toc-content-desc.webp)

Switching **Icon** on reveals **Select Icon**, which starts as an exclamation mark in a circle.

![Icon switched on and Select Icon outlined in the Content section](https://theplusaddons.com/wp-content/uploads/2026/09/toc-content-icon.webp)

> *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.

![Full Width switched on in the Layout section, with the table of contents stretched across the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/toc-full-width.webp)

## 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](https://theplusaddons.com/docs/create-a-collapsible-table-of-contents-in-elementor/)- [**Smooth Scroll** — animate the jump to a section](https://theplusaddons.com/docs/add-smooth-scrolling-effect-to-elementor-table-of-contents/)- [**Fixed** — keep the list on screen while the reader scrolls](https://theplusaddons.com/docs/make-a-sticky-table-of-contents-in-elementor/)- [**Hash Tag** — a copy-link marker beside every heading](https://theplusaddons.com/docs/copy-a-title-url-from-the-elementor-table-of-contents/)- [**Restricted Container Area** — index one part of the page only](https://theplusaddons.com/docs/restrict-a-content-area-in-an-elementor-table-of-contents/)- [Leaving one heading out — with the **tp-toc-ignore** CSS class, which is not in Extra Options but belongs with them](https://theplusaddons.com/docs/exclude-a-title-from-table-of-contents-in-elementor/)

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.

![Heading Active Offset slider outlined at the bottom of the Extra Options section](https://theplusaddons.com/wp-content/uploads/2026/09/toc-heading-offset.webp)

## Step 10: Style It

The **Style** tab is split by the part of the block it changes.

![Style tab, Heading section, with the Typography control outlined](https://theplusaddons.com/wp-content/uploads/2026/09/toc-style-heading.webp)

| 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 |

![Style tab, Level 1 Typography section, with the Typography control outlined](https://theplusaddons.com/wp-content/uploads/2026/09/toc-style-level1.webp)

**Content Line** only appears once you pick one of the preset styles, because the guide line it controls is part of those styles.

![Style tab, Content Line section with Line Width and Active Line Width outlined, and the guide line beside the entries in the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/toc-style-line.webp)

## 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.

![Published page: the table of contents on the left lists the headings of the article on the right, with the section being read highlighted](https://theplusaddons.com/wp-content/uploads/2026/09/toc-result-default.webp)

## 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 `_1` on 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](https://theplusaddons.com/docs/restrict-a-content-area-in-an-elementor-table-of-contents/), 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.

## Related Docs

- [How to Make a Sticky Table of Contents in Elementor?](https://theplusaddons.com/docs/make-a-sticky-table-of-contents-in-elementor/)- [How to Create a Collapsible Table of Contents in Elementor?](https://theplusaddons.com/docs/create-a-collapsible-table-of-contents-in-elementor/)- [How to Exclude a Title from Table of Contents in Elementor?](https://theplusaddons.com/docs/exclude-a-title-from-table-of-contents-in-elementor/)- [How to Restrict a Content Area in an Elementor Table of Contents?](https://theplusaddons.com/docs/restrict-a-content-area-in-an-elementor-table-of-contents/)

## Frequently Asked Questions

**Q: What do I need before adding a table of contents in Elementor?**
A: The key requirement is a real heading structure already on the page. The Table Of Content widget in The Plus Addons for Elementor Pro reads existing H2, H3, and H4 headings and turns them into links, so it does not create the sections for you. That means the article should be built first, then indexed. If the headings are missing, the list has nothing to scan.

**Q: Why is my table of contents empty on the page?**
A: An empty list usually means the widget has nothing inside the area it is scanning. The page needs headings in that section, or Restricted Container Area may be pointing to a class that is not on the page. Clearing that field makes the widget scan the whole page again. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH builds the list from existing headings only.

**Q: How do I stop theme headings from showing in my table of contents?**
A: Theme headings can be picked up because the widget scans the whole page by default, including headings from the page title, header, or footer. The clean fix is to put a CSS class on the article container and enter it in Restricted Container Area so only that section is indexed. Another option is adding tp-toc-ignore to headings you want left out.

**Q: What is the best heading setup for a readable table of contents?**
A: H2 and H3 are usually enough for a list people can scan quickly. The widget mirrors heading nesting, so an H3 after an H2 becomes a child of that H2, and removing heading levels can flatten the outline. On longer pages, trimming Select Tags to H2 and H3 keeps the list shorter and easier to use.

**Q: How do I make a collapsible table of contents in Elementor?**
A: Child Collapsed hides nested entries until their parent is opened, which keeps long outlines from taking over the page. The heading block above the list matters too: clearing Title removes that block and also removes the collapse control from the published page. For a fold-away version with its own behavior guide, see [Toggle](https://theplusaddons.com/docs/create-a-collapsible-table-of-contents-in-elementor/).

**Q: Why do some table of contents links jump to weird-looking anchors?**
A: The widget builds links from the heading text itself. Spaces become hyphens, punctuation like & ( ) . , : ? # % gets dropped, and repeated headings get unique suffixes such as _1 on later duplicates. That matters if you reuse section names or expect copy-link style markers. For related behavior, [Hash Tag](https://theplusaddons.com/docs/copy-a-title-url-from-the-elementor-table-of-contents/) adds a copy-link marker beside each heading.