Table Of Contents Element

Last Update: August 29, 2025

The Avada Table Of Contents Element allows you to add a Table Of Contents (ToC) to your blog posts, pages, or anywhere on your WordPress website. It’s quick to use and is flexible in how you can set it up.

Watch the video below for a visual overview of the Element, view the Avada Table of Contents Element page for live examples, and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Live Example!

View Avada Builder Elements!

How To Use The Table Of Contents Element

The Table Of Contents Element can be added to blog posts, pages, or even custom post types, such as the documentation here. It’s simple to configure and might be the organizational Avada Design Element you were looking for. You can also add it to a Layout Section so it works 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 Avada Table of Contents should use. Then, of course, there is a design tab, where 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 (ToC) 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

Heading		Description
Accepted Headings		Select which HTML headings tags should be indexed.
Limit To Parent		Controls which headings to show, depending on the parent.
Limit Heading Selection By CSS Selectors		Choose 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 Selector		Ignore 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 Words		Ignore 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 Titles		Select whether or not to hide titles that are not visible when page loads.
Highlight Current Heading		Select 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 Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Margin		In pixels or percentage, ex: 10px or 10%.
Padding		In pixels or percentage, ex: 10px or 10%.
Item Typography		Controls the item text typography.
Counter Type		Controls the type of the counter.
Select Icon		Click an icon to select, click again to deselect.
Counter Separator		Select the separator between the counters.
Custom Counter Separator		Choose the custom separator between the counters.
List Indent		Select the list padding(distance) between different hierarchy items. Ex: "10px".
Text On Single Line		Prevent 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 Color		Select the item color. Defaults to link color.
Counter Color		Select the color for the counter. Leave empty to inherit from item color.
Hover Item Background Color		Select the item background color on hover. Defaults to transparent.
Highlight Item Styling
Highlighted Item Color		Select the color for the highlighted item.
Highlighted Item Background Color		Select the background color for the highlighted item.
Highlighted Item Counter Color		Select the color for the highlighted counter. Leave empty to inherit from item color.
Item Padding		In pixels or percentage, ex: 10px or 10%. Defaults to 0 10px 0 10px.
Item Border Radius		In pixels or percentage, ex: 10px or 10%.
Item Margin		In pixels or percentage, ex: 10px or 10%. Defaults to 2px 2px.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.