Table of Contents

Table of Contents

Table of Contents is another name for index, mostly viewed in books.

Table of Contents mostly contains first & second level of headings or if it is in-depth then up to three levels. Most of the blogs online which use some kinds of steps or some distinct number of ways to do some things or some number of tips use the table of content on their website. And clicking on it will lead or drag us to that particular content easily.

Pro tip
Having Table of Contents is more important than conclusion at the bottom, please not it down.

Configuration for Table of Contents

Table of Contents will work automatically. You don’t need any kind of configuration for it. If you want some customization options for your table then go ahead and edit it.

How to use the Table Of Contents Block of The Plus Addons For Gutenberg

The Table Of Content Block comes with a simple layout before start you have to set some Tags in this Block. then You can add the Tag with help of drag and drop another heading Block. You can set a description and an icon and also hide content using the toggle icon. If you want to read the content without scrolling, you can easily go to the content with the link.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add a Table of Contents into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Table of Contents after “/” sign, eg.“/Table of Contents”, in the content area. Gutenberg also provides drag & drop after opening the list of Blocks panel.

After placing the Block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Table Title

Show Title

Show title or heading for a table of contents.

Title

An input for title text.

Credit : Gutenberg, WordPress

Description

An input for description.

Credit : Gutenberg, WordPress

Main Icon

If you want an icon before the title or not.

Select Icon

On selection of Icon in the previous dropdown, you’ll be displayed a whole list of icons provided by the FontAwesome icon library. If you have purchased the license for the pro plan and activation has been done then you’ll be able to use pro icons too.

Credit : Gutenberg, WordPress

Toggle Icon

If you want an icon for collapsing table of content at the end of the heading.

Select Icon

You can select an icon from this option here.

Credit : Gutenberg, WordPress

Open Icon

You can see the content when the switcher is at the open icon.

Credit : Gutenberg, WordPress

Close Icon

You can’t see the content when the switcher is at the close icon.

Credit : Gutenberg, WordPress

Default Open

Enable this and the table of content will be in an open/ expanded manner.

Content

Headings

Select from the headings, which you want to include in a table of contents.

Content Selector

Set Class Name, which is used in a table of contents.

Layout

List Type

Select from the list types we provide, both are eye-catching.

Style

Select from the styles we provide for a table of contents.

Child Collapsed

Enable this and the child of main pages would be displayed in collapsed manner.

Heading Content Offset

Heading content offset is a space to be occupied when the table of content is placed in.

Smooth Scroll

The smooth scroll is a scrolling behavior in HTML pages that will smoothly scroll the page to the destined element, not at once with a jerk.

Duration

Time duration to reach the destined element in the page.

Offset

Offset is a space from the screen top to be left when the page scrolls down to the destined element with a smooth scroll.

Position Fixed

Position Fixed

Enable this and clicking on any link will scroll you down to the same height in the content.

Offset

Offset is a height to scroll when position fixed is enabled.

2. Style

The Style tab is used for customizing the appearance of all the Table of Contents Block components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Table Title

Typography

Assign a size, weight, spacing, and much more to fonts.

Color

A color picker to assign a suitable color to the title text.

Description Typography

Assign a size, weight, spacing, and much more to fonts.

Color

A color picker to assign a suitable color to the description text.

Icon Size

Set the size of the icon from here.

Icon Color

A color picker to assign a suitable color to the icon.

Toggle Icon Size

Set size of toggle icon from here.

Icon Color

A color picker to assign a suitable color to the toggle icon.

Margin

Put in some outer space to an element.

Padding

Put in some inner space to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Heading Area

Left Space

Spacing from left edge for heading.

Bottom Space

Spacing from the bottom for heading.

Padding

Put in some inner space to an element.

Margin

Put in some outer space to an element.

Minimum Height

Set a minimum vertical expansion for a table of content here.

Height

An input to set minimum height.

Scroll Bar Width

An input to set the width of a scroll bar.

Scroll Bar Thumb Color

A color picker to assign a suitable color to the scroll bar’s scrolling handle part.

Scroll Bar Track Color

A color picker to assign a suitable color to the scroll bar’s track on which handle scrolls itself.

Layout Styling

Line Width

An input to set lines with rolls down and shows a relation between pages in the table.

Active Line Width

An input to set lines with rolls down and shows the current active heading in table.

Color

A color picker to assign a suitable color to the line.

Level 1 Typography

Typography

Assign a size, weight, spacing, and much more to fonts.

Color

A color picker to assign a suitable color to the level 1 titles.

Sub Level Typography

Typography

Assign a size, weight, spacing, and much more to fonts.

Color

A color picker to assign a suitable color to the sub-level titles.

Box Background

Padding

Put in some inner space to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

3. Advanced

Advanced Tab Options are common across all the Blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.