[WordPress Plugin] Elementor “Sticky” Table of Contents Widget

Overview

Introduction

Elementor has many cool features and it is a great page builder tool that comes as a plugin (as opposed to a full theme).

It’s packed with 28 useful widgets split into several categories in the panel.

Elementor also displays all the registered WordPress widgets in a separate category in the panel.

But if you need to insert a table of contents into your Elementor posts or pages, Elementor does not have a widget for that.

In particular, Elementor lacks what we call a “sticky” table of contents that follows the reader as he scrolls down the page.

…so we went ahead and built one!

We call it the “Elementor Table of Contents Widget” (clever, huh?)

This plugin will let you insert a customizable TOC element into your Elementor posts or pages.

How does the Elementor Table of Contents Widget plugin work?

Here’s a short video explanation that shows how to install and use this plugin.

And below is a text version if you prefer:

How to install and use the Elementor TOC plugin

1 – Install the plugin by uploading the memberfix-toc-elementor.zip file in WordPress => Plugins => Add New.

2 – Activate the plugin.

3 – When you will edit a page or post with Elementor, under the new “MemberFix Widgets” section, you will see Table of Contents. Just drag it on your page.

A TOC will appear on top-left side of the screen and you can also see the widget added where you dragged it.

4 – Click on the TOC and you will be able to see the widget settings on left panel:

5 – The settings are pretty straightforward.

You have three top tabs ( Content, Style and Advanced ).

You will use only Content and Style, as these have all the needed settings.

Advanced it’s a tab added by Elementor and it’s useless for this widget.

The Content tab has two sections: Table of Contents and Additional Settings.

A. The settings under Table of Contents are:

a. Position – this has four options:

1. top-left
2. top-right
3. bottom-left
4. bottom-right.

The below image shows the TOC in bottom-right position:

b. Index Tags – this has H2 and H3 as the default tags.

These are the headers used for the jump links in the table of contents widget.

If you do not want the H3 tags to appear in the TOC, just delete it from the Index Tags list.

Click on this field to add other headings to TOC.

c. Horizontal Offset – it’s the distance from the left side of the screen to the TOC.

d. Vertical Offset – it’s the distance from the top of the screen to the TOC.

e. Width – it’s the width of the TOC.

The below image shows a table of contents with a certain width, horizontal and vertical offset:

B. The settings under Additional Settings are pretty simple.

a. Index Area (any class/id selector) – this refers to the container for which you want to have a table of contents.

By default this uses .elementor class because it is added automatically by Elementor to the content area.

b. Auto Collapse Sub Index – this refers to auto collapsing sub headings.

If you have, for example, H2 and H3 tags in your TOC, the H3 tags will collapse (watch the video above for a live demo).

The Style tab has only one section: Options.

Under this section you can change the color for TOC background, titles, active titles and separator lines.

You can also change the font, under Typography, as well as style, size etc.

Why did we develop the Elementor Table of Contents Widget ?

Many of our customers use Elementor on their WordPress pages and one of them needed a custom widget for a table of contents.

So we went ahead and developed this plugin for them.

And now you get to use it too! 🙂

Will you provide support for this plugin?

Absolutely!

Please note that we provide support for this plugin exclusively in the comments section of this post.

So if you have any questions or issues please come back to this post and leave a comment describing them (you can also upload screenshots in the comments).

We will provide email support at support@memberfix.freshdesk.com but using comments instead, everybody benefits from the conversation and explanations, including existing and potential customers. 🙂

It also fosters transparency which improves the direction of development by involving our entire community.

Thanks!

How can I download the Elementor Table of Contents Widget ?

We offer this plugin for sale starting at $15 for a single site license. If you’d like to purchase it please complete the checkout below.

You’ll gain access after checkout.

Secure Checkout

Dependencies

To use this product you need to have the following plugins installed on your WordPress installation:

1 – Elementor (Free or Pro)

Product Stats

After you’ve purchased and downloaded the plugin, go to your WordPress installation => Plugins => Add new => Upload the zip file.

Activate the plugin.

When you will edit a page or post with Elementor, under MemberFix Widgets section, you will see Table of Contents. Just drag it on your page.

The rest should be fairly intuitive.

Enjoy!

Change Log

1.0.0 – September 21, 2019

• Initial release

Frequently Asked Questions