The Table of Contents module automatically scans the headings on your page and turns them into a navigable, linked list. It is built for long-form content - blog posts, guides, documentation, and knowledge base pages - where readers benefit from jumping straight to the section they need.
![Screenshot: The Table of Contents module placed on a long-form page, showing a linked list of headings]
How to add the Table of Contents module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row, which will show the list of all available Divi modules.Find the Table of Contents module and click on it to load it. Alternatively, you can use the Search option to find it.
Table of Contents module use cases
Long-form posts and guides - Give readers an overview of a lengthy article and let them jump to any section instantly.
Documentation and knowledge base pages - Help users navigate dense reference content without endless scrolling.
Sticky on-page navigation - Combine the module with sticky positioning so the list stays visible as visitors move down the page.
💡Pro tip: The module builds its list from the headings already on your page, so structure your content with proper heading levels (for example, with the Heading module) to get a clean, well-nested table.
Table of Contents settings breakdown
Once you have added the module, its settings open automatically. This is where the module's content and design are configured. The settings are organized into three tabs at the top of the module:
The Content tab
The Content tab is where you choose what the table is built from and set the module's base content options.
Content - Choose what the table of contents is built from, including which of the page's headings it pulls in.
Link - Make the entire module clickable, directing users to another page, section, or external site.
Elements - Add other Divi 5 modules as nested elements to the Table of Contents.
Background - Choose the module's background color, gradient, image, or video.
Loop - Enable the Loop Builder to repeat the module across a set of dynamic content.
Order - Choose the order in which the module appears inside a Flexbox or Grid layout.
Meta - Set the module's label and force its visibility inside the Visual Builder.
The Design tab
All of the module's design and styling options live in this tab, including separate text controls for each heading level the table lists.
Scroll - Control how the table behaves as visitors scroll, such as smooth-scrolling to a heading when its link is clicked and highlighting the section currently in view.
Title Text - Style the table's title text, including font, size, color, and spacing.
List Text - Set the base text styles applied to every entry in the list.
List Level 1 Text - Override the text styles for the first heading level, so it can look distinct from the others.
List Level 2 Text - Override the text styles for the second heading level.
List Level 3 Text - Override the text styles for the third heading level.
List Level 4 Text - Override the text styles for the fourth heading level.
List Level 5 Text - Override the text styles for the fifth heading level.
List Level 6 Text - Override the text styles for the sixth heading level.
Marker Text - Style the marker shown beside each list item, such as a bullet or number.
Empty State Text - Style the message shown when the page has no headings for the table to list.
Sizing - Choose the module's sizing.
Spacing - Choose the module's spacing.
Border - Choose the module's border styles.
Box Shadow - Choose the module's box shadow styles.
Filters - Choose the module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose advanced design effects such as scaling, rotating, skewing, and translating.
Animation - Choose the module's animation styles.
The Advanced tab
The Advanced tab provides tools for experienced designers, including custom CSS, semantic HTML, visibility controls, transitions, positioning, and scroll effects.
Attributes - Assign a CSS ID, reusable CSS classes, or custom HTML attributes to the module.
CSS - Add custom CSS to fine-tune the module beyond the built-in options.
HTML - Choose the semantic HTML tag used for the module.
Conditions - Show or hide the module based on dynamic conditions, so the right content reaches the right audience.
Interactions - Create custom interactions, such as showing or hiding the module on click or hover.
Visibility - Choose the module's visibility across different devices.
Transitions - Choose how long the module's animations take, adding subtle, impactful motion.
Position - Control the module's placement precisely, including sticky positioning for an always-visible table.
Scroll Effects - Control how the module behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
