How to Add a Table of Contents to MyListing Website Content

Building better MyListing websites. One guide at a time.

Table of Contents

Overview

Our How to Add a Table of Contents to MyListing Website Content guide will show you how to do this easily so you can help users to further navigate your website.

We have always been a big fan of how Kinsta implements their Table of Contents for each of their long-form Blog posts, so we wanted to set out to replicate the functionality for ourselves.

In this guide, we show you how to go about adding a Table of Contents to your website, using either Elementor Pro or a WordPress plugin (FREE).

Option 1 - Elementor Pro

For the steps below, we will assume you already have Elementor Pro which included the Table of Contents widget.

Again, we are setting out to mimic Kinsta’s Table of Contents, so you are free to deviate from these instructions as desired for your particular website, and if we don’t mention a specific setting, it is safe to assume we went with the defaults.

  1. Edit any of your existing Blog posts with Elementor.
  2. Drag the ‘Table of Contents’ widget to your post.
  3. Content > HTML Tag > H6. (Note: For SEO, typically you do not go beyond H5 headings in long-form posts, so it is safe to use H6 here.).
  4. Content > Anchors by Tags > H2. (Note: This tells Elementor to only (and automatically) populate the TOC with H2 headings and this is to prevent the TOC from getting out of control in terms of length and complexity.).
  5. Content > Marker View > Bullets.
  6. Content > Icon > None.
  7. Content > Additional Options > All should be toggled OFF.
  8. Style > Box > Background Color > #f9f9fb.
  9. Style > Box > Border Width > 0.
  10. Style > Header > Typography > 24px.
  11. Style > Header > Separator Width > 0.
  12. Style > List > Text Color > Set this to match the color you already use for your links and do this for all three states (Normal, Hover, and Active).
  13. Style > List > Underline > Turn OFF for all three states (Normal, Hover, and Active).
  14. Advanced > Custom CSS > Use the CSS we have provided below, adjusting the ‘#BD1D8B’ value to match your color from the previous step.
				
					//// INSTRUCTIONS: 
//// Copy and paste the code snippet below into Theme Tools > Theme Options > Custom Code > CSS.

--------------------------- CODE SNIPPET IS BELOW THIS LINE --------------------------- 

/* TABLE OF CONTENTS */
.elementor-toc__list-item-text-wrapper {   
    display: inherit;
}
.elementor-toc__header-title {
    margin-bottom: -20px;
}
ul.elementor-toc__list-wrapper {
    margin-left: 1.4em;
}
.elementor-toc__list-item-text:before {
    color: #999;
    content: "→";
    margin-right: 1em;
  	left: 1em;
    position: absolute;
}
.elementor-toc__list-item-text {
  	background-image: linear-gradient(transparent calc(100% - 1px), #BD1D8B 1px);
  	background-position: 100% center;
  	background-repeat: no-repeat no-repeat;
  	background-size: 100% 100%;
    margin-left: -7px;
}
.elementor-toc__list-item-text:hover {
    background-size: 0 100%;
}
				
			

With your widget configured just the way you want it, you will want to save it as a Global Widget so that you can use it over and over again.

  1. Right-click anywhere on the widget and choose ‘Save as a Global’.
  2. Enter the desired name for your widget.
  3. Click ‘Save’.

Now, any time you create Elementor-based content (Pages, Posts, etc.) on your website, you can easily drop in your TOC Global Widget, and it will always have the same, consistent styling.

One of the real beauties of going the Global Widget route is that you can make changes to the widget as you go along and those changes will automatically be replicated on any content where you have placed your Table of Contents widget.

Option 2 - WordPress Plugin (FREE)

If you don’t own Elementor Pro and/or you are looking for a solution with a bit more flexibility and functionality, then this is a great option for you.

In the steps below, we created the same Tables of Contents as we did with Elementor Pro, and please note that if we do not specifically mention a setting, that means we went with the default setting.

  1. Install and activate the Easy Table of Contents plugin (FREE).
  2. WordPress Dashboard > Settings > Table of Contents.

General

  1. Enable Support > We only enabled ‘Posts’.
  2. Auto Insert > We only enabled ‘Posts’.
  3. Toggle View > Disable.
  4. Show as Hierarchy > Disable.
  5. Counter > None.

Appearance

  1. Width > 100%.
  2. Title Font Size > 24 px.
  3. Title Font Weight > Bold.
  4. Font Size > 18 px.
  5. Theme > Custom.

Custom Theme

  1. Custom Theme > Background Color > #f9f9fb
  2. Custom Theme > Border Color > #f9f9fb
  3. Custom Theme > Title Color > #000
  4. Custom Theme > Link Color > Set this to match the color you already use for your links.
  5. Custom Theme > Link Hover Color > Set this to match the color you already use for your links.
  6. Custom Theme > Link Visited Color > Set this to match the color you already use for your links.

Advanced

  1. Headings > Uncheck all except ‘H2’.
  2. Title Font Weight > Bold.
  3. Font Size > 18 px.
  4. Theme > Custom.

Further Design

The following CSS was used to complete the overall design.

				
					//// INSTRUCTIONS: 
//// Copy and paste the code snippet below into Theme Tools > Theme Options > Custom Code > CSS.

--------------------------- CODE SNIPPET IS BELOW THIS LINE --------------------------- 

/* TABLE OF CONTENTS */
#ez-toc-container {
    box-shadow: none;
    padding: 40px;
}
p.ez-toc-title {
    padding-bottom: 15px;
}
ul.ez-toc-list a {
	margin-left: 30px;
    line-height: 28.6px;
  	background-image: linear-gradient(transparent calc(100% - 1px), #BD1D8B 1px);
  	background-position: 100% center;
  	background-repeat: no-repeat no-repeat;
  	background-size: 100% 100%;
  	position: relative;
  	text-decoration: none;
  	transition: all .2s;
}
  
ul.ez-toc-list a:before {
    color: #999;
    content: "→";
    margin-right: 1em;
  	left: -25px;
    position: absolute;
}
ul.ez-toc-list a:hover {
    background-size: 0 100%;
}
#ez-toc-container a:hover {
    text-decoration: none;
}
				
			

WooCommerce Subscriptions Ready

The latest version of the WooCommerce Subscriptions plugin is included (unlicensed) and once you have a Starter Site in hand, you can easily put in your own pricing, package features, graphics, etc.

Should you not wish to use WooCommerce Subscriptions, you can simply turn the Listing Subscription packages into standard MyListing packages in just a few clicks and be on your way.

  • Custom WooCommerce Endpoint Design
  • WooCoommerce Subscriptions Setup
  • Listing Subscription Packages
  • Listing Subscription Switching
  • Stripe Payment Gateway Plugin
  •  and more…

Note: The latest version of the WooCommerce Subscriptions plugin is included, but you need to purchase your own license or sign up for a qualifying MyListing Website Care plan if you wish to receive future plugin updates and support.

Premium Assets

Get licensed, premium plugins, valued at over $600 in the first year alone, making a Starter Site investment a no-brainer.

You will get licensed copies of all the plugins listed below, with the exception of the WooCommerce Subscriptions and WooCommerce Product Vendors, and the licenses are yours to keep, for as long as the plugins remain on your website.

  • Admin 2020 ($39)
  • Crocoblock Suite ($130)
  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)