Creating a preheader
If you want to create a visible preheader, you can add a text box at the very top of your campaign, and enter your desired preheader text.
To create a preheader so it won't be visible in your campaign:
In EasyEditor, drag a text block onto your campaign. Make sure the text block is at the top of the campaign before any other content.
In the text field, highlight Type text here, then select the HTML button.
You're then taken to the Edit HTML side panel. Here you need to highlight and delete
<p>Type text here</p>. In the deleted text's place, copy and paste the code provided below.
Near the end of the code, you will see
This is preheader text.where you must input what you want your preheader to be:
<span style="display:none !important; mso-hide:all; font-size:3px; color:#ffffff; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden;"> This is preheader text. </span>
Select SAVE.
At this stage, we recommend that you test your campaign just to make sure the preheader is appearing as it should. If the code has been integrated properly, you'll see the preheader, but it won't be visible within the campaign.
Troubleshooting for mobile
It's possible that you may come across the issue where a mobile ignores the code above, which is why we recommend thorough testing. If you discover the preheader is being ignored by a mobile, you can try adding one of the below options to your HTML by going to Utilities > Edit Source.
You can add these code snippets in the main campaign source code, you don't need to create a text box.
Option 1: Paste the code below inside the
<body>tag of the campaign:
<body style="margin: 0; padding: 0;"> <div style="display: none; font-size: 0px; line-height: 0px; max-height: 0px; max-width: 0px; width: 0px; opacity: 0; overflow: hidden;"> This preheader will display in the inbox before any other elements in the email and will be invisible when viewing the actual email. </div>
Option 2: Create a style and then paste the div code inside the body of the campaign. To start, add the below style between the
</styles>...</head>tags inside the campaign:
<style> .divPreheader {display: none !important; mso-hide:all; visibility:hidden; mso-hide:all; font-size:1px; color:#ffffff; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; } </style>
Then add the below div class after the opening<body>tag.
In the following snippet, replace the [insert HTML characters here] with the following characters:
͏⠀‌ ͏⠀‌ ͏⠀‌ ͏⠀‌
Repeat these characters as many times as needed to create enough space after your preheader text.
<div class="divPreheader" style="display: none !important; mso-hide:all; visibility:hidden;"> This preheader will display in the inbox before any other elements in the email and will be invisible when viewing the actual email.[insert HTML characters here]</div>
Option 3: You can edit the campaign's HTML so the class on the text box includes both
ee-hide-on-desktopandee-show-on-desktop. This does have a downside where you could forward the campaign or send to an app which doesn't support our hide on desktop or mobile code, but it should work in most cases.
Troubleshooting for Outlook
If you're sending your campaign to many Outlook users, it's worth adding a few non-breaking spaces to the text box to ensure it doesn't start pulling through the next line of text, such as a view in browser link. An example of the code can be found below.
In the following snippet, replace the [insert HTML characters here] with the following characters:
͏⠀‌ ͏⠀‌ ͏⠀‌ ͏⠀‌
Repeat these characters as many times as needed to create enough space after your preheader text.
<div class="ee_dropzone"><table cellpadding="0" cellspacing="0" class="col-font-reset ee_element ee_textelement ee-hide-on-desktop ee-show-on-desktop" width="100%" ee-type="element" data-title="Text" style="table-layout: auto;"><tbody><tr><td valign="top" align="left" class="element-pad element-bord root-element-pad"><div class="ee_editable"><p style="line-height: 18px; text-align: left; font-size: 11px; color: rgb(179, 179, 179);">Editable hidden inbox preview text</p></div><div style="display: none; max-height: 0px; overflow: hidden;">[insert HTML characters here]</div></td></tr></tbody></table></div>
These are all options that require testing, and it may not be the case that one option fits all. You should test these solutions as much as you can. We'd also recommend to simply focus on your top email clients and devices.