Module 63 of 71
Divi Table Of Contents that builds itself.
Table Of Contents for Divi 5. It reads your headings, links to each one and highlights the section being read.
Guide · Launching a Divi site
Plan the pages
List every page the site needs and what each one has to do before you open the builder.
Map the sitemap
Group pages into a simple sitemap so the menu and internal links follow from it.
Write the content first
Draft real copy for the main pages. Layouts built around real text need fewer fixes later.
Design the theme
Set up the look once in Divi 5 so every page shares it.
Set global colours
Save brand colours as global colours, then use them everywhere instead of hex codes.
Check contrast
Check text against its background. Body text needs a contrast ratio of at least 4.5:1.
Pick the type scale
Choose two fonts at most and a clear size scale for headings and body text.
Build and test
Build the pages from your saved layouts and test them on real devices.
This part starts with an empty heading, which Skip empty headings leaves out.
Test page speed
Run a speed test on the heaviest page and compress any large images.
Launch
Point the domain, turn on caching and submit the sitemap to search engines.
Related reading
This box has the class .dsm-toc-ignore, so the Ignore selector can leave it out.
What is the Divi Table Of Contents module?
Table Of Contents is a Divi 5 module in Divi Supreme Pro that builds a clickable list of the headings on a page. Use it on blog posts, long guides, documentation, course lessons and legal pages.
Drop it in a post template and it finds the main content area by itself, or point it at a CSS selector. Choose the heading levels, skip regions like related posts, and pick a bulleted or numbered list. It scrolls smoothly to each heading, respects a fixed header offset, highlights the section in view and can fold behind a toggle on mobile.
default heading levels
list styles
anchor IDs to add by hand
mobile toggle
Start from a Table Of Contents recipe.
The recipes and the playground run on the front end. Use Preview, or open the page, to try them.
Try every Table Of Contents setting.
The recipes and the playground run on the front end. Use Preview, or open the page, to try them.
Everything Table Of Contents can do.
Finds the content
Detects the main post area by itself, or use any Content wrapper CSS selector.
Your heading levels
Heading selectors such as h2, h3, h4 decide what goes into the list.
Ignore regions
Leave out headings in sidebars or related posts with the Ignore selector.
Active section
The link for the section in view is highlighted as visitors scroll.
Smooth scroll and offset
Glide to each heading and stop below a fixed header with Scroll offset.
Numbered or bulleted
Turn on Numbered list for docs and step-by-step guides.
Collapse inactive
Only the branch of the section in view stays open.
Mobile toggle
On small screens the list folds behind a button with your own label and icon.
Table Of Contents documentation
Step-by-step guide to content selectors, heading levels, scroll offset and the mobile toggle.
Questions about Table Of Contents.
Next module, A to Z
Testimonials Module
Related modules
Read More Module
Fold long text behind a button.
Post Reading Time Module
Estimated minutes to read.
Table Module
Data and pricing tables.
Help readers find their place.
Table Of Contents comes with 70+ Divi 5 modules and 16 extensions in Divi Supreme Pro.