Add a table of contents and anchor links in your email

In the drag and drop email editor, adding a table of contents allows you to redirect readers to specific sections within your email. A table of contents makes it easy for recipients to navigate long newsletters or detailed updates by clicking on section titles instead of scrolling. For example, if your email includes multiple topics, such as new products, upcoming events, and special offers, a table of contents lets readers jump directly to the part they care about most.

dde_table-of-contents-email_en-us.gif

Before you start

Ensure your email design, created with the drag and drop email editor, is finalized and ready to send. All the sections you want to link to should already exist in your layout.

Step 1: Create a table of contents 

To redirect your recipients to specific sections within your email, you first need to create a table of contents. It will serve as the navigation area where each link points to a different part of your email:

  1. From Content > Blocks in the left panel of the editor, drag and drop the Navigation content block. 
  2. Click the Navigation content block to access its settings and choose how many links you want to anchor.
  3. For each Link, replace it with a short title that reflects the section or content to which you want to redirect your recipients. We highly recommend using a maximum of two words for your title to avoid cluttering your table of contents and ensure it remains clear and easy to read.
DEE_navigation-content-block_en-us.gif

Step 2: Create anchors for your email sections

Now that you have created your table of contents, it is time to create anchors to each email section to which you will redirect recipients. In our use case, we want to redirect to each heading 2, as they each represent a section of our email. 

  1. Select your heading text and click 🔗 Add link in the top toolbar. 
    dde_add-link-text_en-us.png
  2. In the type of link drop-down, select Anchor for relative links
  3. In the Anchor name field, give a new to your anchor. Enter a short name, with no spaces or special characters. For this use case, we will use YogaPose
  4. Click Insert
    dde_create-anchor-text_en-us.png
  5. Repeat those steps for each heading to which you want to add an anchor to.

Step 3: Link your table of contents to each section with relative links

Now that you have created your anchors, it is time to link them in your table of contents so that your recipients are redirected to the correct section of your email. You can add relative links to texts or images:

📝 Text 🏞️ Image
  1. Click and select the text to which you want to add a relative link.
  2. Click 🔗 Add link in the top toolbar. 
    dde_add-link_en-us.png
  3. In the type of link drop-down, select Relative link (to anchor)
  4. In the Target anchor drop-down, select the name of the anchor corresponding to this element of your table of contents. For this use case, it is YogaPose
  5. Click Insert
    dde_add-relative-link-text_en-us.png
  6. Repeat those steps for each anchor you want to create.

(Optional) Step 4: Test your email 

To ensure your table of contents is redirecting to the correct sections and your design is as expected, send yourself a test email. 

➡️ To learn more, check our dedicated article Preview and test your email.

⏭️ What's next?

🤔 Have a question?

If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.

If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo Agency partner.

💬 Was this article helpful?

1 out of 3 found this helpful