Pre-header text is the snippet of text that is displayed after the subject line when an email is viewed in the inbox of an email client.
Pre-headers are drawn from the first available text in the body of the email. Some designers like to add this text at the very top of their emails, however some prefer to hide it from view, using CSS.
In either case, if you're wanting to take advantage of using pre-header text :
- Limit pre-header messages to 85-100 characters.
- Test pre-header content in multiple email clients for an idea of how many characters recipients see.
- Test the email and pre-header on mobile devices by viewing the content in vertical view and horizontal view.
Not familiar with CSS and want to have hidden pre-header text in your drag and drop message?
Here is how:
- Drag a new text box from the right hand side and place it at the very top of the email.
- Select this new component by clicking on it once, then on the right hand side, under the 'Content' section, change the padding to 0, set the background colour to match your email design.
- Double click into your new text box and highlight the text in there. Type in your pre-header text. Now, highlight the text again and change its size to the smallest available in the blue toolbar. Now, change the text colour to match the background.
- And there you have it! Invisible pre-header text in a drag and drop email!