You can use the "Table of Contents" element inside your Theme Templates anytime. While editing the template to which you want to add the "Table of Contents" element, click on the plus sign from the right sidebar of the Thrive Theme Builder editor:
Then choose, the "Table of Contents" element from the list of elements that opens, and drag and drop it to the desired place on your template:
Choose the desired template from the pop up that opens:
Once you've selected the template, you can start customizing it using its options that appeared in the left sidebar:
This article details how to customize the "Table of Contents" element using its options in Thrive Architect.
The element works the same way in the Thrive Theme builder editor too, so if you need details regarding these options, please check out the previously mentioned article.
The dynamic aspect of the element
An important aspect to consider, when adding the "Table of Contents" element to a template, is the dynamic aspect of this element.
Since templates represent the design that will be applied to your pages/posts, they can contain many elements that will behave dynamically. The "Table of Contents" element is one of such elements. The list of headings displayed in it will be dynamic.
When you add the "Table of Contents" element to the template after you select its template, you will be able to see the default heading examples, in the Thrive Theme Builder editor, as shown here:
These example headings will not change in the Thrive Theme Builder editor. However, when you preview the template, they will change accordingly, based on which content (page/post from your website, or the demo content) you are previewing for this template.
For that, click on the "Preview" button from the bottom-center part of the editor:
If the content you are previewing for the template has no headings, then the "Table of Contents" element will not be applied to that page or post.
If the content you are previewing for the template has the type of headings you have set for the element to display, then a list with those headings will be displayed in the element.
Nevertheless, this does not mean the element will remain empty or will display those exact headings when you apply the template to a page/post. This is where the dynamic feature of the element comes into play. The list of headings displayed in the "Table of Contents" element will change, depending on the content of the page/post the template will be applied to.
If you have selected the "Table of Contents" element to display let's say the H1, H2, and H3 types of headings, and you will apply the template, with the element, to a page/post that has those types of headings; the element will display a list of them:
At the same time, if you apply the same template, with the "Table of Contents" element, to a page/post that only has H1 and H2 types of headings, then only a list with those two heading types will be displayed in the element:
Or in case the page/post, to which you apply the same template, with the "Table of Contents" element, has headings, but they are different types of headings, than the ones you have set for the "Table of Contents" element, then the element will not appear on that page/post.
There are many such possibilities, but the main idea is that the "Table of Contents" element will behave dynamically every time.
Preview the template with the element
You can always use the "Content Drop-down", as described here, to preview how different pieces of content would look like if you would apply the template you are currently editing to them.
This way you can see how the "Table of Contents" element would behave as well. Just don't forget to use the "Update Table" option too, each time, in order for the list from the "Table of Contents" element to be updated with the fresh content you are previewing.
If you want to find out more about Thrive Theme Builder elements, options, and features, don't forget to check out our knowledge base here.
Hopefully, this article was useful for you. If so, please reward it with a smile below :)