Divi Tips 66: Table of Contents

How to add a table of contents (summary) to your blog posts?

Updated on 19/06/24

2111 words

8 minutes of reading

This article contains affiliate links recognizable by the percentage icon (%) → I am an affiliate link

Add a Contents – also called contents – at the beginning of your blog articles may prove to be a "real plus", both at the level of SEO optimization from your blog that improvement of User experience (UX) of your readers.

Viewing a table of contents
Display a table of contents (summary) at the beginning of your WordPress articles (Gutenberg or Divi).

In the past, we had to have some HTML knowledge to be able to insert a table of contents into your articles.

Here you will see that there are several solutions and we will review them all...

1 – Why insert a summary at the beginning of blog article?

Add a summary at the beginning of your blog articles You may seem insignificant, but it is the opposite!

When I started blogging, I would never insert a table of contents That if it was worth it. In other words, if the article was really very long or a bit complex.

Over time, I realized that this "small plus" was actually indispensable for many reasons:

  • Since my articles are becoming less and less succinct and more and more developed, a summary makes content more digested.
  • This helps Divi tips readers to better navigate and understand the chapters of my articles. Thus, they can quickly go to the part that interests them most.
  • Read the article summary can also sharpen readers' curiosity who would not have bothered to go further than the introduction.
  • This is indispensable for Google who also needs quickly know the content of your article and to better understand it through adequate HTML semantics.
  • The table of contents allows indexing robots to propose enriched results (Richs Snippets) directly in its search results, with links that point to some of your chapters.
Rich Snippet with links to the chapters listed in table of contents
Rich Snippet with suggestions for links pointing directly to chapters listed in table of contents

Adding a summary to your articles is an optimization not to be underestimated and can allow you improve your positions in search results as explained in this article full of tips for quickly reach the first page of Google.

So, with a table of contents at the beginning of your articlesYou make one stone, two strokes!

Besides, when I have a little time, I try to update my old articles for optimize and update content and I always take advantage of it add a summaryIf not already... It's a big project, but it's worth it!

2 - Insert table of contents with free extension

If you're planning to do this, you too, I suggest you discover a simple way to get there.

Free extension named LuckyWP Table of Contents is very easy to configure and gives a more than satisfactory result, let's see how to do it...

2.1 – Installation of LuckyWP Table of Contents

LuckyWP Table of Content
LuckyWP Table of Contents

Simply go to the tab Extensions > Add, available directly from the administration part of your site.

Search Table of content : Install and activate the plugin LuckyWP.

You will find the plugin settings under the tab Settings > Table of Contents.

2.2 – LuckyWP Configuration

Setting this plugin is very easy and its options are available in ENG/FR. Simply navigate through the various tabs to check/uncheck the options available to you.

2.2.1 – General Tab

TOC - General tab
LuckyWP – General Tab

It is from this tab that you can make the main settings such as:

  1. The minimum number of titles that triggers the creation of a table of contents.
  2. The ability to display the summary according to the hierarchy of your titles (H1 – H2 – H3 etc.).
  3. The type of numbering to be used: numbers, Roman numerals, no numbering etc.
  4. The numbering suffix: none, a parenthesis or a point.
  5. The title to be displayed above the table of contents.
  6. Enable the user filter to display or hide the summary. You can even change the labels.
  7. Add an automatic margin before anchoring point and activate fluid scrolling (scroll).

Once your settings are done, remember to save your changes.

2.2.2 - Tab Appearance

TOC - Appearance tab
LuckyWP – Tab Appearance

The Appearance tab allows you to customize the display of your summary.

You can specify the font, the fat and especially the colors to use.

The options are rather complete and allow you to fully customize your table of contents deciding on the color of the background, the color of the links, the links to the fly-over and the links visited.

In short, everything is done to ensure that your summary is based on the graphic charter of your site/blog!

2.2.3. Auto Insert Tab

TOC - Auto Insertion tab
LuckyWP – Auto Insert Tab

The LuckyWP plugin allows automatic insertion of a table of contents within your publications.

It's a good option that could save you crazy time, but fortunately it's only one option.

If you do not check it, the summary will not add automatically and it will leave you more freedom on where you want to insert (manual method).

2.2.4 – Tab Table of Contents settings

TOC - Title Processing tab
LuckyWP – Tab Processing of Titles

From this tab, you will simply decide what types of publication can host a table of contents.

2.2.5 – Miscellaneous tab

TOC - tab Miscellaneous
LuckyWP – Miscellaneous tab

Other tab offers interesting options, especially at SEO level...

  1. Select the titles to exclude from your summary. For example, you could decide that only titles H1 – H2 and H3 are included and that others must be hidden.
  2. Decide the format of your URLs. A link is created automatically internally: an anchor is placed at the end of the URL of your articles. With this option, you can decide how it looks.
  3. With regard to these anchors added to the URL, you can convert your titles to lower case and replace the underscores (the bottom dashes _ ) with dashes.
  4. Two SEO options are also possible: "noindex" (it tells Google not to index these URLs) and add a "nofollow" to your summary links (it tells Google not to follow these URLs). It's up to you to choose what you think is best...
  5. Other settings are also possible such as deciding whether to HTML tag where your table of contents (UL or DIV) will appear.

2.3 – Inserting LuckyWP in your blog articles

Here, with the settings made, you can enjoy this new feature.

If you have decided automatically insert summary, normally, everything is already in place. You'll have nothing more to do than check appearance in your articles.

If, however, you have decided manually insert LuckyWP's table of contents into your articlesHere's what you'll have to do:

Insertion of the table of contents with Gutenberg
LuckyWP offers a Block Gutenberg to display the table of contents

When writing your articles with the new WordPress editor (Gutenberg), you can easily insert a "Table of Contents" blockavailable in "Common Blocks" – where you want it.

This block will retrieve all the titles identified in your articles and list them as a clickable summary.

You have nothing else to do...

Discover more plugins compatible with Divi...and who really want you to be good

3 – Insert a summary manually with Gutenberg

If you are a reluctant type and don't like to add plugins to gogo unnecessarily, then you should follow this second solution: manually add a table of contents using Gutenberg.

Ideally, you would need some HTML knowledge, but nothing very complicated if you follow these steps:

When your writing is complete or when your article plan is complete, you will need to add a IDENTIFIANT for each of your paragraphs.

Gutenberg's TITLE blocks are then ideal for this.

Manually insert a table of contents with Gutenberg
Create the anchors useful for the Gutenberg summary
  1. Select the title block to change: click on the context menu (the 3 small points) and choose "Edit HTML".
  2. You will see the HTML version of your title. It is placed in H2, H3 H4 tags etc. In this tag, you must add a unique identifier you will create for each title. The tag <h2> must look like this <h2 id="mon-identifiant-1">. You will renew this action for each title by taking care of never use the same ID and without using special spaces or characters.
  3. You can then close the HTML edition by selecting "Visually Modify".
create the summary with a Gutenberg list
Create summary using a Gutenberg "list" block

Once all your securities hold an ID, you can insert a List Block for list items in your table of contents.

For each element, simply insert a link such as #mon-identifiant-1, #mon-identifiant-2, #mon-identifiant-3 etc.

This allows create an internal link to the article which will lead the Internet user to the desired place.

It's time to test Divi for free to see what he's capable of... This way!

4 - Insert a table of contents manually with the Divi Builder

For create a table of contents in a page/article using the Divi BuilderIt's pretty much the same with Gutenberg:

First, you will need to insert as many line (row) or section as you need a paragraph. Learn more about how the Divi Builder works.

When your paragraphs are well separated in different rows and sections, you can add an ID ( CSS ID) that will be used to create your table of contents.

Add a CSS ID in a Divi line
Add CSS ID in a line (row) Divi
  1. Edit row settings
  2. Go to the Advanced tab
  3. In the " CSS ID" field, enter your unique identifier. For example: sommaire-1. Do not use special characters or spaces.
  4. Save your changes.

You will need to renew this step for each of your paragraphs.

Then you can create the summary using a Text module in which you will add a smart list (or numbered list if you prefer).

Create a summary with Divi
Create a summary with Divi using a smart list or a numbered list.
  1. Open the settings of Divi Text module
  2. Highlight one of the summary items (chip or numbered list)
  3. Click on the link insertion icon
  4. Add CSS identifier of the paragraph with a "hashtag" as a prefix. For example: #sommaire-1
  5. Validate by clicking OK
  6. Repeat these actions for each paragraph: the identifiers must be unique, remember.
  7. Save your changes.

There, you get a functional table of contents for your publication using the Divi Builder !

5 - Insert a summary manually with the classic WordPress editor

If you still use the old WordPress editor to write your blog articles, you can also add a table of contents easily.

Contents with the Classic Editor
Table of contents with the classic WordPress editor

Just write your articles since VISUAL editor (left screen on the screenshot above) then switch to TEXT version (right screen on the screenshot above), to insert CSS (ID) identifiers into the H2, H3, H4 tags etc.

Finally, you can add these CSS IDs as a link address within your summary, as we have seen previously with Gutenberg or Divi Builder.

Discover many other tips and resources directly on the blog ofElegantthemes.

6 - In conclusion: manual or automated table of contents?

Methods manual are effective and gives you more freedom, however, it takes much more time that with the help of a plugin. Especially if your summary has to display nested lists!

If you want to be tempted by the plugin method, know that it does not exist only LuckyWP, other free extensions or freemiums are also available:

add a table of contents in Divi

Get Divi

Divi training

Ebook Divi PDF

Free tips

Divi Quiz

Live coaching

icon 256x256

Discover wpLingua, my WordPress extension to translate your sites Hey! Also available from the Extensions > Add Backoffice tab.

50 Remarks

  1. David C.
  2. romain
  3. Lycia Diaz
  4. Lycia Diaz
  5. David C.
  6. Lycia Diaz
  7. David C.
  8. Lycia Diaz
  9. David C.
  10. Lycia Diaz
  11. David C.
  12. Lycia Diaz
  13. David C.
  14. Lycia Diaz
  15. David C.
  16. Lycia Diaz
  17. David C.
  18. Lycia Diaz
  19. Julie
  20. Lycia Diaz
  21. David C.
  22. Caroline
  23. Lycia Diaz
  24. BLET
  25. Lycia Diaz
  26. Claude BLET
  27. Claude BLET
  28. Lycia Diaz
  29. esther
  30. Lycia Diaz
  31. esther
  32. Lycia Diaz
  33. esther
  34. Lycia Diaz
  35. Lycia Diaz
  36. esther
  37. Lycia Diaz
  38. esther
  39. Lycia Diaz
  40. Lycia Diaz
  41. David C.
  42. Lycia Diaz
  43. esther
  44. David C.
  45. Lycia Diaz
  46. Stéphanie
  47. Chris WLP
  48. Lycia Diaz
  49. Lycia Diaz
  50. 1produit1avis

Submit a comment

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

This site uses Akismet to reduce undesirables. Learn more about how your feedback data is used.