Add useful information above your header
Preheader sections come in two types:
They can be used to add aside information above the fold. The text inside will also show up in the email preview, so you can use them as attention grabbers.
The Basic Preheader is made up of two columns with text links inside. If you want, you can replace the two columns with just one (1-column.html from the grid folder), and use only text.
The Social Preheader is similar to the Basic one, only that it is more suited for social interaction. It uses contact information links and social media icons, and you can use it to push your social links and contact info above the fold.
Change the HEX colour from the link's inline CSS.
Use icons that contrast with your preheader's background colour. Retina icons supported.
Sartre Email comes with a variety of social icons which you can use in the Preheader section. If using different icons, make sure that their size is the same as the ones we provide.
Change the HEX colour inside
bgcolor="" on the
<td class="px-sm-16" align="center" bgcolor="#EEEEEE"> <table class="container" cellpadding="0" cellspacing="0" role="presentation" width="600"> <tr> <td class="px-sm-8" align="left" bgcolor="#FFFFFF" style="padding: 0 24px;"> ... </td> </tr> </table> </td>
Preheaders by default use #EEEEEE for the 'outside' colour (basically, the email body), and #FFFFFF for the inside of a section. When using the integrated versions, such as MailChimp or StampReady, you need not worry about this: controls for changing them are provided through their UI.
Top & Bottom Spacing
line-height: value on the
<div class="spacer" style="line-height: 8px;">‌</div>
You'll notice that, unlike other sections, the Preheaders don't use a mobile spacing utility, since their spacing is quite short. But if you want, you can change it to one of the other mobile spacing classes in Acorn. Learn more about spacers in Acorn.