Skip to main content
A
Anonymous
April 21, 2015
Question

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

  • April 21, 2015
  • 3 replies
  • 7206 views
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.
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

Casey_Grimes2
Casey_Grimes2
Level 10
April 21, 2015

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.

    A
    Anonymous
    July 22, 2015

    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. 

    A
    Anonymous
    April 24, 2015

    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_Grimes2
    Casey_Grimes2
    Level 10
    July 22, 2015

    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>

    A
    Anonymous
    July 8, 2015

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

    Thank you,

    Timothy.

    Casey_Grimes2
    Casey_Grimes2
    Level 10
    July 8, 2015

    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.

    A
    Anonymous
    July 9, 2015

    Thanks to you Courtney,

    You'll be happy to know everything is working fine

    Have a nice day,

    Timothy.

    Terms & ConditionsAccessibility statement

    Loading footer...