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

Introducing The Divi Table Of Contents Maker Plugin

I'm excited to announce the Divi Table Of Contents Maker module, a new plugin from Pee-Aye Creative with hundreds of incredible settings!

Please watch the video to get all the exciting details!

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Features

Take a look at our huge list of features below! For a full list of actual settings in the module, please check the settings List in the documentation area. To see the module in action, check the live demo which also includes instructions!

view live demo of the Divi Table of Contents Maker module

Everything about the module is fully customizable, as you would expect if you are familiar with Divi and especially with our other plugins.

custom field text

Custom Title Text

Enter custom text for the table of contents header title.

collapse

Collapsible Table

Keep the table open, or collapse it! Set the default state, choose icons, and even set different options per device.

Sticky

Sticky Settings

Take advantage of the built-in sticky settings like “Stick To Top” when scrolling to keep the TOC within view.

markers

Marker Prefixes

Choose from a variety of numbers, icons, and roman numerals as prefix markers before each heading level.

  • None
  • Icons
  • Whole Numbers (1, 2, 3)
  • Whole Numbers With Leading Zeros (01, 02, 03)
  • 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)
  • Lowercase Roman Numerals (i, v, x, l)
Pee Aye Creative Icons 30

Custom Icon Markers

Use any of the built-in Divi or Font Awesome icons as prefixes before the headings.

headings

Include H1-H6 Headings

Choose which heading levels to include in the table of contents.

Pee Aye Creative Icons 7

Exclude Content By Class

Add a CSS class to any section/row/module to exclude the headings from being added to the table of contents.

indent

Indent Options

Choose to indent each heading level independently using any custom distance.

hierarchy

Hierarchical View

Easily see the hierarchy of the post headings at a glance.

word wrap

Word Wrap Options

When headings are wider than the TOC, choose to wrap to a new line or cut off with an ellipses(…).

Smooth Scroll

Smooth Scrolling

Clicking the links in the TOC automatically scrolls to the location using smooth scrolling.

links

Link Styling

Style the links in each heading level using all the many custom design settings.

Pee Aye Creative Icons 33

Hover Effects

The anchor links in the TOC have a beautiful and elegant hover effect by default.

design settings

Design Settings

Customize and style every aspect of the TOC with all the standard custom design settings.

Pee Aye Creative Icons 14

Conditional Hiding

Hide the entire module if the minimum number of headings in the current post is lower than the selected number.

Pee Aye Creative Icons 12

Theme Builder Support

We highly recommend using the module in a Divi Theme Builder template! The content headings will automatically populate dynamically on each post.

Screenshots

Below are screenshots showing the many settings and features in the module.

header settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative 1
included content heading settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative 1
conditiona logic hide entire module if settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative
content heading level settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative
heading level marker selection setting in the Divi Table of Contents Maker module plugin by Pee Aye Creative
heading level overflow settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative
header settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative
header title text settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative
header icons settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative
content area settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative
content heading text settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative
content heading marker settings in the Divi Table of Contents Maker module plugin by Pee Aye Creative

Live Demo

We used our own module to create the live demo for the module! We even include the documentation as the content, so be sure to check it!

Documentation

As with all of our products, every setting and feature of the plugin is well documented! Go check out the plugin documentation area for everything you need to know about using the module.

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

Last updated Sep 22, 2022 @ 6:57 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

  1. Green Cha Digital

    Great work Nelson! This is really amazing!

    Just a heads up, it looks like on your demo page, the table of contents is taller than the average laptop size. It extends past the bottom of my browser screen, and there is no option to scroll down.

    Keep up the awesome job!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      I’m so glad you like it!

      Thanks for pointing it out, although I guess for the demo it is necessary to be longer than normal. Not sure how I could change that.

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart