Divi Table Of Contents Maker

Documentation & Support

Still Need Help?

If you have a question not covered here in the docs, or if you face any technical issue, you can reach out to us.

Visit Our Support Page

Divi Table of Contents Maker Plugin by Pee Aye Creative

Ready To Download?

Visit the product page to get all the details and download the plugin.

View Product

five star rating_1

Are You Enjoying Divi Table Of Contents Maker?

If you are enjoying the Divi Table Of Contents Maker plugin, we would really appreciate it if you could share a public review! ❤️

It is such a blessing to hear your feedback, and reviews help other Divi users make informed decisions about the value of our products.

Leave A Review

Setup Guide

Learn how to add the table of contents to your website and configure the functionality and and design settings.
adding the Divi Table of Contents Maker module to the layout

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.

Blue 'Show Header' toggle button set to Yes.

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.

header settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative

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.

header title text settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative

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.

Blue "Yes" button with checkbox icon.

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.

Icon position settings with right alignment selected.

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

Purple "Table of Contents" button icon.

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.

header icons settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative

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.

Web interface for heading inclusion options.

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:

  1. Open the element (section, row, or module) you want to modify.
  2. Go to the Advanced tab.
  3. Open the CSS ID & Classes toggle.
  4. 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.

conditiona logic hide entire module if settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative

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.

scroll speed setting in the Divi Table of Contents Maker module plugin by Pee Aye Creative

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.

heading link scroll top offset setting in the Divi Table of Contents Maker module plugin by Pee Aye Creative

Highlight Active Link

active link highlighting setting in the Divi Table of Contents Maker module plugin by Pee Aye Creative

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.

UI toggle switch enabled "Limit Content 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.

content height setting in the Divi Table of Contents Maker module plugin by Pee Aye Creative

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!

scrollbar design settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative

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.

content area settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative

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.

content heading marker settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative

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.

content heading text settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative

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.

heading level overflow settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative

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 when sticky setting in the Divi Table of Contents Maker module plugin by Pee Aye Creative

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!

collapse to icon only GIF

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.

show keyword highlight setting in the Divi Table of Contents Maker module plugin by Pee Aye Creative

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.

Last updated January 5, 2025
Shopping cart0
There are no products in the cart!
You may be interested in…
$19.00$22.50

Select options This product has multiple variants. The options may be chosen on the product page

$16.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

$16.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

$19.00$24.00

Select options This product has multiple variants. The options may be chosen on the product page

$20.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

Graphic showcasing Divi Assistant features and toolset.
From: $69.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Divi Search Helper Plugin By Pee Aye Creative
From: $29.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Continue shopping
0