Table Of Contents
This block allows access to large contents of the post/page through the heading of the contents. This makes it easier for visitors to directly go to the specific section on the page or the post.
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Table Of Contents or you can search for it if it doesn’t pop up quickly for you.
.png?alt=media&token=722bd164-40ee-410b-8dae-2c54447e7e78)
To configure the Table Of Contents block, switch to the ‘Content’ tab.
- Header Layout - You can choose Fill or Outline design from here.
- Header Alignment - Aligns the content of header to left, center or right.
- Table Type - Choose the way you want to display the content inside the table. Following options are available for this setting:
- Ordered
- Unordered
- Order List Type - This setting is enabled upon selecting the table type as ordered. Following options are available for this setting:
- None
- Number
- Uppercase Letters
- Lowercase Letters
.png?alt=media&token=ad69ebcf-cc2f-4846-9b92-45f97d172580)
- Select Headings - Choose which headings should be allowed in the hierarchy of the table of contents.
- Section HTML Tag - This can be used to select the parent HTML tag for the block, depending on the placement of the block on the website.
.png?alt=media&token=17a057a1-3142-44f0-ae87-95dd58ed1753)
You can choose to enable the smooth scroll option.
Scroll offset- Using this option you can set the scroll offset as per your choice.
.png?alt=media&token=10969164-c72d-4d53-97f2-b6a94ce14a8a)
You can select a background type for the block from here. The options available are:
- Color
- Image
- Video
.png?alt=media&token=231e3b80-a9c6-4c9e-b3d5-31f89221f5b1)
Switch to the ‘Style’ tab to customize every element of the Table Of Contents block.
- Color Settings - Select the colors of text & background of the heading for Normal and Hover states.
.png?alt=media&token=50255e50-128f-43d0-848a-17dc81260c23)
- Typography - Under the Typography tab, options for font family, font size, font-weight, and line-height are available for Heading.
.png?alt=media&token=5fff0b66-2848-4bf9-8c7d-06c6e49c490a)
- Padding - Set the padding of the heading separately for Top, Bottom, Left, and Right. You can set different paddings for Desktop, Tablet, and Mobile devices.
.png?alt=media&token=1391a972-15e7-40ec-abd3-97cd745a0ab7)
- Margin - Set the margin of the heading separately for Top, Bottom, Left, and Right. You can set different margins for Desktop, Tablet, and Mobile devices.
.png?alt=media&token=29f5562f-a610-4e4f-8731-2fd2d1fa5095)
- Border - Border Style: You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.
- Border Width: Set a width for the border from here.
- Border Color: You can give color to the border from here.
- Border Radius: You can give border-radius to the box from here.
.png?alt=media&token=520b4fbe-d102-4bfb-8571-b86ea536506b)
Enabling collapsible content will display a dropdown icon beside the header title, which allows you to hide or show content.
.png?alt=media&token=19d8051b-ca45-4301-8bad-1b28f6ce5994)
- Color Settings - Select the colors of text & background of the body for Normal and Hover states.
- Typography - Under the Typography tab, options for font family, font size, font-weight, and line-height are available for Body.
- Padding - Set the padding of the body separately for Top, Bottom, Left, and Right. You can set different paddings for Desktop, Tablet, and Mobile devices.
- Margin - Set the margin of the body separately for Top, Bottom, Left, and Right. You can set different margins for Desktop, Tablet, and Mobile devices.
- Border - Border Style: You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.
- Border Width: Set a width for the border from here.
- Border Color: You can give color to the border from here.
- Border Radius: You can give border-radius to the box from here.
.png?alt=media&token=3cab4c50-1539-46df-9311-7f8089a09d5c)
Following Settings gets applied to the whole block.
- Spacing - This allows you to set the width of the block.
- Padding - The Padding tab offers options to customize the padding of the block separately for Top, Bottom, Left, and Right. You can set different paddings for Desktop, Tablet, and Mobile devices.
- Margin - The Margin tab offers options to customize the margin of the block separately for Top, Bottom, Left, and Right. You can set different margins for Desktop, Tablet, and Mobile devices.
- Border - Border Style: You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.
- Border Width: Set a width for the border from here.
- Border Color: You can give color to the border from here.
- Border Radius: You can give border-radius to the box from here.
- Z Index - Set z index for the table of contents.
.png?alt=media&token=f3513fe7-e80c-40cd-b72c-05461e59e076)
Last modified 2yr ago