Table Of Contents Element

Last Update: March 25, 2024

The Table Of Contents Element allows you to a Table Of Contents to your blog posts, pages, or anywhere else you would like one. It’s quick to use and is flexible in how you can set it up. Read below for an overview of the specific features of the Element, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Table Of Contents Element

The Table Of Contents Element can be added to blog posts, pages, or documentation, as has been done here. It’s simple to configure and might just be that organizational element you were looking for. You could also add it to a Layout Section for it to work automatically on any content displayed by the Layout.

The General Tab is the place to set the Title, accepted headings to use, and any limits the Table Of Contents should use. Then, of course, there is a design tab, so you can customize the typography, margins and padding, and colors of the Table of Contents.

The Animations found in the Extras Tab can also be used to animate the entry of the Table of Contents onto the page, with eleven animations to choose from.

Read below for a detailed description of all element options.

Element Options

Note: Please note that the displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, so the options screen may look somewhat different.

General

HeadingDescription
Accepted HeadingsSelect which HTML headings tags should be indexed.
Limit To ParentControls which headings to show, depending on the parent.
Limit Heading Selection By CSS SelectorsChoose to imit the indexing to certain containers. You can limit indexing to all headings within a container using ".container *". To choose multiple containers, use comma separation: ".container1 *, .container2 *". A list of all selectors is found here .
Ignore Headings By CSS SelectorIgnore headings that match the following CSS selector(s). Classes should have "." before. Separate multiple headings by comma. Defaults to ".awb-exclude-from-toc, .awb-exclude-from-toc *", which will ignore any title with "awb-exclude-from-toc" class, or any title inside a parent with same class. A list of all selectors is found here .
Ignore Headings By WordsIgnore headings that contains a specific word or a group of words. Separate multiple settings by "|", For example "sofa|soft chair" will ignore all headings that contains "sofa", but also the headings that contains "soft chair". These matches are case insensitive.
Hide Hidden TitlesSelect whether or not to hide titles that are not visible when page loads.
Highlight Current HeadingSelect whether to highlight the current heading which is viewed. Usually used while the element is positioned sticky in a column or container.
Cache Content (For SEO)If the cache is used, the TOC content will be indexable by search engines, because the post/page will be served with the TOC element content already in place, rather than it being generated after page load. The TOC cache will be auto-updated after page load if the post/page content has been changed.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
MarginIn pixels or percentage, ex: 10px or 10%.
PaddingIn pixels or percentage, ex: 10px or 10%.
Item TypographyControls the item text typography.
Counter TypeControls the type of the counter.
Select IconClick an icon to select, click again to deselect.
Counter SeparatorSelect the separator between the counters.
Custom Counter SeparatorChoose the custom separator between the counters.
List IndentSelect the list padding(distance) between different hierarchy items. Ex: "10px".
Text On Single LinePrevent item text from exceeding one line. If it exceeds, then "..." will show up instead. Very useful if the element is placed in a sidebar-like container.
Item Styling
Item ColorSelect the item color. Defaults to link color.
Counter ColorSelect the color for the counter. Leave empty to inherit from item color.
Hover Item Background ColorSelect the item background color on hover. Defaults to transparent.
Highlight Item Styling
Highlighted Item ColorSelect the color for the highlighted item.
Highlighted Item Background ColorSelect the background color for the highlighted item.
Highlighted Item Counter ColorSelect the color for the highlighted counter. Leave empty to inherit from item color.
Item PaddingIn pixels or percentage, ex: 10px or 10%. Defaults to 0 10px 0 10px.
Item Border RadiusIn pixels or percentage, ex: 10px or 10%.
Item MarginIn pixels or percentage, ex: 10px or 10%. Defaults to 2px 2px.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article