Email preheaders, also known as email preview texts, are short lines of text that email recipients see in their Inboxes next to the subject line.
If you don’t provide any preheader text, email service providers and email clients may pull different pieces of email content into the preheader line. As a rule, these are the first 150 characters (with spaces) from your email, including the alt text for images.
Preheader is an important part of email design; an effective preheader is a great way to improve email engagement rates. Preheaders can help you tell subscribers what your email is about and compel them to open the email.
Preheaders can be generated from the first lines of text within the email or coded using HTML. In the latter case, the preheader will not be visible in the email body.
Structure your email so that the first few lines of the body text give recipients an enticing preview of what the email is about.
Place the Text content block at the very top of the email and fill it in with the preheader text.
You can place your preheader next to the 'view this email in your browser' link by using a two-column content row. Add the preheader text to the left column and the ‘view in browser’ link to the right one.
You can make your preheader invisible by setting the text font to its smallest size and the same color as the email background. In this case, email recipients will see the preheader in their Inboxes, but it won’t be visible in the email body.
Here’s what the email will look like in the Inbox:
In the email builder, add the HTML block to the top part of the email and fill it in with the following code:
This code will help you to add a preheader text that is l only visible in the Inbox. The text will not be displayed in the email body itself.
Since preheader text length varies across email providers and clients, it may happen that the client pulls some extra text content from the email body to add to your preview text.
To avoid this, use the following code for your HTML block:
<div style="display: none; max-height: 0px; overflow: hidden;">Preheader text</div>
<div style="display: none; max-height: 0px; overflow: hidden;"> </div>
This way, you will ensure that the email preview only displays the text you’ve provided in the HTML block.