|
Preheader text is a great way to drive open rates by displaying content that captures the reader's attention. Preheader text can be seen by email recipients, directly underneath the subject line, even before they open the email.
|
Available with: | ||||
| Trial | ✓ | ||||
| Essential | ✓ | ||||
| Advanced | ✓ | ||||
| Ultimate | ✓ | ||||
| Users: | |||||
| Administrators | ✓ | ||||
| Company Managers | ✓ | ||||
| Marketing Managers | ✓ | ||||
| Sales Managers | |||||
| Salespersons | |||||
| Jr. Salespersons | |||||
Adding Preheader Layout Blocks
Layout blocks are the foundation of emails created in SharpSpring. Elements can be added into layout blocks.
The Email Designer allows you to drag, drop, and reorder layout blocks into your email to further customize it.
One of the many premade layout blocks available is the preheader layout block. To add preheader layout blocks create or edit an email from the Email page in SharpSpring's left toolbar.
- Click
Content and Layout in the Email Designer toolbar. - Click the Simple tab.
- Drag-and-drop the Preheader layout block into your email.
- Click Save.
Click to enlarge.
Refer to Using Layout and Element Blocks in Emails for more information on layout blocks.
Editing Preheader Layout Blocks
You can edit preheader content from the Email Designer toolbar.
First, you must create or edit an email with a preheader layout block. Begin from the Email page, in SharpSpring's left toolbar.
- Click the Preheader layout block.
Click to enlarge.
- Use the Email Content Editor's word processing features to modify text as desired.
- Click Save.
Click to enlarge.
Hiding Preheader Content in Microsoft Outlook
You can hide preheader content in emails that are viewed in Microsoft Outlook.
To hide preheader text in simple and designer emails, ceate or edit an email from the Email page in SharpSpring's left toolbar.
- Click Content and Layout in the Email Designer toolbar.
- Click the Simple tab.
- Drag-and-drop the Preheader layout block into your email.
Click to enlarge.
- Modify the preheader's text as desired using the Email Content Editor.
Click to enlarge.
- Click
More Options > View Code.
Click to enlarge.
- In the Email's HTML, at the bottom of the
<head>tag, add the following code before the closing</head>tag:<style> .shsp-wireframe-layout-preheader { display: none; } </style>
Note: To quickly jump to the section you need to update, use your keyboard's search shortcuts (CTRL+F or Command+F) to search for the closing</head>tag. SharpSpring offers Professional Services to assist with custom coding.
Click to enlarge.
- Add the following as a style attribute in the innermost
<table>or<td>element that contains the preheader text:style="mso-hide: all;" - Click Done Editing.
Note: To quickly jump to the section you need to update, use your keyboard's search shortcuts (CTRL+F or Command+F) to search for the text that is in your preheader. SharpSpring offers Professional Services to assist with custom coding.
Click to enlarge.
- Click Save.
Click to enlarge.
Before sending the email to your real contact or lead list, it's a good idea to send the email to a test list to be sure your code is working as expected.
Using Merge Variables in Preheader Text
You can add merge variables to preheader text, to personalize it. Here is an example of how your merge variables can look in a preheader.
Click to enlarge.
Defaults are handled slightly differently as well. Your merge variable will fill in personalized lead information, like the lead's first name or company name. In the event personalized information isn't available, default text can help to avoid a blank space in the email.
If you are using the same merge variable elsewhere in your email, and a different default is used, that is what will populate the default area of the merge variable in the preheader text.
The .HTML document is parsed top-to-bottom, and when the second use of the same merge variable is noticed, the default value for that merge variable will overwrite what was previously set in the first use of that merge variable.
The following is an example of code without defaults:
<p class="preheader">{$firstName} check out these awesome deals</p>
or
{$firstName} check out these awesome deals
The following is an example of code with defaults:
<p class="preheader">{$firstName!"You should"} check out these awesome deals</p>
or
{$firstName!"You should"} check out these awesome deals