Question

我正在为CMS构建HTML电子邮件模板，我想知道是否可以定义电子邮件的预先标题。

电子邮件预先标题是电子邮件提供商后面的电子邮件主题后面显示的电子邮件部分。在移动设备上非常有用，用户可以瞥见电子邮件的内容。它通常是定义它的电子邮件的第一个文本内容。

目前，在我的HTML电子邮件设计中，我有一个标题模板，正文模板和页脚模板。我的预标题由标题模板定义;出现的第一个文本内容位于标题中，是网站名称/徽标，在电子邮件设计中创建冗余。

有关如何解决这个问题的想法吗？

Answer 1

Sonu Yadav分享了这个问题的完美而聪明的解决方案（谢谢）。为了便于记录，Sonu Yadav共享的链接上提供的解决方案如下所示。

基本上，您需要在<body>标记中的所有内容之前添加您希望您的预读者使用的文本，并使用CSS隐藏它。

<style>
/* ... */
/*--- Preheader declaration in style block in addition to inline for Outlook */
.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }
</style>
</head>

<body>
<!-- PRE-HEADER TEXT -->
<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Preheader text shows up in GMail, iOS, Mail.app, &amp; more: 75 text char limit</span>
...

Answer 2

如果您的徽标是您在电子邮件中呈现的第一件事，那么最简洁的方式（无需依赖样式）就是将预读者文本放在图像alt标记中，例如：

<img src="https://s3.amazonaws.com/my-assets/logo.png" alt="My preheader text." >

如何定义HTML电子邮件预取标头

2 个答案: