Introduction
The Divi Table of Contents Maker plugin is a powerful tool designed to enhance the readability and navigation of your website. Whether you’re creating a blog post, an article, or detailed guides, this plugin simplifies content navigation for your readers by automatically generating a dynamic table of contents. Not only does it improve user experience, but it also enhances SEO by providing search engines with a clear structure of your content.
This guide will walk you through how to add and configure the module, along with tips on how it works dynamically to streamline your workflow.
Adding The Module To Your Layout
Creating an intuitive table of contents for your content is simple and seamless with the Divi Table of Contents Maker module. This module integrates smoothly with the Divi Builder, so if you’re familiar with Divi, you’ll find it easy to use.
For most use cases, the best way to use the table of contents is within a Theme Builder template. Adding it to a dynamic template applied to all posts or other post types ensures it works consistently across your website. However, if needed, you can also add the module directly to individual pages or posts. In either scenario, the module will dynamically populate the table of contents based on the headings in the content.
To add the module:
- Open the Divi Visual Builder on the page, post, or template where you want the table of contents to appear.
- Click the gray + button to insert a new module.
- Use the search bar to quickly locate the Divi Table of Contents Maker module by typing “Table of.”
- Click on the module to add it to your layout.
Once added, the module automatically pulls the relevant headings and displays them in a structured, user-friendly format.

How The Module Works
Understanding how the Divi Table of Contents Maker module functions will help you take full advantage of its capabilities. The plugin is designed to dynamically generate a table of contents by scanning your content for headings—H1 through H6.
Here’s what happens behind the scenes:
- When you add the module to a post or page, the plugin automatically scans the content for headings that meet the criteria you’ve set in the module’s settings.
- Eligible headings are then compiled and displayed as clickable links within the table of contents.
- This means there’s no need for manual updates or link creation—the table of contents updates automatically whenever the content changes.
This dynamic feature not only saves time but also ensures your table of contents is always accurate. Whether your content includes a few headings or many, the plugin adapts to provide a seamless experience for your readers.
Visual Builder Note: The actual live links from your post or page will not be shown in the table of contents within the Divi Visual Builder, and will only appear as the real links when viewing the page on the frontend. Only placeholder text will appear in the TOC in the Visual Builder. This is due to the nature of how the links are auto-populated after exiting the builder.
Set Up & Design The Header
The header is the top section of the table of contents with the title and the toggle icons. This area has its own design settings, as well as various settings related to the header.
Show Or Hide The Header
There may be some times when you don’t need to show the title or show the collapse icon, and simply want to show the content. In that rare case, you can simply toggle the setting to hide the entire table of contents header.

Design The Header Area
The header area design can be adjusted from the Design tab using settings in the Header toggle. This includes all the standard design settings such as margin, padding, background color, rounded corners, borders, and box shadow.

Write & Design The Title Text
Write A Title
By default, we already have a “Table Of Contents” title, but you can change this to “Contents” or “Outline” anything else you want by writing custom text in the Title field.

Design The Title Text
You can style the table of contents Header Title Text in the Design tab using all the standard font and text settings, such as font selector, font weight, font style, alignment, color, text size, letter spacing, line height, and text shadow.

Show Or Hide The Header Icon
The header icon normally serves a functional purpose to collapse and expand the table of contents. However, if you are not using the collapse feature (more about that below), you can still choose to show an icon even though it is purely decorativ.

Set The Icon Position To The Left Or Right Side
You can choose to place the icon on the left or right side. This works whether you are using it functionally to collapse and expand the table of contents or just for decoration.

Here is a nice example of the icon used for decoration on the left:

Allow Viewers To Collapse Table
You may want to give your blog viewers the option to collapse the table of contents. This may be useful depending on the page layout or depending on what device size they are using. The Allow Collapse/Minimize setting gives the viewer the ability to collapse the table of contents by clicking anywhere in the header area. When this setting is enabled, additional related settings appear below. The setting is enabled by default, but if you turn this setting off, then the toggle icon will hide and viewers will not be able to collapse it.

Choose The Default State
When the Allow Collapse/Expand setting is enabled, you can choose whether you want the table of contents to be Expanded, or to be Collapsed, when the page loads. Keep in mind there are also responsive settings, so perhaps you want to choose expanded for Desktop and collapsed for Phone.

Pick Icons For The Toggle
When the Allow Collapse/Expand setting is enabled, you can pick different icons for the expanded state and the collapsed state. We already have some selected by default, but you can use any icons available in Divi.
NOTE: If you are not using the Allow Collapse/Expand, the “Expanded Icon” will be used for decoration only.

Design The Toggle Icons
The size and color of the Header Icons can be set for both the expanded and collapsed states. The default is white and 30px, but you are welcome to change to fit your branding and header design.

Configure The Included Headings
Now it’s time to choose which heading levels you want to show in the table of contents. We also have settings to exclude headings, and a conditional logic setting to hide the module based on the number of headings that are available.
Select Which Heading Levels To Include
The Included Headings checkbox settings give you the option to choose H1-H6 heading levels. In the screenshot, only H1, H2, and H3 headings are selected. This means any H1-H3 headings in the content of the post will be shown as links in the table, and if there are any H4-H6 headings, they will not be included.

Include Or Exclude Headings
When building a Divi layout, you might have sections, rows, or modules that contain headings you don’t want to be included in the Table of Contents (TOC), such as page titles, headings in the sidebar, or footers. At the same time, you might want to ensure certain headings are included, even if they’re in specific areas of your page. To help with this, you can now control which headings appear in the TOC by using CSS classes to either include or exclude specific headings based on your layout needs.
NEW in version 1.3 – include headings by class! This is a very important new feature, and one that should be very useful. Instead of “excluding” headings by class which we did before, now you can “include” headings by class. The reason this is so helpful is because sometimes it required adding the class to many different sections, row, or modules to exclude everything in larger Theme Builder templates. Like before, you can add the class to any section, row, or module in your Divi layout. Just use the CSS classes “pac-dtocm-exclude” to exclude headings in the TOC from that element or “pac-dtocm-include” to include headings in the TOC from that element.
1. Enable the Setting in the Module
The first step is to enable the new setting in the module. Open the Content Settings toggle and locate the “Include or Exclude Headings” dropdown. This dropdown offers three options:
- Include All Headings: All headings on the page will be included in the Table of Contents.
- Exclude Specific Headings by Class: You can exclude headings based on a CSS class, like before.
- Include Specific Headings by Class: You can now include only specific headings that have a CSS class applied.
Choose one of these options based on your needs.

2. Add Classes to Elements
After selecting the desired option in the dropdown, you can add CSS classes to control which headings are included or excluded:
- To include specific headings in the TOC: Add the class pac-dtocm-include to the section, row, or module where you want the headings to appear in the TOC.
- To exclude specific headings from the TOC: Add the class pac-dtocm-exclude to the section, row, or module where you want the headings to be excluded from the TOC.
Here’s how to do this:
- Open the element (section, row, or module) you want to modify.
- Go to the Advanced tab.
- Open the CSS ID & Classes toggle.
- In the CSS class input field, add either pac-dtocm-include or pac-dtocm-exclude, depending on your selection in the dropdown.
Hide Entire Module Based On Conditions
When you use the table of contents module in a Theme Builder template, you may have posts that have a different amount of headings. A table of contents is not always needed for short posts with only a few headings, so we have included settings to conditionally hide the module based on a minimum number of headings in the content. Use the options in the Hide Entire Module If dropdown setting to determine your preference.

Scroll Speed
If you have a lot of headings, it can take up to 10 seconds after clicking a link to scroll to the bottom of the post, due to the smooth scroll. So we solved this by adding a scroll speed, which basically acts as the maximum allowed speed within the smooth scrolling. We set it to 2 seconds by default, which seems pretty nice.

Heading Link Top Offset
When you click on a link in the table of contents, it scrolls to the corresponding heading. The page stops scrolling and stops when that heading is at the top of the page. But if you have a sticky header, the heading text may overlap with that sticky section. To solve this, we have added a setting which allows you to adjust the vertical space between the top of the page and the current heading in the content. This Top Offset setting is located in the Content tab in the Content Settings toggle.

Highlight Active Link
This setting allows you to choose whether to show the current heading from the content area as a highlighted active link in the table of contents. It is a nice feature to show the highlighted link to give readers of what part of the entire document they are currently viewing.

Set Up & Design The Content
The content area is the main section of the table of contents with the heading links. This area has its own design settings, as well as many settings related to the headings.
Height And Scrollbar
Limit Content Height
If you want to set a maximum height for the content area, you can use this setting, which provides additional options for setting the height and styling the scrollbar. However, if you do not want to limit the height, simply disable this setting and the content area will expand to full automatic height.

Set A Content Height
When you have a lot of headings in your content, the table of content can get very long and could become too tall for the page. This setting allows you to set a maximum height for the content area of the module, which automatically enables a scrollbar if the content is taller than the designated value.

Adjust The Scrollbar Design
When a maximum height is set for the content area, a scrollbar automatically appears. We added some default styles for that, but you can customize it however you want!

Design The Content Area
The content area design can be adjusted from the Design tab using settings in the Content toggle. This includes all the standard design settings such as margin, padding, background color, rounded corners, borders, and box shadow.

Set Up The Markers
Choose Markers For Each Heading Level
We are excited to offer many options for adding markers as prefixes to the left side of each heading level. The options include any icon available in the Divi icon picker, whole numbers (1, 2, 3), whole number with leading zeros (01, 02, 03), decimal numbers (1.0, 2.0, 3.0), decimal numbers of parent level (1.1, 1.2, 1/3), uppercase letters (A, B, C), lowercase letters (a, b, c), uppercase roman numerals (I, V, X, L), and lowercase roman numbers (i, v, x, l).

Design The Markers
The Content Heading Markers can be customized for each heading level. You can use the All tab to adjust all the markers the same, or use the individual H1-H6 tabs to style the markers for each heading level. Settings include all the standard font and text settings, such as font selector, font weight, font style, alignment, color, text size, letter spacing, line height, and text shadow.

Design The Heading Text
The Content Heading Text including the default links text, underline color, current link color, and current link underline color can be customized for each heading level. You can use the All tab to adjust all the markers the same, or use the individual H1-H6 tabs to style the markers for each heading level. Each tab includes all the standard font and text settings, such as font selector, font weight, font style, alignment, color, text size, letter spacing, line height, and text shadow.

Indent Each Heading Level
For visual hierarchy, it helps to indent child heading levels under the parent levels. You can use this setting to enable or disable the indent for each heading level, and also adjust the indent amount to your preference.

Select Heading Wrap Preferences
This setting is for headings that are a bit longer. It simply gives you the choice of what to do when a heading text is wider than the table of contents, whether you want to wrap to a new line (default behavior) or cut it off and add an ellipsis.

Sticky Settings
These settings are related to making the table of contents module sticky when scrolling.
Stick To Top
If you want the table of contents to stick to the top of the page as you scroll, either like the demo here on the side or at the top, then you would need to adjust the Scroll Effects in the Advanced tab of the module.
You can also set the vertical distance between the top edge of the screen and the module when it is in the sticky position. In our example, we have set the Sticky Top Offset to 50px, but you can adjust that to any value.

Auto Collapse When Sticky
When you make the table of contents sticky, you may also want it to collapse automatically as you scroll to get it out of the way. This is especially useful on mobile to save space and make it collapse at the top but still be available. So now you can enable this per devices as needed, pretty cool!

Collapse To Icon Only
We love giving you options! Now you hide the title and collapse the table of contents into a single icon. Works beautifully in a sidebar!

Keyword Highlight
These settings are related to making the table of contents module sticky when scrolling.
Enable Keyword Highlight
This is a feature that is not very common, but one that I find very helpful, and a few sites are starting to have it. If you enable the keyword highlight feature, a new search field will appear inside the table of contents. In that field, you can type any word that you want to find in the post, and it will highlight the word in the content of the post.

Design The Search Box And Keywords
There are design settings for every aspect of this keyword highlight feature, including the search field and the highlighted words in the content.
