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.