To customize the preheader of your email.
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 email client of a recipient. It is also referred to as preview text or snippet text since it typically shows the first sentence or two of your email. 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.
Create an email.
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 show up in the email itself.
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, the color #FFFFFF is used which is white. Match whatever the background color of your email is.
- In the Main Navigation, click Create New > Message
⇒ Step 1. Type opens.
- Enter message information and select Email from the Type drop-down list.
- Click Create.
⇒ Step 2. Content opens.
- To view the HTML code of your email, click HTML Code.
- After the <body> tag of your email, add the following line of code: <div style="display:none;font-size:1px;color:#FFFFFF;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">.
- Enter your preheader text after the >.
- At the end of your preheader text, type </div>.
⇒ The </div> closes the <div> tag and marks the end of your hidden preheader text.
- To see your email in the visual editor, click HTML Editor
⇒ The text that you enter between the <div> tags does not display in the body of the email.
- Click Preview to open the Message Preview window where you can see the Preheader 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.