Pre-headers - How to add, and where to start

[Anonymous]

Hi, I'm hearing a lot about pre-headers and I would like to implement asap. Do you have a step by step? I create my templates in Dreamweaver and plug them into Marketo. Any help is appreciated. thank you.

[Casey_Grimes]

Hi Jenifer!

When it comes to pre-headers, there are two schools of thought: one is to integrate the pre-header as part of your design so it naturally appears as the first line in your email design; the other is to have an invisible span element at the very top of your template. Personally, I prefer the latter as it can mess with email aesthetics otherwise.

What you'll want to do is add the following to your CSS style:

.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }

Afterwards, in the top part of your email template (not your individual email—you want to ensure it's above your View as Web Page link!), enter the following:

<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">{{my.preheader}}</span>

In this case, because pre-headers tend to change per-email, I'd recommend using a program-level token (aka the {{my.preheader}} placed here) to allow you to easily change out the text you want to use.

[Anonymous]

Hi Courtney - any reason why the visibility:hidden for the preheader span would not be working in Outlook on Windows? It's showing up in the actual email. I have globally turned of "View as web page", FYI. 

[Anonymous]

Thank you so much Courtney! Preheader text is now in place! 🙂 I could not figure out how to make the preheader text appear before "view as a web page", so for time's sake, I just removed the link altogether. But I would like to understand how, for the future. I placed the span code in the html after the body tag.  

[Casey_Grimes]

Hi Jenifer,

What are you using specifically for setting up your span? I would recommend using

This is your pre-header line

<span style="line-height:0px; display: none; max-height: 0px; font-size: 0px; overflow: hidden; mso-hide: all">This is your pre-header line</span>

[Anonymous]

Any ideas on how to make the preheader text appears before "view as a web page" ?

Thank you,

Timothy.

[Casey_Grimes]

Personally, I would globally remove the View as Web Page link and re-place it in your template with {{system.viewAsWebpageLink}}. That way you ensure the span renders first every time.Do note that once you remove the link globally, though, you'll have to replace it in every template--and considering you should want to make custom preheaders for every email anyway, shouldn't be a huge issue.

[Anonymous]

Thanks to you Courtney,

You'll be happy to know everything is working fine

Have a nice day,

Timothy.