The Table of Contents module in Divi 5¶

Overview¶

Setting	Type	Description
Green Plus		reen Plusiconto insert aRow.
Gray Plus		Gray Plusiconinside the Row, which will show the list of all available Divi modules.
module		he Table of Contentsmoduleand click on it to load it. Alternatively, you can use the Search option to find it.
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.
Content		,
Design		,
Advanced		.

Setting	Type	Description
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.

Setting	Type	Description
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.
Layout		Choose how the list is arranged and displayed using theFlexboxorCSS Gridlayout options.
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.

Setting	Type	Description
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.
Save		k on theSavebutton.
Exit		k on theExitbutton.