How To Use The Table of Content Widget By Atomic Addons

The Table of Content widget by Atomic Addons reads the headings on your page and lists them as links. Clicking an entry scrolls smoothly to that heading, and the entry of the section being read is highlighted as the visitor scrolls. You can show the list in the page, pin it to a corner of the screen, or tuck it behind a button that opens a dropdown or a side panel. This guide covers adding the widget, choosing a layout and deciding which headings it lists.

Enable the Table of Content Widget

Table of Content is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Table of Content. You can also open the Menu / Navigation category.

4. 4

   Turn the Table of Content widget on.

5. 5

   Click Save Settings.

Add the Table of Content Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Table of Content. The widget sits in the Atomic Addons Pro category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

The list is built in the visitor's browser from the headings on the page, so add your headings first. For blog posts, put the widget in a single post template so every post gets its own list.

Table of Content

Open the widget and go to Content → Table of Content:

1. 1

   Layout: Regular, the default, shows the list where you placed the widget. Fixed pins it to a corner of the screen. Dropdown shows a button fixed on the screen that opens the list in a dropdown. Offcanvas shows a button that opens the list in a panel at the side of the screen.

2. 2

   Offcanvas Position: With Offcanvas: the side the panel opens from, Left (the default) or Right.

3. 3

   Content Position: With Fixed: the corner the list sits in, Top-Left (the default), Top-Right, Bottom-Left or Bottom-Right.

4. 4

   Index Tags: Which heading levels to list, H2, H3 and H4 by default. Lower levels are nested under the heading above them.

5. 5

   Offset: With Fixed: set it to Custom to move the list with Horizontal Offset and Vertical Offset (−300px to 300px), per screen size.

6. 6

   Scroll to Indexed Top Offset: How far above the heading the scroll stops, 10px by default (up to 250px). Raise it if a sticky header covers the headings.

7. 7

   Content Width: Not for Regular: the width of the fixed list, the dropdown or the side panel, in px or vw, per screen size.

Button

With the Dropdown and Offcanvas layouts, Content → Button sets up the button that opens the list:

1. 1

   Button Text: The label, “Table Of Index” by default. It accepts dynamic tags.

2. 2

   Button Icon: An icon on the button, a book by default.

3. 3

   Icon Position: With an icon: Left or Right (the default) of the text.

4. 4

   Icon Spacing: With an icon and text: the space between them, 8px by default.

5. 5

   Button Position: Where the button is fixed on the screen: Top Left (the default), Top Center, Top Right, Center, Center Left, Center Right, Bottom Left, Bottom Center or Bottom Right. It stays there while the visitor scrolls.

6. 6

   Offset: Set it to Custom to nudge the button with Horizontal Offset and Vertical Offset (−300px to 300px) and turn it with Rotate, per screen size.

The side panel has a close button in its corner. Clicking an entry in the dropdown or the panel closes it, then scrolls to the heading.

Dropdown Options

With the Dropdown layout, Content → Dropdown Options controls how the dropdown opens:

1. 1

   Position: Where the dropdown opens next to the button, such as Bottom Left (the default), Bottom Center, Top Right or Left Center.

2. 2

   Mode: Open it on Hover (the default) or on Click.

3. 3

   Flip Dropbar: Lets the dropdown open on the other side when there isn't room on the chosen one.

4. 4

   Dropbar Offset: The gap between button and dropdown, 0px by default.

5. 5

   Animation: How the dropdown appears: Fade (the default), Scale Up, Scale Down, a slide from one side in three distances, or None.

6. 6

   Animation Duration: With an animation: its length, 200 milliseconds by default.

7. 7

   Show Delay / Hide Delay: How long to wait before the dropdown opens (0 by default) and before it closes after the pointer leaves (800 milliseconds by default).

Additional

Content → Additional holds the remaining settings:

1. 1

   Index Area (any class/id selector): The part of the page whose headings are listed, .elementor by default — the whole Elementor content. Enter a class or ID, such as #article, to list only the headings inside that section.

2. 2

   Auto Collapse Sub Index: Hides the nested entries until the visitor reaches their section, so a long list stays short.

3. 3

   Click History: Adds the heading's name to the address bar when an entry is clicked, such as #getting-started, so visitors can copy a link to that section.

4. 4

   Hash Location: With Click History on: opening the page with such an address scrolls to that section.

5. 5

   Extend Page: When the last heading is too close to the bottom of the page to scroll to the top, adds space at the end so it can.

6. 6

   Index Header Text: An optional title above the list, such as “Table of Content”. It accepts dynamic tags.

7. 7

   Index Sticky: With the Regular layout: keeps the list on screen while the visitor scrolls, on screens 1024px and wider.

8. 8

   Sticky Offset: With Index Sticky: the space between the top of the screen and the list, 0 by default.

9. 9

   Sticky on Scroll Up: With Index Sticky: shows the list only while the visitor scrolls up, sliding in from the top.

10. 10

    Scrolling Area: With Index Sticky: the class or ID of the section the list should stay inside, such as #parent-section. The list stops being sticky at the end of that section.

Style the Table of Content

Everything below is on the Style tab. Sections that belong to a layout you aren't using are hidden.

• Box — the background, radius, padding, minimum height and shadow of the list's box.
• Header — with an Index Header Text: the title's color, typography, background, radius, padding, margin and shadow.
• List — the Title Spacing between entries and their typography, and the color and underline of the entries in Normal, Hover and Active states. Active is the entry of the section being read.
• Button — with Dropdown or Offcanvas: color, background, border, radius, padding and typography, with a Hover state.
• Close Button — with Offcanvas: the panel's close button, with a Hover state.