Table of Contents Keyword Highlighting
This page demonstrates how keyword highlighting works in the Table of Contents, allowing important words within headings to be visually emphasized for better clarity and navigation.
Table of Contents Keyword Highlighting – Default Behavior
This example highlights specific keywords within the Table of Contents. It also uses the expanded default state while allowing the Table of Contents to expand and collapse when clicking the header. It excludes the H1 and H2 heading levels, adjusts the scroll speed when clicking TOC links, changes the top offset value, and customizes the highlighted keyword text.
Introduction
This is an example page used to demonstrate how the Divi Table of Contents Maker works. It includes multiple heading levels and enough content to show how the table of contents generates links automatically.
The goal of this content is to simulate a real article or documentation page with a clear structure.
Section One
This section represents a main content area on a typical page. It uses a primary heading that should appear as a top-level item in the table of contents.
Long pages often benefit from a clear structure. When content is broken into sections and subsections, users can quickly understand the page layout and navigate directly to what they need.
Subsection One
This subsection expands on the main topic and should appear nested under “Section One” in the table of contents.
Subsections help organize related ideas and make long-form content easier to scan. The table of contents should reflect this hierarchy automatically.
Subsection One A
This subsection demonstrates a deeper level of content hierarchy. It should appear nested under “Subsection One.”
Using multiple heading levels allows the table of contents to show clear relationships between topics, especially on documentation or feature-heavy pages.
Subsection One B
This subsection provides another related topic at the same level as Subsection One A.
When multiple sibling subsections exist, the table of contents groups them together, making navigation predictable and easy to follow.
Subsection One C
This is an additional subsection used to demonstrate how the table of contents handles multiple items within the same section.
This helps confirm that the table of contents updates dynamically as more headings are added to the page.
Automatic Detection
The Table of Contents module automatically detects headings without requiring manual links.
This subsection shows how multiple headings at the same level are grouped together under a single parent heading.
Section Two
This section includes more sample content so the table of contents has enough items to display and the page feels more realistic.
Long-form content often benefits the most from a table of contents, especially for blogs, documentation, tutorials, and knowledge base articles.
Subsection Two A
More sample text goes here. This helps demonstrate scrolling behavior and how the table of contents stays visible or updates based on the current section.
Subsection Two B
Supporting content can include lists or additional explanations:
- Bullet point one explaining a feature
- Bullet point two describing behavior
- Bullet point three providing context
Section Three
This section is used to show how deeper page structures appear in the table of contents.
Complex pages with many nested sections can quickly become hard to navigate without a clear structure.
Subsection Three A
This subsection demonstrates nested headings inside a main section.
Subsection Three A.1
This is a deeper heading level used to test how lower-level headings appear in the table of contents.
Section Four
This section adds more content to ensure the page is long enough for meaningful scrolling and testing of sticky or collapsible behavior.
Users can scroll up and down and use the table of contents to quickly move between distant sections.
Accordion Content Example
This accordion item contains a heading and supporting text. It demonstrates how structured content inside an accordion can still be organized logically within the page.
Feature
Accordion modules are often used to organize large amounts of content. This example shows how headings inside accordion panels relate to the overall page structure.
Usage
When using accordions, it’s important to understand which headings should appear in the Table of Contents and how collapsible content affects navigation and user experience.
Note: This demo uses real page content so you can test how the table of contents links and navigates between sections.