How to add/edit preheaders in email templates

Email preheader text is a small line of text that appears after the subject line in an email inbox. Email preheaders give a short summary of the contents of an email, and may appear differently on mobile and web email clients.  

 

Drag & Drop Editor:

1) Select the HTMLcontent and drag it to the top of the content table

2) Change the html content with the below snippet:

<div style="font-size:16px;text-align:center;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif"><span id="ad_text0" class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">preheader test-1</span></div> 

3) Save the layout

4) Create an email template from layout

5) Click on the elements tab in the email editor and enter your custom preheader text

 

HTML Editor:

You can use our Custom Elements capability to visually add/edit preheaders in email templates. You can use the Elements tab to register custom blocks in an email template and then subsequently visually edit rich text areas, images etc.

Simply add this markup to any HTML email template to be able to get a text area in Elements for editing:

<span id="ad_text0" class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">Type the preheader text</span>

You will then see a text area under the Elements tab, where you can type in the preheader. 

Screen_Shot_2019-09-17_at_1.51.16_PM.png

 

Once an email is sent, it should show in your inbox like this with a preheader: 

Screen_Shot_2019-09-17_at_2.12.36_PM.png

 

Additional details on how to use the Elements tab to register custom blocks in an email template can be found at: https://help.blueshift.com/hc/en-us/articles/115002708433-Email#Editable

 

 

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