Hidden Email Preheader | HTML Code Copy

CR Rollyson
1 min readJan 13, 2023

--

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 (except Outlook… 🤦‍♂️smh).

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>

Note:

  • 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.

If you found this helpful, like > follow > share > comment.

CR Rollyson is a Digital User Experience & Web Manager for a S&P 500 Fintech company and is the COO of Side Role, a marketing team in Charlotte North Carolina partnering with In-house Teams & Agencies, Non-profits, and Start-Ups. Learn more about Side Role here.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

CR Rollyson
CR Rollyson

Written by CR Rollyson

UX & Web mgr for a S&P 500 Fintech & COO of Side Role, a marketing team partnering w In-house Teams & Agencies, Non-profits, & Start-Ups. https://siderole.com

No responses yet

What are your thoughts?