Go to athemes.com

Using the Table of Contents Widget

Want to help readers jump straight to the sections they care about on long pages? The Table of Contents widget in aThemes Addons scans your content for headings and generates a structured, clickable navigation list that you can style, filter, and make collapsible on smaller screens.

In this guide, we’ll walk you through how to activate, configure, and style the Table of Contents widget in aThemes Addons.

Table of Contents
  1. Activating the Table of Contents Widget
  2. Configuring Widget Options
  3. Styling the Table of Contents Widget

Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor.

Activating the Table of Contents Widget

  1. Go to the aThemes Addons dashboard in your WordPress admin area.
  2. Search for the Table of Contents widget.
  3. Toggle the switch to activate it. The widget will now be available in the Elementor editor.
Activating the Table of Contents widget in the aThemes Addons dashboard

Configuring Widget Options

Title Settings

  • Title – Set the label displayed at the top of the ToC (for example, “Table of Contents”).
  • Title HTML Tag – Choose the semantic tag for the title (H1 to H6, div, span, or p).

Include and Exclude Settings

  • Include Headings – Select which heading levels to scan and list (H1 to H6). Default: H1 to H4.
  • Container Selector – Provide a CSS selector (class or ID) to limit scanning to a specific content area (for example, .content or #main-content). Leave empty to scan the current post or page content.
  • Exclude CSS Classes – Enter one or more classes (comma-separated) for headings you want to ignore (for example, no-toc, exclude-heading).

List Style

  • List Style – Choose between Numbers or Custom Icon markers for each item.
  • List Icon – When using Custom Icon, select the icon that precedes each item.

Collapsible Settings

  • Make Collapsible – Enable a toggle to expand or collapse the ToC.
  • Collapse / Expand Icons – Pick the icons shown for the two toggle states.
  • Collapse Below – Choose the breakpoint where the ToC becomes collapsible (Tablet or Desktop).
  • Initially Collapsed – Start the ToC collapsed for a more compact layout on load.

Styling the Table of Contents Widget

Wrapper

  • Background Color – Set the ToC container background.
  • Padding and Margin – Control spacing around and inside the ToC.
  • Border, Radius, and Shadow – Add borders, rounded corners, and drop shadows.
  • Max Width – Limit the ToC width for better readability.
  • Alignment – Align the ToC (left, center, or right).
  • Title Color and Typography – Style the title’s font and color.
  • Title Spacing – Adjust the gap below the title.
  • Header Background, Padding, and Border – Customize the header strip that contains the title and toggle button.

List

  • List Item Spacing – Control vertical spacing between items.
  • Item Color and Typography – Style the link text for ToC items.
  • Hover Color – Set a distinct hover state for better UX.
  • Number/Icon Styles – Adjust marker color, size, and spacing.
  • Nested List Styles – Set indentation and colors for nested sub-level items.

Collapsible Toggle Button

  • Toggle Button Background and Color – Style the toggle chip or button.
  • Hover Background and Color – Provide visual feedback on interaction.

That’s it! You’ve successfully added a structured, clickable Table of Contents to your WordPress site using the aThemes Addons widget.

Next, would you like to highlight team members in an Elementor layout? Check out our guide on Using the Team Member Widget to learn more.

image_print