How to Add Table of Contents in Divi (Step-by-Step Guide)

Wondering how to add table of contents in Divi when it doesn’t have a built-in option? 

No worries, you won’t need to code! With a plugin like DiviFlash and its dedicated TOC module, you can create one with ease.

In this guide, we will walk you through the process to create a table of contents that works for all your blog posts.

Preview of Our Created Table of Contents

Have a look at the preview of our created table of contents that we created with DiviFlash’s Table of Contents module:

Note: Our demo uses a two-column layout: the left side for main content (headings and text), and the right side for a “Table of Contents” linking to those headings.

Required Setup

• Divi theme is installed and activated.
• DiviFlash is installed and activated.

Step 1: Set Global Settings for Table of Contents

You can easily create TOC for any blog post or page by using the DiviFlash table of contents module. But when you create a global TOC, it automatically applies to all blog posts and pages.

We are going to create table of contents for all blog posts:

• Navigate to WordPress dashboard > Divi > Theme Builder
• Click on Add New Template > Build New Template

• Choose “All Posts” and click on “Create Template”

Step 2: Add the TOC Module

Once your global settings related setup is done, it’s time to add the TOC module. To do that, follow these steps:

• Click on Add Custom Body > Build Custom Body

• Insert a row with two columns from the row inserter.
• To match our demo design, adjust the row settings:
  • Click on the row settings icon and navigate to the Design tab > Sizing . Set the Width to 100% and the Max Width to 2580px

• Next, click on the settings icon for the second column. Click on Background and set the background color to black (#121212).

• Click on the module inserter in the second column (or your preferred column) and search for Table of Contents.

• Select the Table of Contents module from the list.

Step 3: Create and Configure Table of Content

After inserting the module, you will have all the settings options to create a table of content for your site. 

Here is what you have to do to create a similar design to the one we showed earlier:

3.1: Select Heading Tags

In the modules’s Content tab, and make the following changes under the “Content” setting:

• Select Heading Tags: H2 to H6 Headings
• Heading Top Offset: 73px

3.2: Make Marker Related Settings

Here, the marker is the number or icon that appears before each heading in the table of contents. To style the marker, click on “Markers Settings” in the “Content” tab and apply these changes:

• Heading Font: Karla
• Heading Text Color: #ffffff
• Heading Text Size: 16px
• Heading Line Height: 2em

Apply the same settings to all remaining heading tags from H2 to H6.

3.3: Style the Table of Content’s Header

To style the table of contents’ header, navigate to the Design tab > Header. There add 15 px of bottom header margin. After that, click on “Header Title” and make the following changes:

• Title Font: Cormorant Garamond
• Title Font Weight: Bold
• Title Text Color: #ffffff
• Title Text Size: 30px

3.4: Style the Table of Content’s Heading Tags

To style each heading of your table of contents, click on “Heading Style” in the Design tab. There you you have to apply these changes:

• Heading Font: Karla
• Heading Text Color: #ffffff
• Heading Line Height: 2em

Now apply the same customizations to all remaining heading tags from H2 to H6.

3.5: Style Active Item’s Appearance

To change the appearance of your table of contents active item, navigate to Design tab > Active Style. After that, change the active link color.

• Active Link Color: #ad8c66

3.6: Adjust Table of Contents Spacing

Simply click on “Spacing” in the Design tab and then add these spacing values:

• Margin: 10% (top and bottom)
• Padding: 5% (top and bottom) and 10% (left and right)

Step 4: Save and Preview Your Created TOC

If you have followed all the steps and applied the settings, save your changes. Then, open any of your blog posts, and insert the TOC module.

After that, preview the post to ensure the table of contents displays correctly. Also, try to test the links to confirm they smoothly scroll to the corresponding headings.

Closing Thoughts

Now you know how to add table of contents in Divi by using DiviFlash’s TOC module. This module has countless customization options to fully personalize your TOC’s appearance.

The best part is you can position the TOC anywhere you want including above, below, alongside or even within your content. You can also keep the TOC always in view as users scroll by enabling the sticky TOC option.

Explore the diverse Table of Contents demos offered by DiviFlash, available for free download and use.