Add Table Of Contents in Posts Using the Block Editor!

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 Spectra. It took a while for me to pick a design for my table, add the sub-titles to 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 Spectra 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 Spectra

Spectra has received a lot of love – especially for the creative blocks we’ve added for the block editor. 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 and to 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 the 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 the block editor, 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 enabling smooth scroll or displaying a scroll to the 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 Spectra.

You can simply update Spectra 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!