Table Of Contents Element

10/01/2023

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.

View Element Demo Page!

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.

Step 1. Ensure Avada Builder, or Avada Live is active.

Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element. Choose Table Of Contents from the Elements List.

Step 3. The General Tab is the place to set the Title, accepted headings to use, and any limits the Table Of Content should use.

Step 4. Then of course, there is a design tab, so you can customize the typography, margins and padding, and colors of the Table of contents.

Step 5. 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.

Step 7. Click Save when you are finished customizing your Table of Contents element.

Read below for a detailed description of all element options.

869,306 Businesses Trust Avada

Get Avada

869,306 Businesses Trust Avada

Get Avada

869,306 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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, and so the options screen may look somewhat different.

General Tab

Accepted Headings – Select which HTML headings tags should be indexed (H1 – H6).
Limit to Parent – Controls what headings to show, depending on the parent. Choose from All, Post Content Element, Layout/Page Content or Custom.
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. Classes should have “.” before. Separate multiple headings by comma. Example: “.first-class, .another-class”. If you want to exclude all headings from a container, you can do “.container *”. 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) – Serve the page with the element content already in place, rather than generating it after page loads. If the new content after the page loads is newer, the old one will be replaced and cached.
Element Visibility – Allows you to control the Element’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
Element Sticky Visibility – (Only visible if parent Container is set to Sticky). Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.
CSS Class – Allows you to add a class for the Element.
CSS ID – Allows you to add an ID for the Element.

View The Options Screen

Design Tab

Margin – Enter values including any valid CSS unit, ex: 4%. Controls the margin around the Element.
Padding – Controls the padding for the button. Leave empty for default values.
Item Typography
Font Family – Controls the font family of the button text. Leave empty for default value.
Font Size – Controls the font size of the button. Leave empty for default value.
Line Height – Controls the line height of the button. Leave empty for default value.
Letter Spacing – Controls the letter spacing of the title. Enter value including any valid CSS unit, ex: 2px. Leave empty for default value.
Text Transform – Choose how the button text is displayed.
Counter Type – Controls the type of the counter.
Select Icon – Click an icon to select, click again to deselect. (Only when Custom Icon is chosen in Counter Type oiption)
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 – Use filters to see specific type of content.
Regular Options
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/Active Options
Hover Item Color – Select the item color on hover. Defaults to primary color.
Hover Item Background Color – Select the item background color on hover. Defaults to transparent.
Hover Counter Color – Select the color for the counter. Leave empty to inherit from item color.
Highlight Item Styling – Use filters to see specific type of content.
Regular Options
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.
Hover/Active Options
Highlighted Hover Item Color – Select the color for the highlighted item when the mouse is over.
Highlighted Hover Item Background Color – Select the background color for the highlighted item when the mouse is over.
Highlighted Hover Item Counter Color – Select the color for the highlighted counter when the mouse is over. Leave empty to inherit from item color.
Item Padding – In pixels or percentage, ex: 10px or 10%. Defaults to 0 5px 0 5px.
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.

View The Options Screen

Extras Tab

Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, Light Speed, or Reval With Color.
Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.
Animation Delay – Select the delay time after the animation starts (0 – 5).
Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.