Published on Jun 26, 2018

FAQ: Can I create a preheader in my email campaign?

Unfortunately, we don't have a drag-and-drop element for this yet. But, with a few lines of code, you can easily turn a text block into a preheader that will show up in mobile previews. Preheaders are a short 75 character limit that typically shows up for iPhone, Gmail, and other mail providers.

Just follow these steps to create a preheader:

1) Drag a text block in immediately below the subject line.

preheader 1

2) Click "Edit HTML" on the left-hand side of the screen.

preheader 2

3) Input this line of code:

<!-- PRE_HEADER DECLARATION AND TEXT-->

<span style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">HERE YOU CAN CHANGE YOUR TEXT: 75 text char limit</span>

preheader 3

4) Click "Okay" at the bottom of the screen and then "Done" in the text editor without entering any new text.

preheader 4

5) Now, to make sure the text block containing the preheader is invisible, shrink it to be as small as possible.

preheader 5

6) Also, change the color of the text block to match the background of your email.

preheader 6

For advanced users:

1) For advanced users who want to further change the style of the preheader, input this line of code into the HTML portion of a text block above the footer:

<style>

/*--- Preheader declaration in style block in addition to inline for Outlook */

.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }

</style>

Then follow the same steps as above to make that text block invisible (don't add text, shrink the block, and change the color)

pre advanced 1

2) Add a text block below the subject line and edit the HTML to add this line of code:

<!-- PRE-HEADER TEXT -->

<span class="preheader">HERE IS WHERE YOU CAN CHANGE YOUR TEXT: 75 text char limit</span>

And then also make this text block invisible.

pre advanced 2

Once your whole email is done, be sure to send a test to yourself and make sure the preheader is working like expected. Make sure to view the test on mobile or through Gmail to see the preheader.

Share: