All Collections
Create Messages
Email Composer
GUIDE: How to add anchor links in emails
GUIDE: How to add anchor links in emails

Anchor links are incredibly useful and give your readers a chance to quickly skip to where they want to read, and read the entire message.

S
Written by Simen Ytre-Arne
Updated over a week ago

What exactly is an email anchor link?

An anchor link is a hyperlink in an email. When that hyperlink is clicked, it takes you to another part of the email instead of opening a separate window. Anchor links are most helpful for long messages, which is why they’re generally used in newsletters.

You might choose to include just a single anchor link, or add a full menu with anchor links in your email header. Such a menu can act as a table of contents so readers can see at a glance what’s included in the message - a great way to simplify your message.

How to create anchor links in Zelo's email composer

Adding an anchor link in your email campaign is easier than you might think. All you need is basic know-how of the HTML link structure of your anchor links. As we’ll see, an anchor link is made up of two parts: the URL link and the actual anchor tag that the link is “jumping” to in your email.

Step 1 - Compose the email

To start, we'll create a simple email structure with a header and 3 sections. The header includes a table of contents that we will link to each section.

Step 2 - Create the first anchor

To create an anchor we will use the email editor's HTML block. Start by dragging a new HTML block to where you want the Table of Contents link to scroll to. In this example, we will place the anchor right above the section headings.

Step 3 - Edit the HTML block

After the HTML block has been inserted into the email, click on it to open the content property window in the right column of the editor.

  1. Delete the current content

  2. Enter enter the following content <a name="section1"></a>

The "name" property must be unique among other anchors in the email. This is the unique key we will link to in the next step. To avoid errors and misspelling, keep the name value as short as possible. Also, spaces are not supported.

Step 4 - Add a link to the anchor

Then, go to the Table of Contents and highlight the first bullet that reads "Section 1". We want to turn this into a link that scrolls the user's page down to our anchor.

Click on the "Link" symbol to bring up the link dialog. In this dialog notice two values that need adjustment:

  • Url: Type a "#" followed by the value we put in our anchor HTML blocks "name" property.

  • Target: Set this dropdown to "none" so our anchor doesn't open in a new tab.

When you are finished editing these values click "ok" and see that the bullet in our Table of Contents has turned into a link.

Step 5 - Test that is works

Unfortunately, anchor links do not work in preview mode as they use features inside the email client. To properly test that the added anchor links work send a test and test it in your email client.

Email clients that support anchor links:

  • Gmail (Web)

  • Gmail (Android app)

  • Inbox by Gmail (Android app)

  • Yahoo! Mail (Web)

  • Outlook.com (Web)

  • Outlook (desktop)

  • Samsung email app (Android)

  • Windows Mail (Windows 10)

Not supported email clients

  • Gmail (iOS app)

  • Apple Mail (iOS)

  • Outlook (Android app)

  • Outlook for MAC

Did this answer your question?