Troubleshooting
If you are facing a technical issue with the Divi Table Of Contents Maker, please check the troubleshooting steps listed below. If the outcome of following the steps below points to an issue with our plugin specifically, please send us a support message. When you reach out for support, we will ask about the results of these troubleshooting steps to better understand and resolve the issue.
👉 General Troubleshooting Steps
Step 1: Deactivate All Plugins Except Divi Table Of Contents Maker
When troubleshooting an issue with our plugin, it’s essential to determine whether there is a conflict with another plugin. To do this, please deactivate all other plugins on your site, leaving only the Divi Table Of Contents Maker active. If deactivating the other plugins resolves the issue, it indicates a conflict with one of them.
To identify which plugin is causing the conflict, start by reactivating each plugin one at a time. After reactivating each plugin, refresh the page to check if the issue still happens. Continue this process until you find the plugin that triggers the problem.
Once you’ve identified the conflicting plugin, please let us know the details so we can provide further assistance.
If the issue is still happening with only our plugin active, it suggests the problem may not be related to a conflict and will require further investigation.
Step 2: Deactivate Our Divi Table Of Contents Maker Plugin
Please temporarily deactivate the Divi Table Of Contents Maker to confirm whether our plugin is causing the issue. While this may seem counterintuitive, it is an important step to verify if the problem is related to our plugin.
If the issue persists after deactivating our plugin, it suggests that our plugin is not the cause. Conversely, if the problem only occurs when our plugin is active, it indicates that our plugin might be involved and will require further investigation.
🔧 Common Issues
Below is a list of common issues you may encounter when using this plugin. Please review the solutions or explanations provided for any issues that are relevant to your situation.
The Module Is Not Showing Using Theme Builder
If you are using the Table Of Contents Maker module in a Theme Builder template, but the module is not showing on the frontend when you view a post, this is almost certainly caused by cache. Please go to Divi>Theme Options>Builder and clear the Status CSS File Generation by click the gray “CLEAR” button.
If you still experience the issue, try logging out and back in, as this can trigger the cache clearing.
If the clear cache button in Theme Options does not work, please open the page settings in the Theme Builder template, go to the Advanced tab, open the Performance toggle, and disable the Static CSS File Generation setting.
You may also need to clear other cache from plugins, hosting server, or CDN. You can learn more about clearing cache in our tutorial about How To Clear Cache In Divi.
NOTE for WP Engine Customers: The hosting company WP Engine has a lot of proprietary systems that are intended to help users, but sometimes end up as a hassle. A customer had this issue with the module not showing and after several days of troubleshooting they heard back from their hosting company support and the issue was caused by their own Object Caching. They gave the customer instructions on how to clear it, but you will need to reach out to WP Engine support about that.
NOTE for NitroPack Customers: Another customer could not get their TOC to show, and it was caused by NitroPack, so be sure to check that.
Links Not Scrolling When Clicked
If the table of contents links are not scrolling to the correct headings, the issue might be related to the HTML structure within the heading tags. Our plugin relies on clean heading tags to generate the links and ensure they scroll properly. If there are additional HTML elements, such as spans or other tags, within your heading tags, it can disrupt the ID assignment and prevent the links from functioning as expected.
To fix this, review your headings and remove any extra HTML tags inside the heading tags. Keeping the heading tags clean will help the links scroll correctly to the corresponding sections.
Code Showing In Blog Module Excerpt
If you see code appearing in the Blog module excerpt area while using our Table of Contents module, don’t worry—this is completely normal and expected, and has an explanation and solution. It happens because Divi uses shortcodes to render modules, and when the Blog module is set to display the “content” of a post, it starts with the first module on the page. If our module is the first, its shortcode may appear in the excerpt. This is not an issue with our plugin and would occur with any module. Here’s what’s happening:
Divi uses shortcodes to render modules. When you choose to display the “content” of a post in the Blog module excerpt, Divi pulls the content starting from the first module on the page. If our Table of Contents module happens to be the first module in the post content, its shortcode will appear in the excerpt.
This issue is not specific to our module—it would happen with any module whose shortcode is longer than the character limit of the Blog module’s excerpt. When the closing tag of the shortcode is cut off, the raw code becomes visible in the excerpt.
Solution:
To avoid this, we highly recommend using the “Excerpt” option instead of “Content” in the Blog module. Here’s how to do this:
- Write a custom excerpt for your posts in the WordPress editor.
- In the Divi Blog module settings, navigate to the Content Length dropdown.
- Select “Show Excerpt” instead of “Show Content”.
This ensures the excerpt displays properly and avoids any shortcode-related issues.
Heading Not Showing With Responsive Content Tabs Open
If you are using the responsive content feature in Divi to write different text for Desktop, Tablet, and Phone, unfortunately that will not work with the TOC. The way Divi handles this prevents JavaScript from reading the content, and so any headings in a content textarea with the responsive tabs enabled will not show in the table of contents.
Missing Headings In The Table of Contents
If some of your headings are not showing up in the table of contents, it might be due to extra HTML within the heading tags. Our plugin automatically adds an ID to each heading tag to generate the table of contents links. However, if your heading tags contain additional HTML elements, such as spans or other tags, it can interfere with the ID assignment and cause the links to be omitted.
To resolve this, review the headings in your post or page and ensure they do not contain any extra HTML tags inside the heading tags. Keep the heading tags clean to ensure they appear correctly in the table of contents.
Another way to resolve this issue is by adding your own unique ID. This A customer shared this with us when trying to add a superscript registered trademark in some headlines, and this resolves that use case as well.
Links Not Working When Duplicate Headings Used In Content
If you’re using the same heading multiple times in your content, the table of contents links will all point to the first occurrence because identical IDs are generated. To fix this, you need to manually assign unique IDs to each heading in the module’s HMTL tab in Visual Builder when creating your page layout. This ensures that each link in the Table of Contents functions as expected.
FAQs
If you have questions that are not addressed in our documentation, please review the frequently asked questions listed below. We regularly update this section based on common queries from our customers. If you don’t find the answer you’re looking for here or in our other documentation, feel free to contact us for support, and we’ll be happy to assist you.
How does this plugin work?
This plugin adds a new custom Divi module into the existing Divi Visual Builder. Simply go to your Divi Builder, click the gray plus (+) icon to add a new module, and select “Table Of Contents Maker” to get started. The module automatically adds links to the headings in the post content based on the settings you choose. Please check our full plugin documentation for more information about all the features.
Does the plugin add structured data or schema markup?
Yes. The Divi Table of Contents Maker plugin automatically adds structured data (JSON-LD schema) to your table of contents to help search engines better understand your page structure.
This structured data uses the ItemList schema type from schema.org. Each heading included in your table of contents is represented as a ListItem, which contains both the heading text and its corresponding anchor link. This data is added in the background as a JSON-LD <script> tag in your page’s source code.
This schema helps search engines like Google interpret the hierarchy of your content and can improve how your pages appear in search results. In some cases, Google may use this information to display jump links or section links directly in the search snippet, giving users quick access to specific sections of your content.
Example:
If your page has headings such as Introduction, Features, and FAQ, the structured data will include a list of these sections with their anchor URLs. Search engines can then recognize the structure and may show these as “jump-to” links below your main result.
There’s no need to enable anything manually, as the plugin adds this schema automatically whenever a Divi Table Of Contents Maker module is present on the page.
How to include or exclude headings in the TOC?
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.
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-includeto 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-excludeto 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-includeorpac-dtocm-exclude, depending on your selection in the dropdown.
How can I change the links color and hover color? (Divi 4)
You can easily change both the link color and hover color directly in our module settings! This works just like most Divi Settings, which have a hover option. Here’s how:
- Open the Design tab in the module settings.
- Scroll down to the Content Heading Links toggle.
- To change the regular link color, simply adjust the Content Heading Link Color setting.
- To change the hover color, hover over the Content Heading Link Color setting and click the small icon that looks like a mouse cursor.
- This will open the hover tab, where you can set a different color for the links when hovering over them in the Table of Contents.
You can always toggle between the normal and hover states to set each color accordingly. You can follow similar steps for the Content Heading Link Underline setting.
How do I change the color of the hover links and underlines? (Divi 5)
The nature of a table of contents is to display a list of links that users can click to scroll to sections on the page. Because these are links, they include hover styles such as a color change and an optional underline effect.
Just like any other settings in the Divi Table Of Contents Maker, you can fully customize these styles and colors.
To change the hover styles, it’s important to remember how Divi 5 handles hover settings. Our module works the same way as any other Divi 5 module, since it is built as a native Divi 5 module.
To edit hover styles, open the module settings and look for the state selector dropdown next to the Content, Design, and Advanced tabs. Switch the state to Hover, and then adjust the link color or underline styles. The settings you change while the Hover state is active will control how the links appear when someone hovers over them.
How can I disable the link underline animations effect?
To remove the underline animation effect on the links in the table of contents, go to your Divi>Theme Options to the Custom CSS area and paste the following CSS snippet:
.divi_table_of_contents a:after {
transition-duration: 0s !important;
}
How can I remove the underline on the links?
If you want to remove the underline on the link text in the table of contents, open the module settings to the Design tab to the Content Heading Links toggle and set the Content Heading Link Underline Thickness to 0.
Is this plugin compatible with Divi 5?
Yes, Divi Table Of Contents Maker is fully compatible with Divi 5 while continuing to work with Divi 4.
If you are still using the Divi 4 theme, you can continue using the latest version of the plugin, and everything will work as before. We will continue to support the Divi 4 version with maintenance updates and bug fixes. All new main features will be developed for Divi 5 only moving forward.
If you are upgrading from Divi 4 to Divi 5, the same plugin file will continue to work, and your existing settings will be migrated to the new backend interface in Divi 5. We recommend reviewing your settings after the update to make sure everything is configured as expected.
If you are installing the plugin for the first time on a Divi 5 site, simply install the latest version and get started right away. You will now have access to the new backend settings interface and the full Divi 5 editing experience, now with visual builder support for our settings.
