Adding Anchor Links

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.

Christmas-themed email with a navigation menu showing Cakes, Reviews, Gallery, and Contacts items, with Cakes highlighted
🚧

Important

Some email clients do not support anchor links or render them inconsistently, including:

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

Before you begin, open your message in the drag-and-drop email editor. You can add anchor links 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.
  3. Specify the anchor name (for example, cakes).
Text block settings panel with the Anchor Link toggle enabled and Anchor's Name field set to 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 panel with the Cakes menu item's Link field set to #cakes, highlighted
  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 icon highlighted in the toolbar with the Menu block selected and its code visible in the code editor below
  1. Add a link tag with the href attribute: <a href="#cakes">.
Code editor with the Cakes menu item's anchor tag href attribute set to #cakes highlighted, and the menu item outlined in the email canvas

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 with the anchor tag added before the heading code highlighted, the heading outlined in the canvas, and the Save option highlighted in the Save and exit dropdown
  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 editor toolbar with the Test button highlighted


Did this page help you?