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:
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:
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.
2. Edit the section text and add an anchor link
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.
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.
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:
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
- Editing a menu item’s URL
- Editing the HTML of a text section and adding a new anchor tag with a name attribute.