Editable preheader

As part of the update to my templates, I wanted to add a preheader make it editable, so I would reduce the number of templates created. After consulting with roshodgekiss, I wrapped the preheader tag with an editable field, and set the display to none. Well, that worked wonderfully on Outlook for Mac, but the PC counterpart showed a tiny preheader in black. So I decided to further wrap it in a div set to not display. That worked too well since now I cannot even view the editable field to edit. Here's the code I am using so far. Any thoughts?


<style type="text/css">
span.preheader { display: none !important; }
#preheader { display: none !important; }

And the rest

<div id ="preheader"><singleline label="PreHeader">
<span style="display: none !important; font-size: 0px; color: #d6d6d9;">My great editable preheader</span></singleline></div>
roshodgekiss roshodgekiss, 3 years ago

Hey there Fernando, I just responded to your email earlier regarding this - no worries at all! Just to recap for everyone's benefit, adding editable preheaders to templates that don't display in email clients is a tricky proposition. Your best bet is to:

- Use this TOC technique - not editable, but a reliable way to generate a relevant preheader
- Make your preheader visible - also useful for providing a nice teaser, as it will load prior to all other email content
- Add an editable image (can be transparent), then add the preheader text as ALT

Thanks Fernando! Welcome to the forums, we love questions like this :)

Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Frendina, 3 years ago

Ok so, some naiveté, a lot of trial and error, some perseverance, some stubbornness (ok, a lot), and a lot of patience and help from Ros helped me to arrive at a solution which works well for me. I am hoping this will help others who have similar needs from their templates.

I tried the ALT tag for a 1x1 pixel image meant to trick email into displaying it first, and no matter where I placed it on the template, it was ignored when it was time to display it. l ended up adding an editable text field as the very first element in the first row of the template.

<span style="font-size: 0px; color:#d6d6d9"><multiline label="Preheader">Great editable fake preheader</multiline></span>

I have tried a similar approach before using "display: none !important;" but — though it worked on Mac and IPhone — it displayed incorrectly on Outlook for PC, which ignored the CSS which hid the text. This seems to work fine so far in the clients that I have tested in, and I have not tested extensively, but was excited to post the solution. The color of the font is basically the same as the cell background. This preheader also displays before the title of the HTML on the template, so that was also an advantage to me.

On a related note, I did an unscientific test on some platforms to figure out how many characters with spaces (CWS) are displayed on the preview windows. Keep in mind the exact amount depends on exactly which letters your text uses, as each character has a different width. I used Lorem Ipsum.

iPhone ~61 CWS in the default 2-line preview screen.
Outlook 2011 Mac ~90 CWS
Oulook 2007 PC ~110 CWS
Gmail displays it fine, but the CWS count depends on the length of the title for your campaign and your window width

Thank you Ros for all your help! I would not have arrived at this without you directing me to different resources, which ultimately helped me try different solutions, and come up with this one.

roshodgekiss roshodgekiss, 3 years ago

You're more than welcome, Fernando - I'm so glad we got this to work! Keep sharing your findings in the forums - they definitely help the many designers out there like yourself :D

Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free