Adding a Preheader in the Unisender Builder

Add a Preheader

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.

Examples of email preheaders

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.

Generate preheader text using the first lines of the email

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.

Adding text content that serves as an email preheader.

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.

Adding the ‘view in browser’ link next to the preheader text.

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.

Adding a text preheader that is hidden and invisible in the email body.

Here’s what the email will look like in the Inbox:

An example of preheader text pulled from the first lines of the email content

Add an email preheader using HTML

In the email builder, add the HTML block to the top part of the email and fill it in with the following code:

 

<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">

Preheader text

</div>

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.

Code an email preview text using the HTML block.

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.

An example of an email preview with extra content pulled from the first lines of text within the email

To avoid this, use the following code for your HTML block:

 

<table>
<tbody>
<tr>
<td>
<div style="display: none; max-height: 0px; overflow: hidden;">Preheader text</div>
<div style="display: none; max-height: 0px; overflow: hidden;"> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
</td>
</tr>
</tbody>
</table>

Coding an email preview without any text content pulled from the first lines of text within the body of an email.

This way, you will ensure that the email preview only displays the text you’ve provided in the HTML block.

An example of an email preview without the first lines of text being pulled into the preheader line

Useful links:

Build a Layout Using Rows
Save and Reuse Email Elements
Preview Emails Before Sending

Did we answer to your question?

0
0