--- title: How To Configure BetterDocs Table Of Contents In Elementor url: "https://betterdocs.co/it/docs/table-of-contents-elementor/" updated: "2026-06-16" category: Configurations --- # How To Configure BetterDocs Table Of Contents In Elementor With [**BetterDocs**](https://betterdocs.co/), you can add a Table Of Contents to your Single Doc page in **Elementor**. Usually, the Table Of Contents has added automatically after the first heading of your documentation. But now you can add the Table Of Contents widget anywhere on your single doc page.  ***Note:****The Elementor Theme Builder is a feature that is only available with*[***Elementor Pro***](http://www.wpdeveloper.net/go/elementor)*. So, in order to configure the Table Of Contents for your single doc page in Elementor, you must have the Pro version of Elementor installed.* Follow these instructions below to configure **BetterDocs Table Of Contents** in Elementor Theme Builder. ## **Step 1: Activate BetterDocs Table Of Contents Element** First create your [**single doc in Elementor**](https://betterdocs.co/docs/single-doc-in-elementor/) by navigating to **Templates→ Theme Builder** from your WordPress dashboard. Add your documentation content using the **Doc Content** element. Next, search for **‘Doc Table Of Contents’** in the ‘ELEMENTS’ tab. It will show up on your website as shown below. ![Table Of Contents](https://betterdocs.co/wp-content/uploads/2020/11/screely-1605420472131.png) Drag and drop this element anywhere on your page to activate it. This way, you get more flexibility to add **Table Of Contents** anywhere on your single doc page. ![Table Of Contents](https://betterdocs.co/wp-content/uploads/2020/11/q9UsMC6xkA.gif) ## **Step 2: Configure BetterDocs Table Of Contents In Elementor** From the **‘Content’** tab you can configure the supported heading tags for your **BetterDocs Table Of Contents**. This option lets you decide which heading tags will appear on your Table Of Contents. You can also choose to enable or disable **‘List Hierarchy’** and **‘List Number’** if you want to show or hide your list hierarchy and number. Besides this, you can also toggle to make your **BetterDocs Table Of Contents** collapsible on small devices like mobile phones and tablets for better user experience. ![Table Of Contents](https://betterdocs.co/wp-content/uploads/2020/11/PUfUR5BNWg.gif) ## **Step 3: Style BetterDocs Table Of Contents In Elementor** Under the **‘Style’** tab, you can change the box width, margin, padding and background colors for your **Table Of Contents** by changing the settings under the **‘Box’** option. You can also change the alignment of your Table Of Contents here. From the **‘Title’**option, you can change text color, typography and also add text-shadow.  Similarly, you can further customize your BetterDocs Table Of Contents in Elementor by changing the typography, hover color, color and list item spacing from the **‘Toc List’** option. ![Table Of Contents](https://betterdocs.co/wp-content/uploads/2020/11/ezgif-6-68d4d4aadc4e.gif) ## **Final Outcome** By following these basic steps you can add and configure **BetterDocs Table Of Contents** in Elementor. ![Table Of Contents](https://betterdocs.co/wp-content/uploads/2020/11/tchQFn2Fl4.gif)   With the help of [**BetterDocs**](http://wpdeveloper.net/plugins/betterdocs/), you can get more flexibility to add a Table Of Contents and customize your single doc page without any coding in Elementor Theme Builder. If you face any difficulties, feel free to contact our [**support team**](https://wpdeveloper.net/support/).