---
title: "How to Restrict a Content Area in an Elementor Table of Contents?"
url: https://theplusaddons.com/docs/restrict-a-content-area-in-an-elementor-table-of-contents/
date: 2025-01-11
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "Are you looking to restrict a table of contents to one part of the page in Elementor? Out of the box the widget reads every heading on the page, and..."
word_count: 707
---

# How to Restrict a Content Area in an Elementor Table of Contents?

## 

- Restrict content areas in Elementor's Table Of Contents using The Plus Addons for Elementor.
- Add a CSS class, such as 'main-container', to the desired section for restriction.
- Configure the Table Of Content widget by entering the class name '.main-container' in the Restricted Container Area field.

Are you looking to restrict a table of contents to one part of the page in Elementor? Out of the box the widget reads every heading on the page, and that usually means the page title, the site name in the header and anything in a promo block end up in the list.

**Restricted Container Area** fixes that. You give the container that holds your article a CSS class, name that class in the widget, and only headings inside it are listed.

*To check the complete feature overview documentation of The Plus Addons for Elementor Table Of Content widget, [click here](https://theplusaddons.com/docs/add-a-table-of-contents-in-elementor/).*

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

## Steps

- Click the container that holds the article you want indexed.- Open the **Advanced** tab, then the **Layout** section, and type a class name into **CSS Classes** — without a dot. This guide uses `main-container`.

![The article container](https://theplusaddons.com/wp-content/uploads/2026/09/toc-css-class-container.webp)

- Select the **Table Of Content** widget and open **Extra Options**.- Type the same class into **Restricted Container Area**, this time *with* a dot in front: `.main-container`.

![Restricted Container Area field outlined at the bottom of Extra Options, filled in with .main-container](https://theplusaddons.com/wp-content/uploads/2026/09/toc-restricted.webp)

- Update the page and reload the published version.

## Before and After

With the field empty, the widget reads the whole page, so a promo block further down the page contributes entries of its own.

![Published page with the field empty: the table of contents ends with More From The Blog and Newsletter, which belong to a promo block further down the page, not to the article](https://theplusaddons.com/wp-content/uploads/2026/09/toc-result-not-restricted.webp)

With the field set to the article container's class, only the article is listed.

![The same page with Restricted Container Area set to .main-container: More From The Blog and Newsletter are gone and the list ends with the article](https://theplusaddons.com/wp-content/uploads/2026/09/toc-result-default.webp)

## Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Restricted Container Area | The CSS selector of the one area to read headings from. Written the way you would write it in CSS, so a class needs a dot in front. | Empty, which means the whole page |

## How It Behaves

- The value is used exactly as typed, so it can be any CSS selector — a class such as `.main-container`, an ID such as `#article`, or an element.- Only the first match on the page is read. If two containers share the class, the widget reads the first one.- With the field empty the widget reads the whole page, including anything your theme puts in the header, the page title and the footer.- It works alongside `tp-toc-ignore`: you can restrict to the article and still exclude single headings inside it.

## Limitations

- **A class that is not on the page breaks the list.** If the selector matches nothing, the widget throws a JavaScript error and the table of contents renders completely empty — there is no fall-back to the whole page and no message. A missing dot, a typo, or a class you later removed from the container all produce the same blank result.- There is no picker for this field; you have to type the selector yourself.- Only one area can be named. To index two separate containers, give both the same class — but remember only the first match is read, so in practice they need to sit inside one shared parent.

## Troubleshooting

### The table of contents is completely empty

The selector matches nothing on the published page. Check the dot at the front, check the spelling against the container's **CSS Classes** field, and clear the **Restricted Container Area** field to confirm the list comes back.

### Headings from the header or the footer are still listed

The field is empty, or the class you named sits on a container that wraps the whole page. Put the class on the container that holds the article only.

### Some headings inside the area should not be listed

Add the class `tp-toc-ignore` to those headings. See [How to Exclude a Title from Table of Contents in Elementor?](https://theplusaddons.com/docs/exclude-a-title-from-table-of-contents-in-elementor/).

## Related Docs

- [How to Add a Table of Contents in Elementor?](https://theplusaddons.com/docs/add-a-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 Make a Sticky Table of Contents in Elementor?](https://theplusaddons.com/docs/make-a-sticky-table-of-contents-in-elementor/)