Adding Invisible Pre-Header Text to Your Email Follow

You can insert invisible pre-header text into your emails so it won't show up in the body of your message, but still be visible in the message preview.

How to insert invisible pre-header text in the Drag and Drop editor :

Select the top most component of your email which has some text content in it (this is important as this will not work if the component is empty). Double click this component to enter edit mode, then click the small blue HTML button in the tool bar hovering just above.
 
Above the current code that is shown here, paste in this :

<style>
.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }
</style>
<span class="preheader" style="color:transparent; display:none !important; height:0; opacity:0; visibility:hidden; width:0">Preheader text goes here</span>
 
Replace the placeholder text with what you want your pre-header text to read.
 
We recommend limiting your pre-header text to between 85-100 characters.

How to insert invisible pre-header text in RAW HTML Emails :

In between the <style> tags, paste this code in :

.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }

Just under where the <body> tag starts, paste this code in : 

<span class="preheader" style="color:transparent; display:none !important; height:0; opacity:0; visibility:hidden; width:0">Preheader text goes here</span>
 
Replace the placeholder text with what you want your pre-header text to read.
 
We recommend limiting your pre-header text to between 85-100 characters.

 

 
Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request