How to add a TOC to your post and use anchor tags

When composing a post, you have the option to include a TOC (table of contents) with anchor tags. This feature allows swift navigation to specific sections within your newsletter or elsewhere based on the item you click on. 

There are two ways to link sections of a post to a TOC:

• Automatically pull in content sections using the header text; which will be auto-populated as anchor tags.
• Manually choose specific sections to include in the TOC and set them as anchor tags.

We’ll go over both below.

How to create a TOC with automatic anchor tags

1. Open a post that you would like to add a TOC to.
   
   Note: The post content must have been previously formatted using the Headings in the editor (H1 - H6) as this is where the tags are extracted from.
   
   
2. Access the editor by typing / and selecting Table of Contents under Basics. (Or you can also just start typing in /table of contents.)
   
   
   
   
   
   
3. A content block will appear with your TOC options. Here, you will see a list of all of the headings you have used in the copy, organized into a TOC.
   
   
   

---

Customize your TOC with anchor tags

You can choose to hide/show any of the headers in the TOC by hovering over the link and selecting the eye icon. 

 

You can also rename any of the headers in the TOC by selecting the pencil icon, where you can edit the style of the list, and the names of each.

 

---

How to manually add sections to your TOC as anchor tags

You can also customize your TOC by manually selecting the content sections you wish to link as anchor tags through the menu. Once you add it and give it a title, it will appear in the table of contents.

1. Create the anchor (or the destination) by opening the element’s menu on the left. Select Anchor from the dropdown, toggle on the Set anchor option, and then give it a title.
   
   
   
   
   
   
2. When you go to hyperlink something (text, image, etc.) in your post, you’ll be able to either enter a URL or select an anchor element by selecting on the ⚓️ icon.
   
   
   
   
   
   
3. To link to the anchor tag, you're going to add the Anchor ID you've copied or created to the end of the URL you're linking; with a # at the beginning.
   
   For example, this post link [creatorspotlight.com/p/built-for-mars] would become [creatorspotlight.com/p/built-for-mars#boosts]. In the example, ‘#boosts’ is the Anchor ID and would bring the user to the boosts section of the post.
   
   When anyone clicks on that hyperlink, they’ll be redirected to wherever the anchor element lives on the page. Always be sure to use Preview to make sure everything looks good before publishing you post.