With BetterDocs, 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. 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 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.
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.
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.
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.
Final Outcome #
By following these basic steps you can add and configure BetterDocs Table Of Contents in Elementor.
With the help of 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.
