- 1 Minute to read
- Print
- DarkLight
Customize the Email Preheader
- 1 Minute to read
- Print
- DarkLight
Goal
To customize the preheader of your email.
Background Information
Preheaders are an increasingly important part of email marketing.
A preheader is a text that displays after the subject line of your email in the recipient's email client. It is also referred to as preview or snippet text since it typically shows your email's first sentence or two.
The number of characters that an email client displays as preheader text can vary from 50 to 140 characters. We recommend preheaders that are 85–100 characters long. The Message Preview window now displays the first 130 characters of the preheader of your email to help you design your preheaders.
Procedure
By default, the preheader that displays in the Message Preview window is the first 130 characters of the non-code portion of the email. The code portion often begins with a <body> tag. However, you can change the default preheader. For example, if the preheader contains an unsubscribe link, you can hide it from the customer. With a simple workaround, you can override the default preheader. The workaround lets you hide the preheader so it does not appear in the email.
You use the <div> tag in HTML to hide a preheader. The display parameter within the <div> tag hides the preheader text from most email clients but not all of them. So, you also set the font size to 1px (pixel) and the color to be the same as the background. These settings and a few others effectively hide the text. In the example below, we use #FFFFFF (white). Match whatever the background color of your email is.
In the main navigation, click Create New > Message > Email Message.
Enter the <body> tag of your email.
Below the <body> tag, add the following line of code using the HTML CODE view:
<div style="display:none;font-size:1px;color:#FFFFFF;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"> Your preheader text goes here </div>
When you switch to the HTML EDITOR view, the text that you enter between the <div> tags is not displayed in the body of the email.
Click Preview to open the Message Preview window. The Preheader is visible below the Email Subject Line. The text that you enter between the <div> tags displays after the Preheader heading but not in the email itself.