Adding a preheader to an email campaign

The Preheader (or Pre-header) is a visible element in the email inbox list, normally inserted under the "subject" line of the message. It is not necessarily visible in the message.

Contents

Adding a preheader to an email campaign

Copy this code in the source of your message.
Replace the text "Lorem Ipsum dolor sir…" with your own message
The preheader must be less than 140 characters.

$/!\$ Don't forget to test your email again and again. The preheader may be visible in some email clients.

Here, we explain 4 different methods you may use to insert the preheader in your email message.

Method A - Adding HTML in the source code

Paste this code in the <head> section

   1 <style type="text/css">
   2     span.preheader { display: none !important; }
   3 </style>

Then paste this at the begining of the <body> section.

   1 <span class="preheader">Lorem Ipsum dolor sir</span>

Method B - Adding HTML in the source code

Paste this code in the <head> section

   1 <style type="text/css">
   2     preheader { display:none!important; } 
   3 </style>

Then paste this at the begining of the <body> section.

   1 <!-- Pre-header -->
   2 <div class="preheader" style="font-size: 1px; display: none !important;”>
   3     Lorem Ipsum dolor sir
   4 </div>
   5 <!-- Pre-header End -->

Method C - Using the Message Editor directly

Locate the small gear, at the left of the tool bar.
In the small modal window, simply type your message in the Pre-header field then click ok.

Method D - Using the Drag & Drop Template builder

Launch the Template builder
In the Theme Panel, locate the Pre-header Tab
Then simply type your message in the Pre-header box.

Preheader Character Limits

The preheader is not part of the Email specifications, but just a fancy way to exploit the "Preview" section of email clients. Because of this, all mail clients are not displaying the same numbers of characters. Here are a few examples:

Email Clients	Limit
Recent iPhone	64
Gmail (Web Client)	100
Gmail (iOS)	34
Recent iPad (Mail app)	64
Android 4.4	97
Apple Mail 9 (Yosemite)	50~100, no limit
Outlook 2013	60~100
Outlook.com	125~230
Yahoo! Mail	135~200

This chart is just an overview, Apple Mail has no physical limit as its preview adjusts according to the size of the screen.

Quick Links

Navigation