How do I create a table of contents in my email? (Modern & Classic Editor)

WordFly allows you to add anchor tags for feature sections that link to content areas in your Template. In this way you can add a table of contents to the top of your email that links to corresponding content in the main body of the email. You can even add a back to top link that scrolls the email up to the starting point from the bottom.

 


Topics covered in this article:

Email client support for anchors

Adding anchor links to email templates

Add a "back to top" link in your email template

 

 

Email client support for anchors

 

Anchor tags require time to set up and test across email clients. Brace yourself for various behavior while testing! Not all email clients support anchors. For example, Outlook 2003 will only support this functionality if the anchors are set up exactly as outlined in this post. And others like AOL and Lotus Notes won't support anchors. In general, any webmail client (Ex, Gmail and Yahoo) should work fine as well as the latest version of Outlook.

 

 

 

Adding anchor links to email templates

 

Anchor links are added through the HTML editor of your email Template. You'll have one section that acts like a "features section" where you add the first part of the HTML and then in each content section further in your Template you'll add the secondary tag that links the anchor. 

 

CLASSIC EDITOR: In Classic Editor, you can access the HTML editor in any text area.

 

Classic_edittext.PNG

 

MODERN EDITOR: In Modern Editor you can access your HTML in any text area or from the lower left HTML tab on any screen.

 

Modern Editor text area...

ME_textblock_html.PNG

 

Modern Editor lower left HTML tab...

HTMLtab.PNG

 

 

Here's the HTML code for each section:

 

Part 1 - Features Section

<p>Featured Content:</p>
<p><a href="#anchor1"><span>Featured News</span></a></p>

 

Part 2 - Linked Content

<p><a id="anchor1" name="anchor1"></a>Featured News</p>

 

You'll use "Part 1" for your featured section. Just copy/paste the second line for additional anchor links and change each anchor number (#anchor1, #anchor2, #anchor3 ....), this will allow you to link to the corresponding anchor link in the section below.

 

Use "Part 2" for the content section, in this area "#anchor1" should match "anchor1" as in the example code above.

 

Note: Gmail will not support regular anchor tags (example: <a href="#anchor1">Anchor One Title</a>), it support a slightly modified version
"<a href="#anchor1"><span>Anchor One Title</span></a>" which is also what we have in our example above.

 

 

 

Add a "back to top" link in your email template

 

Here's the HTML code for the top anchor and each feature section:

 

Features Section

<body id="top">

 

Linked "back to top" for each section

<a href="#top">back to top</a>
</body>

 

 

 

Have more questions? Submit a request
Powered by Zendesk