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.

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

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>

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

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

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

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)

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.

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.