Menu
I'm building HTML email templates for a CMS and am wondering if it is possible to define what the preheader of the email is.
The email preheader is the portion of the email that appears right after the email subject on your email provider. Very useful on mobile devices, the user catches a glimpse of what the email is about. It is usually the first text content of the email that defines it.
Currently, on my HTML email design I have a header template, body template and a footer template. And my preheader gets defined by the header template; the first text content that appears is in the header and is the website name/logo, creating redundancy in the email design.
Any ideas of how to get around this?
965
To add a preheader with code: Add text as the first text within the body tag of your email. Put the text in a div style. Use the div style to hide the text from the actual email.
An email preheader is the brief text that you see after the sender information and the subject line when you're looking at an email in your inbox. This email preheader might not seem particularly important, but it's one of the very first things readers see when they look at your emails.
Email preheader is the summary text that follows a subject line when the email is viewed in an inbox. In many cases, it's used to provide a short summary of the email, and is typically one sentence long.
Preheaders are used in email HTML to control the preview text that is shown when an email is viewed in the inbox. Usually, around 3 lines of preheader text are displayed after the subject line this is almost always the first piece of written text after the body tag (i.e. not code).
Sonu Yadav shared the perfect and clever solution to this problem (thanks). And for the sake of documentation, the solution presented on the link shared by Sonu Yadav is below.
Basically, you add the text your want your preheader to be before all content in the <body> tag and use CSS to hide it.
<style>
/* ... */
/*--- Preheader declaration in style block in addition to inline for Outlook */
.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }
</style>
</head>
<body>
<!-- PRE-HEADER TEXT -->
<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Preheader text shows up in GMail, iOS, Mail.app, & more: 75 text char limit</span>
...
If your logo is the first thing being rendered in your email, the cleanest way (without having to rely on styles) is to place the preheader text in the image alt tag, e.g.:
<img src="https://s3.amazonaws.com/my-assets/logo.png" alt="My preheader text." >
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
