Hidden Email Preheader | HTML Code Copy

Often I need to add preheaders to custom coded emails for platforms that do not offer preheader fields natively. If done incorrectly, the preheader text will show at the top of some email clients (Outlook… 🤦‍♂️), not ideal.

Copy and paste this code just below the opening body element:

<span style="display:none !important;
visibility:hidden;
mso-hide:all;
font-size:1px;
color:#f9f9f9;
line-height:1px;
max-height:0px;
max-width:0px;
opacity:0;
overflow:hidden;">Add email preheader text here.</span>

  • the span text color needs to match the body background color
Screenshot of email preheader code in-use for reference

Take it further

Many email platforms will allow you to take this a step-further by adding a dynamic single-line text field. It is beyond the scope of this article, but if you have a question about a particular platform, leave a comment and I’ll respond.

CR Rollyson is a Digital UX & Web manager for a S&P 500 FinTech company and is the COO of Side Role, a marketing agency partnering with In-house Teams & Agencies, Non-profits, and Start-Ups. Learn more about Side Role here.

--

--

Digital UX & Web manager for a S&P 500 FinTech company & COO of Side Role, a marketing agency partnering w In-house Teams & Agencies, Non-profits, & Start-Ups.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
CR Rollyson

Digital UX & Web manager for a S&P 500 FinTech company & COO of Side Role, a marketing agency partnering w In-house Teams & Agencies, Non-profits, & Start-Ups.