In this documentation, we will discuss the customization of the Table of Content block, brought to you by Zoloblocks.

Activate Table of Content Block

On WordPress Dashboard Navigate to ZoloBlocks from the sidebar menu.

1. Select the Dashboard option under ZoloBlocks.
2. Go to the Blocks tab.
3. Use the search bar to search for “Table of Content ”
4. Click Enable to activate the Table of Content block.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Table of Content block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here the Selected block, the parent block, and its child block will appear.
3. After on the right side, Click on the Block. Then the Table of Content box details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

Set controls for the general section,

1. Show Heading: Enable the switcher to show the heading.
2. Show Collapsible: Enable the switcher to appear as collapsible.
3. Collapsed Initially: Enable it to collapsed initially.
4. Heading Text: Set the heading text.

5. List Style: Set the style for the list contents ( e.g.: Ordered List, Unordered List ).
6. Support Heading Tag: Select the support heading for table of contents ( e.g.: H1, H2, H3 etc.).

Sticky Content

Go to Basic > Sticky Content

Make the table of content sticky by following the controls,

1. Sticky Content: Enable the switcher for the sticky content.
2. Section Position: Set the position for sticky ( e.g.: Left, Right ).

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Container Section

Go to Style > Container

Make the container section interactive by following,

1. Min Height: Set the min height.
2. Max Width: Set the max width.
3. Background: Set the background for the table of content.

4. Padding: Set the padding for the content area.
5. Border: Set the border of it.
6. Box Shadow: Make the box shadow.
7. Border Radius: Make the border radius.

CONTENT

8. Padding: Make the padding for the content.

Header Section

Go to Basic > Header

Make the header section by following,

1. Color: Set the color for the header content.
2. Typography: Set the typography of it.
3. Background: Set the background color.
4. Padding: Set the padding of it.

5. Margin: Set the margin for the header section.
6. Border: Set the border radius.
7. Box Shadow: Make the box shadow of it.
8. Border Radius: Make the border radius.

Collapsed Icon Section

Normal State

Make the collapsed item interactive by following,

1. Color: Set the color for the collapsed icon.
2. Size: Set the size of it.
3. Background: Set the background of it.
4. Padding: Set the padding.

5. Margin: Set the margin for the icon.
6. Border: Make the border for the icon.
7. Box Shadow: Make the box shadow.
8. Border Radius: Make the border radius.

Hover State

9. Color: Set the color for the icon.
10. Background: Set the background of it.
11. Border Color: Set the border color.
12. Box Shadow: Make the box shadow.

List Section

Go to Style > List

Normal State

1. Color: Set the color for the list.
2. Typography: Set the typography of it.

MARKER

3. Color: Set the color for the marker.
4. Size: Set the size of it.

Hover State

5. Color: Set the color for the hover section.

Active State

6. Color: Set the active color for the list items.

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial Coming Soon! Check the demo page.

Thanks for being with us!