In this tutorial, we’ll be changing the preview/preheader text in a Postcards email template in the app as well as the code.
Prerequisites
- A Designmodo account
- A text editor that can edit HTML files
Video Version
Steps
1. Create a Postcards template
In the Postcards app, create a template. Mine looks like this:
2. Edit the preheader text in the Postcards app
There are two ways to change the preheader text. One, you can edit it directly in the Postcards app, and two, you can edit it in the HTML code.
For this step, we’ll be editing it directly in the app.
In the right side menu of the app, there are sections to edit the contents of the template. One of those options is called “Preheader Text” like in this image:
Whatever you put in this field will be in the preview section of the email. I sent myself a preview of this email and in Gmail the “Preheader Text” looks like this:
So whatever you put in the textbox will look like that.
To send yourself an email preview in the Postcards app, press “Preview” in the top right corner, then press “View in browser,” and then send yourself an email like in this picture:
If I change the “Preheader Text” to:
Then when I send myself an email preview, it’ll look like:
And that’s all there is to changing the “Preheader Text” in the Postcards app!
3. Export the Postcards template to change the Preheader Text in code
To edit the code, we want to export the template and use the HTML code that’s generated.
In the top right corner of the app, press “Export” and press “Download as zip”
There will be an option called “Host images online.” Make sure this option is checked. Your screen should look like this:
Press “Download Zip” and extract the file into a folder. My folder looks like this:
If you open this file in your browser, you should see the Postcards template you just created.
Now, we have everything we need to change the preheader text in the code.
4. Edit the HTML code to change the Preheader Text
Open the HTML file you exported in a text editor. I’m using Notepad++ so it looks like:
To find the line of code you need to edit, open the “find” option by pressing “control + f” and type “<body” and then press “Find Next” like this:
That will point you to the opening body tag of the HTML document. Directly under that is the line of code you need to edit to change the “Preheader Text” in the HTML code.
Under the “<body>” tag is a “<span>” tag and within the opening <span> and closing </span> tags there is some text like this:
This is the text you need to edit to change the “Preheader Text” in code.
I’ve changed mine and it looks like this:
After you change the text here, save the file and then you’re done!
What we covered
- How to create and export a Postcards template.
- How to change the “Preheader Text” in the Postcards app.
- How to edit the HTML code in a Postcards template to change the “Preheader Text.”