- Using Spectra Heading Block
- Buttons
- Post Grid
- Content Timeline
- Social Share
- Google Map
- Add Testimonials to Your WordPress Website
- Info Box
- Team
- Icon List
- Price List
- Post Masonry
- Post Carousel
- Post Timeline
- Call To Action
- Advanced Columns
- Blockquote
- Marketing Button
- Gravity Form Styler
- Table Of Contents
- How-to Schema
- FAQ – Schema/ Accordion
- Inline Notice
- WP – Search
- Review Schema
- Lottie
- Taxonomy List
- Tabs Block
- How to Create Contact Forms for Your WordPress Website
- Star Rating
- Masonry Image Gallery
- Wireframe Blocks
- Spectra – Heading Block
- Spectra – Image Block
- Spectra – Buttons block
- ‘Translate Everything’ Feature in WPML
- Spectra – Container Block
- Spectra – Taxonomy Styling Options
- Spectra – Block Presets
- Image Gallery
- Counter Block
- Modal Block
- Registration Form Block
- Slider Block
- Custom CSS On Page Level
- Countdown Pro
- Designing Custom Navigation for Your Slider
- Instagram Feed
- Loop Builder
- Animations
- Using Spectra Login Form Block
- Global Block Style Extension
- How to Create Popups Using Spectra
- How to Add Custom Blocks Under Spectra Blocks
- Move Block Patterns from One Site to Another
- Getting Started with Grid Builder
- Adding a Newsletter Form to Your WordPress Site Footer
- How to Register High-Privileged Users on Your Website
- Section
- Troubleshooting – Icons missing from the blocks
- Spectra Patterns
- How to Set Multiple Column Fields in Contact Form 7 Styler of Spectra?
- Styling Checkbox / Radio / Acceptance control in Contact Form 7 Designer block of Spectra
- Unable to Style Checkbox / Radio Buttons / Acceptance Control using Contact Form 7 Styler of Spectra
- Tab Index – for multiple Gravity Forms
- How to Get Started with Spectra
- How to Exclude A Heading from Table of Contents?
- Spectra – Display Conditions for Blocks
- Installing and Importing Starter Templates
- How to Get Started with Spectra
- Manually Install Spectra via FTP
- Automatic Beta Updates for Spectra
- How to Rollback to Previous Spectra Versions
- How to Load Google Fonts Locally
- Activate the Spectra Pro License Key
- How to Install Spectra Pro Plugin
- Translate Spectra Strings using Loco Translate
- How to add a Transparent / Sticky header?
- How to Change the Site Logo?
- How to Change Global Styles?
- How to Disable Title on Posts, Pages?
- How to add a transparent/ sticky header for a single page/post?
- Change Header and Footer Patterns in Spectra One Theme
- Add Custom/Google Fonts In Spectra One
- How To Reset Global Default Styling?
- Manually Install Spectra One via FTP?
- Disable or Enable Header/Footer for Specific Pages/Posts
Table Of Contents
Spectra allows you to automatically generate a Table of Contents (TOC) in the Gutenberg editor. After you add the block to the page or post, all your headings will be listed here.
A Table of Contents helps the reader with a clear picture or an overview of what to expect in any particular post or page.
This document will show you how to set up and use a Table of Contents block like the following:
Adding TOC to a Page
You can find the Table of Contents block just like any other block:
Updating your TOC
The next step would be to add content having relevant Heading tags from H1 to H6.
The table of contents will be updated automatically as you add headings to your page.
Common TOC Settings
Under General settings, you can choose heading tags to generate a table. We’ll explore some of them:
Editing TOC Title
By default, you will see the Title as a Table of Contents, you can update it to something else as per your requirement.
For example – “How to Setup your Website in 5 Easy Steps” or any other title based on the content on that page or post. Here’s how:
Under General > Content > Title Alignment, you can align the TOC title to the left, middle, or right.
You can also align the overall table of contents, title, list of headings, columns, and gap between the lists.
Displaying Bullets or Lists
Headings in your TOC can be arranged and displayed using either bullets or numbers. Adjust this under General > Content > Marker View. You can even remove these markers entirely.
Managing TOC Width
Enable “Custom Width” under General > Content and adjust the Width slider to resize the entire TOC width.
If you want to manage the gap between the individual TOC items, then adjust the “Gap Between Lists” slider.
Enable Smooth Scroll
When a reader clicks on any TOC item, the page smoothly redirects them to the clicked TOC heading. To achieve this, enable the “Smooth Scroll” option under General > Scroll.
Minimize Your TOC
A page with multiple headings may make your TOC look bigger and capture extra space at the start. To avoid this, enable the “Make Content Collapsible” option under General > Content.
When a reader clicks on this arrow, your TOC will be minimized.
Styling Your Table of Contents
Under the Style module, you can set the background color, and border to your table of contents.
You can also set the typography, and color for the title, and the list when it is normal and hovered.
That’s it!
You can do more with the extensive options available for Spectra’s Table of Contents block. For any questions, feel free to drop a comment below!
We don't respond to the article feedback, we use it to improve our support content.