Add Table Of Contents in Posts Using Gutenberg!

Adding readability and understanding to long blog posts and pages just got easier with the
Table of Contents block of the Ultimate Addons for Gutenberg!

Did you like the table above? It gives you a clear picture or an overview of what this post is all about. Right? I needed something like this when I wrote a post about getting started with Ultimate Addons for Gutenberg. It took a while for me to pick a design for my table, add the sub-titles in it and link them to the content below.

How wonderful would it be if all this was automated. And well, our team is just awesome! Our developers dived in to build something so pretty and so easy that I can now show off my table of contents within no time! No more sorting sub-titles or adding links manually. All that is done automatically!

With the Ultimate Addons for Gutenberg version 1.13.0, we have introduced the Table of Contents block that allows you to add a table that fetches sub-titles with heading tags automatically and aligns them in the table just like you see above. 

Introducing Table of Contents in the Ultimate Addons

The Ultimate Addons for Gutenberg has received a lot of love – especially for the creative blocks we’ve added for Gutenberg. We recently thought of introducing a Table of Contents block that can be simply dragged and dropped on a page or post to fetch all the heading tags, align and link them accordingly.

And we did it! Just like the index you see above, you can create a designer table of content to be displayed on any WordPress page or post within no time – and without any coding at all!

Benefits of the Table of Contents block

  • Display a pretty little index that gives readers and website visitors an overview of the content on the post or page.
  • Fetch sub-titles automatically into the table. You just add heading tags and the block aligns them accordingly.
  • Pass links from the table of contents to the internal sections automatically without any code.
  • Manage the colors of the table, text, etc. through the block settings.
  • Enable smooth scroll and scroll to top for a better user experience.

Creating a Table of Content on your post or page

Add the Table of Contents block in the desired location
  • Just like you do in Gutenberg, click on the (+) icon to insert a block.
  • Search for the Table of Contents block and select.
Add the Title and manage the design
  • You can change the title of the table and manage the design from the settings panel on the right.
  • Manage the scroll settings such as enable smooth scroll or display a scroll to top icon on the page or post.
  • You can take a look at the image below to see the various things you can control through settings.

Isn’t that easy?

Start Building a Table of Contents!

Adding an index needs no rocket science! We’ve made it easier with the Table of Contents block of the Ultimate Addons.

You can simply update the Ultimate Addons for Gutenberg to version 1.13.0 and begin using the Table of Contents on all your long pages and posts.

I am sure you are going to love this block just like you loved the others. We aren’t stopping here and there is a lot more coming up! 

Need help? We are just a form away!

What Are You Waiting For?

Dive in to check all the creative elements that let you enhance the possibilities of Gutenberg with creative blocks and a user friendly interface at hand.