Overview
If your campaign is required to have a preheader and you don't want it displayed in your campaign, then you're in the right place.
Creating a preheader
To create a preheader so it won't be visible in your campaign, follow these steps:
- Add a text block to 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, as shown below
- You will then be taken to the 'Edit HTML' modal. Here you will 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 seeThis is preheader text.where you will 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 once you're satisfied.
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 will not be visible within the campaign.
Troubleshooting for mobile
It's possible that you may come across the issue where a mobile will 'ignore' the code above, hence why we recommend testing to see if this occurs. If you discover the preheader is being ignored by a mobile, try adding one of the below options to your HTML by going to Utilities > Edit Source. You don't need to add a text box for this step, as outlined under 'Creating a preheader'.
- 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-Then add the below div class after the opening
height:0px; max-width:0px; opacity:0; overflow:hidden; } </style><body>tag:<div class="divPreheader" style="display: none !important; mso-hide:all; visibility:hidden;">
Or
This preheader will display in the inbox before any other elements in the email and will be invisible when viewing the actual
email.
</div><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. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </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:
<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;">
</div></td></tr></tbody></table></div>
Or
<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;"> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div></td></tr></tbody></table></div>
Information
These are all options that require testing, and 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.