GUIDE: How to add anchor links in emails
Anchor links in emails are incredibly useful for newsletters that are long and content-rich. They give your readers a chance to quickly scroll down, skip to where they want to read, and more likely stick around to read the entire message.
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 like 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 a 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 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.
- Delete the current content
- 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 users 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 don'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 does 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 supports 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