Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Style The Divi Table Of Contents Maker Exactly Like On The Elegant Themes Blog

Nelson Miller Profile Orange
In this tutorial I will show you how to style the Divi Table Of Contents Maker plugin exactly like the one on the Elegant Themes blog.

▶️ Please watch the video above to get all the exciting details! 👆

table of contents styling on the Elgant Themes blog

1. Install The Divi Table Of Contents Maker Plugin

The first step before we can design the table of contents is to actually have one added to our blog posts in Divi. If you are not yet a member of our Divi Adventure Club, or have not yet purchased the individual plugin, you will need to do so first in order to access the premium plugin. So take a moment and head on over and either purchase or install the Divi Table Of Contents Maker plugin.

Divi Table of Contents Maker Module Plugin by Pee Aye Creative 1.0

2. Add The Divi Table Of Contents Maker Module To Your layout

After installing the plugin, a new module will appear in the list of modules available in the Divi Builder. Simply search for the module name and add it to your layout. We highly recommend using the module in a Divi Theme Builder template for All Posts. This will automatically show the table of contents on all your blog posts. The hyperlinks will be created dynamically for each post automatically.

3. Adjust The TOC Module Settings

In order to replicate this exactly, I will give you every setting to adjust in the module. NOTE: We will be starting with a fresh module with no design settings, or after resetting the module styles. I’ll mention the setting toggle name followed by the setting name and value.

If you want the shortcut, you can download the module here. You will need to import this to your Divi Library, then add to your layout from there. (It is a .zip file since I cannot share a json, so just unzip it first.)

Header Settings

In the Title field I rewrote “Table Of Contents” in order to get the capitalized O to match the Elegant Themes blog exactly.

write custom title for the Divi table of contents

Heading Level Settings

Change the Heading Level 1 Markers and Heading Level 2 Markers both to “Decimal Numbers Of Parent Level (1.1, 1.2, 1.3)” using the dropdown selector. (You may wonder why we are setting this for the level 1, but it is a technical reason related to the :marker and :before methods of adding the number in the code.)

set the heading level markers to decimals in the Divi table of contents

Header

In the Design tab, set the Header Padding to 32px top, 40px left and right, and 10px bottom.

Set the Header Background Color to #f8f9fa

Set the Header Rounded Corners to 4px for the top left and top right.

set the Divi table of contents header padding background color and border radius

Header Title Text

Set the Header Title Text Font to Lato.

Set the Header Title Text Font Weight to Bold.

Set the Header Title Text Color to #20292f.

The default 24px is already perfect for the Header Title Text Size.

adjust the Divi table of contents heading text

Content

NOTE: You may need to set the Content Max Height to any arbitrary high number since the TOC on the Elegant Themes blog does not use a max height or scrollbar.

Set the Content Area Padding to 10px top, 32px bottom, and 40px left and right.

Set the Content Area Background Color to #f8f9fa.

Set the Content Area Rounded Corners to 4px on the bottom left and bottom right.

set the Divi table of contents content area padding background color and border radius

Content Heading Links

Set the Content Heading Link Color to #3776ff.

Since the links in the table of contents on the Elegant Themes blog do not have any hover effect, we need to enable the hover tab to activate the same blue color for default and hover.

Set the Content Heading Link Underline Color to transparent.

Set the Content Heading Link Margin to 8px top and bottom.

set the Divi table of contents heading links hover color and margin

Content Heading Markers

Set the Content Header All Marker Font to Lato.

Set the Content Header All Marker Font Weight to Bold.

Set the Content Header All marker Text Color to #212b33.

Set the Content Header All Marker Text Size to 12px.

style the Divi table of contents markers

4. Add Some CSS For the Markers

We are not quite able to match the marker numbers styling in the current version of the plugin. To continue with our perfect match of the table of contents on the Elegant Themes, we will need to add some CSS to make the gray circle around the number.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*style the Divi Table Of Content Maker module markers*/
.pac_divi_table_of_contents ul>li:before {
	font-weight: 800;
	border: 2px solid #D4DBDE;
	border-radius: 50%;
	padding: 2px;
	width: 2em;
	height: 2em;
	text-align: center;
}

After adding the CSS, your table of contents should look exactly like the one on the Elegant Themes blog. Enjoy!

Categories: Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Trail Committee Membership badge with map design

Join The Trail Committee!

Show support for our ongoing work creating community resources at Pee-Aye Creative and enjoy exclusive member perks in return.

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

Comments By Others

  1. Camille

    Hi ! the code is not working for my website.

    I’m giving you the url of my website under maintenance, so you need to clic on it then click on “blog” then click on one of the article (they all have the module installed.) it’s right under the orange shape.

    Thank you for your help.

    Reply
    • Hemant Gaba

      Hi Camille!

      The URL is missing in the last message. Please share the URL again.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart