New here? Get 40% off Lifetime plans.

See pricing
Skip to content
Get Divi Torque Buy Now

Native Divi 5 ModuleFree

Divi Table of Contents

Auto-build a table of contents from your page headings.

Why use the Divi Table of Contents module?

A long article without a contents list asks the reader to scroll and hope. Building one by hand means writing the links yourself, adding an id to every heading, and then remembering to update both every time the article changes.

This module reads the headings already on the page and builds the list from them. Choose which levels count, pick one of seven styles, and it keeps itself current because it is generated rather than typed.

The list beside this is the live module, reading this page.

On this page

What you get out of it

It reads the page, not a list you wroteThe entries come from the headings that are already there, so the contents cannot fall out of step with the article.Seven styles, one dropdownDefault, Card, Bordered, Accent, Filled, Numbered and Minimal, before you touch a colour.It works before JavaScript doesThe list is rendered on the server, so it is in the HTML on arrival. The script adds the scroll highlighting on top.Smooth scroll with an offsetSet the offset to clear a sticky header, so a heading never lands underneath it.Collapsible, sticky, or shortenedFold the whole list, fold sub-headings, stick it beside the article, or show the first few entries with a Show more.Free, and built for Divi 5It ships in Divi Torque Lite on WordPress.org and in Divi Torque Pro, written for the Divi 5 engine.

Everything the Divi Table of Contents module does

Every option below ships in the free plugin, and in Divi Torque Pro.

Builds the list from the page’s own headingsStart level and end level, h1 to h6Content selector, to scope it to one containerExclude selector, to skip a regionMinimum headings before it rendersOptional title, with its own text and fontSeven style presetsMarkers: numbered, bullet, circle or noneCollapsible list, open or closed on loadCollapsible sub-headings, open or closedFour collapse iconsSmooth scrolling, with a scroll offsetActive heading highlighting on scrollShow more, with a count and its own labelsSticky, with an offset and a max heightHide on mobileLink, hover, active and marker coloursActive background, link padding, item spacingLevel indent for nested headingsServer-rendered, so it works without JavaScriptInjects slugified ids into the headings it finds

See the Divi Table of Contents in action

Every list below is the live module reading this page, which is the point: the entries are identical, so what changes between them is the styling. Click one and the page scrolls to that heading.

Default

Clean, no surface, just the list.

On this page

Card

A boxed surface with a shadow.

On this page

Bordered

A hairline box, no shadow.

On this page

Accent

A rule down the left edge.

On this page

The other three presets

Same list again, three more looks. Presets set the surface, and the colours underneath are still yours to change.

Filled

A tinted panel behind the list.

On this page

Numbered

Numbers in circles down the side, so the marker is switched off.

On this page

Minimal

No surface and no markers to speak of.

On this page

What sits in front of each entry

Four marker styles, set separately from the preset.

Numbered

Decimal, and the default.

On this page

Bullet

A filled disc.

On this page

Circle

A hollow circle.

On this page

None

Nothing at all, which suits a short list.

On this page

Folding it away, and shortening it

A collapsible list with four icon choices, and a Show more that hides everything past a count you set.

Collapsible · chevron

Click the title to fold the whole list away.

Contents

Collapsible · plus

The same control with the plus and minus icon.

Contents

Show more

Only the first three entries show until the reader asks for the rest.

Contents

Point it at one part of the page

Content Selector scopes the module to a single container. This list is reading only the block on the left, at heading levels three and four, so none of this page’s own headings appear in it.

In this section

The block being read

The sample content the list above is scoped to, with its own id on the wrapper.

Getting started

A short block of sample content, sitting in its own container.

Installing the plugin

Sub-headings nest underneath their parent, indented by the level indent setting.

Adding your first module

The list beside this one is reading these headings and nothing else on the page.

Styling

Because the selector is scoped, the page's own headings stay out of it.

Troubleshooting

Five headings in, five entries out.

Building one takes under a minute

Three steps, and none of them involve editing your headings.

1Drop it inAdd Table of Contents to a column beside or above your article. It finds the headings on its own.2Choose the levelsSet the start and end heading levels. H2 to H4 covers most articles; narrow it if your page has a lot of structure.3Pick a styleOne of the seven presets, a marker style, and the colours. Add sticky or collapsible if the article is long.

Questions people ask first

Short answers, all of them checked against what the module actually does.

Is the Table of Contents module free?Yes. It ships in Divi Torque Lite on WordPress.org, and in Divi Torque Pro. Nothing on this page is behind the paid plugin.Do I have to add ids to my headings?No. The module slugifies each heading and injects the id at render time, so your content is left as you wrote it.Can I point it at one section instead of the whole page?Yes. Content Selector takes a CSS selector and scopes the list to that container. There is an Exclude Selector for skipping a region too.Does it work without JavaScript?The list itself does, because it is rendered on the server and is in the HTML on arrival. The scroll highlighting and the collapse controls are the parts that need the script.Can I convert a Divi 4 layout into it?No. This module was built for Divi 5 and has no Divi 4 shortcode, so there is nothing to convert from.Can it number entries like 1.1 and 1.2?No. Markers are numbered, bullet, circle or none, applied per level. There is no multi-level numbering scheme, and the Numbered preset is a look rather than an outline format.

Simple, honest pricing

Every plan unlocks all 98 Divi modules on unlimited websites. Start free and upgrade when you need the rest.

Free

Divi Torque Lite, on unlimited sites.

$0

Free forever · no card needed

Download

Includes

  • 41 Divi modules
  • 1 extension (Sharing Buttons)
  • Unlimited websites
  • Works in the Divi 5 builder
  • Community support

Unlimited Best value

Every module, on every site you build.

$79 $47.40 /year

Save $31.60 · 40% off

Buy Now

Everything in Free, and

  • All 98 modules
  • All 7 extensions
  • Unlimited websites
  • 1 year premium support
  • 1 year product updates

Unlimited Lifetime

Pay once. Keep it forever.

$249 $149.40 once

Save $99.60 · 40% off

Buy Now

Everything in Unlimited, and

  • Pay once, updates forever
  • Remove Divi Torque branding
  • Premium support
  • 30-day money-back guarantee
  • Lifetime honored forever, in writing
  • Secure checkout