1. Home
  2. Postcards
  3. Online Editor
  4. How to Add Anchor Links to a Postcards Email Template

How to Add Anchor Links to a Postcards Email Template

Do you want to add a custom anchor links in your Postcards template to jump to different sections in the email? This tutorial will guide you step by step on how to do that.

Overview

We’re going to edit the contents of a Postcards template in the app to add the functionality of anchor links jumping to different sections in the email.

The outcome will be a Postcards template with menu items that navigate to a different section of the email when clicked.

Prerequisites

  • Designmodo account

Video Version

Steps

1. Edit the menu items in a Postcards template

Once you have your Postcards template set up, it’s time to start editing the contents.

In my template, I clicked the header section to open up the section to edit the menu and my screen looks like this:

Add an Anchor Links to a Postcards Email Template

I click the pen icon next to the “World” menu item and I can edit the contents.

I will change the URL from “http://example.com” to “#world” and that will look like this:

Edit the menu items in a Postcards template

I can press “Done” because I’m done editing the header section. If you want to add more anchor links in the menu items, you can duplicate this process for the other links.

In the “Features” section, I want to edit the text and add a custom anchor element. To do this, I click the “Features” section to open the menu and I want to edit the “Text” subsection.

Edit the section text and add an anchor link

We want to edit the “Text” section rather than the other sections because in the “Text” section we can edit the HTML. Other sections like Title don’t have options to edit the HTML code.

If I click through to “Tools” and then “Source Code” that will open a new window where I can add HTML code.

Tools

Now I can add the anchor tag that the menu item will jump to. To do this, I need to add the anchor tag with a name attribute that matches the URL set in the menu item. That will look like this:

Source Code

The “a” tag is the anchor link and the “name” attribute is what identifies the anchor link to the rest of the code. The “world” is the value of the “name” attribute and it’s how the menu item from before knows where to jump to. The <br /> tag is just a new line in the HTML file.

You use “name” rather than “href” because “href” opens the page in a new link but we just want the anchor link to link to somewhere else in the same file, not a new website.

If you press save and then done, you can send yourself a test email using the “Preview” button in the top right corner of the app. And that’s all there is to it. You now have a Postcards template that has a menu item that can jump to a different section in the email when you click it.

What we covered

  1. Editing a menu item’s URL
  2. Editing the HTML of a text section and adding a new anchor tag with a name attribute.
Updated on January 22, 2020

Was this article helpful?

Related Articles

Leave a Comment