Creating a preheader for a campaign

Contents

Creating a preheader
Troubleshooting for mobile
Troubleshooting for Outlook

Summary

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:

  1. Add a text block to your campaign. Please ensure the text block is at the top of the campaign before any other content.

    CP_drag_text_block.jpg
  2. In the text field, highlight 'Type text here', then click the HTML button, as shown below

    CP_text_html.jpg
  3. 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 see This is preheader text. where you will input what you want your preheader to be:
    <span style="display:none !important;
    visibility:hidden;
    mso-hide:all;
    font-size:1px;
    color:#ffffff;
    line-height:1px;
    max-height:0px;
    max-width:0px;
    opacity:0;
    overflow:hidden;">
    This is preheader text.
    </span>
  4. Click 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-
    height:0px; max-width:0px; opacity:0; overflow:hidden; } </style>
    Then add the below div class after the opening <body> tag:
    <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.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
  • Option 3: You can edit the campaign's HTML so the class on the text box includes both ee-hide-on-desktop and ee-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;">&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌
&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&
nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&n
bsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nb
sp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌</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.
Have more questions? Submit a request

Comments