Special Block

Table of Contents Block

The Table of Contents block generates a clickable outline of the headings within your content. It not only improves readability and engagement, but it has added benefits for your website’s SEO.

With Our Table of Contents, you can:

  • Include or exclude headings
  • Control the responsiveness
  • Use an ordered or bulleted list
  • Smooth scroll or jump to page anchors
  • Customize the icons

Introduction

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Chapter 1: Abstract

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Chapter 2: History

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Chapter 3: Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Chapter 4: Additional Thoughts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Conclusion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Styling Options

Style your block with the following inspector and toolbar options:

  • Hide or Show Heading Controls
  • Scrolling Options
  • Multiple Columns Option
  • Column Gap, Row Gap, Icon Gap, Indentation Options
  • List Type Options
  • Block Background, Size & Spacing, Borders & Shadows Options
  • Dynamic Content
  • Transform & Transition Effects
  • Motion Effects

Best Used With

Customize your call to action to your website’s needs with the following blocks:

Here are some other samples of our block

You may also check out how these samples were designed by checking the info box below the sample.

How to Wireframe a Website Using Gutenberg

Published on March 2, 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum nunc orci, ut sagittis magna rutrum ut. Duis malesuada sed diam id varius. Sed dictum tempus luctus. Aenean vel luctus mauris. Fusce sem risus, tempus sed felis sit amet, rutrum elementum libero. Ut euismod nisl ac sapien lobortis semper. Donec non elit at sapien convallis suscipit. Nullam maximus ipsum magna, sit amet aliquet eros fringilla a. Nulla porta enim lobortis, laoreet dui eu, euismod neque.

2-Column layout with nested Heading, Subtitle and Text on the right and a Table of Contents Block with Background on the left

2-Column table of contents block nested inside a columns/container block with a container

Table of contents block nested inside an accordion block inside a columns/Container block with a container

What is Wireframing?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Why You Should Wireframe Your Web Design Projects

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Wireframes in Gutenberg using Stackable

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan finibus euismod. Vivamus rhoncus commodo scelerisque. Aenean augue nibh.

Types of Wireframes

Hero Wireframes
Features List Wireframes
Call to Action Wireframes
Testimonial Wireframes
Services Wireframes
Metric Wireframes

Discover a whole new experience of web design

No matter who you are, blogger, merchant, designer, developer, we guarantee you’ll want Stackable.