1. Home
  2. Postcards
  3. Edit the Code
  4. How to Change the Preview/Preheader Text in a Postcards Email Template
  1. Home
  2. Postcards
  3. Online Editor
  4. How to Change the Preview/Preheader Text in a Postcards Email Template

How to Change the Preview/Preheader Text in a Postcards Email Template

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:

How to Change the Preview/Preheader Text in a Postcards Email Template

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:

Edit the preheader text in the Postcards app

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:

Preheader Text Email

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:

View in browser

If I change the “Preheader Text” to:

Preheader Text

Then when I send myself an email preview, it’ll look like:

Email preview

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:

Export the Postcards template to change the Preheader Text in code

Press “Download Zip” and extract the file into a folder. My folder looks like this:

Download Zip

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:

Edit the HTML code to change the Preheader Text

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:

Find Next

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:

Preheader Text Edit

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

After you change the text here, save the file and then you’re done!

What we covered

  1. How to create and export a Postcards template.
  2. How to change the “Preheader Text” in the Postcards app.
  3. How to edit the HTML code in a Postcards template to change the “Preheader Text.”
Updated on January 29, 2020

Was this article helpful?

Related Articles

Leave a Comment