Adding Anchor Links to an Email

Anchor links allow recipients to navigate to specific sections of a message. They simplify navigation and are especially useful in long messages.

For example, you can add anchor links to a menu so recipients can quickly jump to specific product categories within the message.

Anchor link navigation demo
🚧

Important

Anchor links are not supported or may work inconsistently in some email clients, including:

  • Gmail (iOS)
  • Apple Mail (iOS)
  • Outlook.com (Web)
  • Outlook (Android)
  • Outlook (MacOS)

In the message editor, anchor links can be added in two ways:

  1. At the element level (via element settings);
  2. At the HTML level (by editing the message code).

Adding an Anchor Link via Element Settings

Step 1. Create an anchor

  1. Select the element you want recipients to navigate to.
  2. In the element settings, enable Anchor Link.
Text block settings panel with the Anchor Link toggle enabled and the Anchor's Name field set to cakes
  1. Specify the anchor name (for example, cakes).

Step 2. Add a link to the anchor

  1. Select the element from which the navigation should occur.

  2. In the Link field, enter the anchor name with the hash symbol (for example, #cakes).

Menu block settings with the Link field set to #cakes for the Cakes menu item
  1. Click Save.

Adding an Anchor Link via HTML Code

Step 1. Add the link

  1. Open the code editor.

  2. Select the element from which the navigation should occur.

Code editor open behind the Menu block settings panel, with the code editor icon and the menu row highlighted
  1. Add a link tag with the href attribute: <a href="#cakes">.
Code editor showing the anchor link tag href=#cakes highlighted in the menu HTML

Step 2. Add the anchor

  1. Select the element you want recipients to navigate to.

  2. Add the anchor before the element: <a name="cakes" class="esd-anchor"></a>.

Code editor showing the anchor tag with name=cakes and class=esd-anchor added before the heading element
  1. Click Save.

Testing Anchor Links

To verify that anchor links work correctly, send a test message to your own email address and test the added anchor links in supported email clients.

Email builder Test panel with subject line and hidden preheader filled in, and the Test button highlighted

Did this page help you?