Email Preview Pane | Community
Skip to main content
February 24, 2015
Solved

Email Preview Pane

  • February 24, 2015
  • 2 replies
  • 5395 views
Hello,

How can I control what is shown in the email preview pane when a person goes through their email? I am looking to control what is shown for mobile devices.

Thanks,
David
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Justin_Cooperm2
Make the first thing that appears in the Email Template under the <body> a “mktEditable” section. Add whatever other content or “mktEditable” sections you want beneath that first section (it’s irrelevant what else is in the template). Then, when you create an individual Email Asset from this template, double-click the first region in the email. Click the “HTML” button in the TinyMCE rich-text editor. Add a pre-header at the very beginning of the code like this:

<div style="display: none !important;">This is the pre-header. It should be ~100 characters long for best results as different clients will show different amounts of the pre-header…</div>

<div>This is the actual start of the email content here!</div>

When you click “Update” you’ll only see “This is the actual start of the email content here!” in TinyMCE, but the pre-header will be applied.

2 replies

October 1, 2015

I have noticed that if you use a display none, you will actually remove the preview text in several different email clients.

I find that if you use a color:transparent!important; color:#backgroundcolor; that you will render invisible(because it's blended) and you don't loose preview text in any of the other email clients.

Justin_Cooperm2
New Participant
February 25, 2016

Which clients? I want to look into this.

Justin_Cooperm2
Justin_Cooperm2Accepted solution
New Participant
February 24, 2015
Make the first thing that appears in the Email Template under the <body> a “mktEditable” section. Add whatever other content or “mktEditable” sections you want beneath that first section (it’s irrelevant what else is in the template). Then, when you create an individual Email Asset from this template, double-click the first region in the email. Click the “HTML” button in the TinyMCE rich-text editor. Add a pre-header at the very beginning of the code like this:

<div style="display: none !important;">This is the pre-header. It should be ~100 characters long for best results as different clients will show different amounts of the pre-header…</div>

<div>This is the actual start of the email content here!</div>

When you click “Update” you’ll only see “This is the actual start of the email content here!” in TinyMCE, but the pre-header will be applied.

Chris_Saporito
New Participant
July 29, 2015

Hi Justin, would you care to share some screen grabs of this?

Thanks!

Chris

Justin_Cooperm2
New Participant
July 29, 2015

Screen grabs of the code? Or what it looks like in an email client? It's just the preview you would see on an iPhone or in Gmail inbox...