The Table of Contents widget in 10Web Builder automatically generates a list of links based on the headings or sections defined in your content. This eliminates the need to manually create these links, as the widget scans your content for headings (H1, H2, etc.) and arranges them into a clickable list. Despite the automation, you have control over what is included and excluded from the display.
Additional use cases
- Instructional guides or tutorials: Include a table of contents in long instructional guides or tutorials to help users quickly navigate to specific steps or sections.
- Course modules: Display a table of contents widget in course modules to give learners an overview of course content and enable them to navigate to specific lessons.
- Product catalogs: Showcase the table of contents in product catalogs or catalogs for services to allow users to browse through different categories or sections of products or services.
Adding Table of Contents widget
- Add the Table of Contents widget to the canvas.
- When you add the widget, it automatically scans the page’s headings and creates a Table of Contents.
Content tab
- Title: Type the heading text shown above the Table of Contents.
- HTML Tag: Select the HTML tag for the title (H2 to H6, or div).
- Include:
Anchors By Tags: Automatically include specific headings (H1-H6 tags) in the TOC. For example, if you select H2 and H3, only these levels will be included.
Container: Confine the TOC to heading elements under a specific container.
Quick tip:
For Single Post or Page templates, this will be the Container that your Post Content widget resides in. This ensures that all new posts/pages use the TOC for headings in WordPress or 10Web content without displaying unrelated headings from other parts of the template.
- Exclude:
Anchors By Selector: Specify CSS selectors to exclude certain elements from the TOC.
Example: Assign a CSS class name (e.g., “.ignore”) to a widget or container you want to exclude and enter that class name in the Anchors By Selector field. This ensures that any content with that class name is excluded from the TOC.
Note:
Refresh the editor or preview your changes in a new tab to see updates reflected. This ensures that changes to inclusion or exclusion settings take effect properly.
- Marker view: Choose to display numbers or bullets next to list items. If set to Bullets, click the Icon Library to choose an icon or click None to use the no icon.
Additional Options:
- Word Wrap: Slide to Yes to wrap text when column width cannot accommodate long text on one line.
- Minimize Box: Slide to No to display the TOC fully expanded or Yes to allow toggling.
- Icon: This option is intended to select an icon for when the widget is minimized and can be expanded. Choose an icon from the Icon Library or upload an SVG.
- Minimized On: Select the device type for minimizing the widget (Desktop, Mobile, Tablet, or None).
- Hierarchical View: Slide to Yes to display list items with indention based on Tag hierarchy.
- Collapse Subitems: Slide to Yes to collapse nested lists if Hierarchical View is enabled.
Note:
The Collapse option should only be used if the Table of Contents is made sticky.
Style tab
Box
- Background Color: Choose a background color for the TOC box.
- Border Color: Choose a color for the box’s border.
- Border Width: Use a slider to set the border width.
- Border Radius: Use to round the corners of the box, altering its shape for a smoother look.
- Padding: Use a slider to set padding within the border.
- Min Height: Set the minimum height of the widget.
- Box Shadow: Set box shadow options.
Header
- Background Color: Choose a background color for the header.
- Text Color: Choose a color for the header text.
- Typography: Change typography options for the Header.
- Icon Color: Choose the color of the Expand and Minimize icon.
- Separator width: Use a slider to adjust the gap between the icon and header text.
List
- Max Height: Use a slider to adjust the height of the anchors’ box.
- Typography: Change typography options for the anchor text.
- Indent: Use a slider to set the indentation for anchors.
- Text Color:
Color: Choose the anchor text color for Normal, Hover, and Active states.
Underline: Select Yes to underline the anchor text. - Marker:
Color: Choose a color for the marker.
Size: Change the marker size.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.