Table Of Content

The Table of Content Widget in Animation Addons for Elementor is a paid feature. To use this widget, ensure the plugin is installed and activated on your site. You can explore both free and pro widgets using the filtering options, but this specific widget is available only in the pro version.

Introduction

The Table of Content Widget in Animation Addons for Elementor helps create a structured, easy-to-navigate table of contents, improving user experience and boosting SEO.

Key Use Cases for the Table of Content Widget:

• Create an organized, easy-to-navigate table of contents for your pages or posts.
• Improve user experience by allowing quick access to sections of interest.
• Enhance SEO by providing a well-structured content outline.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Table of Content Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Table of Content Widget in the list.
• Toggle it on to enable the widget.
• Now, the Table of Content Widget is ready to use!

How to Add Table of Content Widget in Elementor:

• Open the page where you want to add the Table of Content Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Table of Content Widget.”
• Drag the widget to your desired section.
• The Table of Content Widget is now ready for customization.

How to Configure Table Of Content Widget

• In the Elementor panel, search for the “Table of Content Widget.”
• Drag and drop the widget into your desired section.
• From the widget settings, configure the heading tags (H1–H6) you want to include and customize the structure of the table. You can also define the container or page scope for which the headings will be scanned.
• Enable collapsible options, adjust hierarchical display, and add scroll behavior to improve user navigation.
• Use the Style tab to personalize the appearance—customize typography, colors, spacing, borders, and hover effects to ensure the Table of Content aligns with your site’s design and branding.

Configuring Table Of Content Widget : A Step-by-Step Guide

Once the Table of Content Widget is added to your page, you can configure its settings under different tabs: Content, Style, and Advanced.

Content Settings

The Content section of the Table of Content Widget is divided into two main panels: Table of Contents and Additional Settings.

1. Table of Contents

• Title: Set a custom heading for your table of content.
• HTML Tag: Choose the HTML tag (e.g., H2, H3) for the title element to define its semantic hierarchy.
• Anchors by Tags: Select which heading tags (H1–H6) should be included in the TOC.
  Container: Specify the CSS container from which the widget will fetch the headings.
• Marker View: Choose how the active section marker appears—such as dots, lines, or none—to visually indicate scrolling progress.

2. Additional Settings

• Word Wrap: Enable to wrap long text lines for better mobile readability.
• Minimize Box: Allow users to collapse the TOC for a cleaner interface.
• Icon: Customize the icon used for the TOC title or minimize functionality.
• Minimize Icon: Set the icon that appears when the TOC is minimized.
• Minimize On: Choose the behavior or screen size on which the TOC should auto-minimize.
• Hierarchical View Button: Enable to show nested heading levels.
• Collapse Subitems Button: Allow users to expand or collapse heading sublevels as needed.

Style Settings

The Style section of the Table of Content Widget allows you to fine-tune the design and visual presentation of the TOC( using three main customization panels: Box, Header, and List.

1. Box

Customize the outer container of the TOC widget to align with your website’s design aesthetics:

• Background Color: Set the background color for the TOC box.
• Border Color: Define the color of the box’s border.
• Loader Color: Choose a color for the loading indicator, if applicable.
• Border Width: Specify the thickness of the border on all sides.
• Border Radius: Add rounded corners by adjusting the radius.
• Padding: Control the internal spacing within the TOC box.
• Min Height: Set a minimum height for the container.
• Box Shadow: Apply shadow effects to add depth and visual emphasis.

2. Header

Control the appearance of the header/title area of the TOC:

• Background Color: Choose a background color for the TOC header.
• Text Color: Set the color of the title text.
• Typography: Customize font family, size, weight, and line height.
• Icon Color: Define the color of any icons used in the header.
• Separator Width: Adjust the width of the separator line between the header and the content area.

3. List

Style the list of items (anchors) displayed in the TOC:

• List Max Height: Set a maximum height for the list container.
• Typography: Customize the text style for the TOC items.
• Indent: Define the indentation for nested items to reflect hierarchy.
• Text Color: Choose the color for the list text.
• Underline: Optionally add underlines to the list items.
• Marker Color and Size: Style the list markers (bullets or indicators) with custom color and size settings.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

And that’s a wrap! You’ve now learned how to configure the Table of Contents Widget in Elementor to create a structured, easy-to-navigate layout for your content. This not only enhances user experience but also improves content accessibility. If you need any further help or have questions, our support team is always here for you!