Go to athemes.com

Table of Contents

The Table of Contents (ToC) Widget automatically scans your content for headings and generates a structured, clickable navigation list. It helps readers jump to the sections they care about and improves content usability—especially for long-form posts and documentation. You can control which headings are included, how the list is styled (numbers or custom icons), and whether the ToC is collapsible on smaller screens.

Activate the Widget

This widget is part of the aThemes Addons for Elementor plugin. To activate it:

  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.

Widget Options

Title Settings

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

Include & Exclude Settings

  • Include Headings: Select which heading levels to scan and list (H1–H6). Default: H1–H4.
  • Container Selector: (Optional) Provide a CSS selector (class or ID) to limit scanning to a specific content area (e.g., .content or #main-content). Leave empty to scan the current post/page content.
  • Exclude CSS Classes: Enter one or more classes (comma-separated) for headings you want to ignore (e.g., 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 will precede each item.

Collapsible Settings

  • Make Collapsible: Enable a toggle to expand/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 if you want a more compact layout on load.

Style Options

Wrapper

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

List

  • List Item Spacing: Control vertical spacing between items.
  • Item Color & 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 & Color: Style the toggle chip/button.
  • Hover Background & Color: Provide visual feedback on interaction.

Conclusion

The Table of Contents widget gives readers a quick overview of your article and one-click navigation to any section. With flexible include/exclude rules, list styles, and collapsible behavior, you can tailor the ToC to match your content and design while keeping long pages easy to explore.

image_print