如何定义 HTML 电子邮件前缀

问题描述 投票：0回答：3

我正在为 CMS 构建 HTML 电子邮件模板，并且想知道是否可以定义电子邮件的前置头。

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

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

有什么办法可以解决这个问题吗？

php html css email
3个回答
16
投票

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>
...
0
投票

如果您的徽标是电子邮件中首先呈现的内容，则最简洁的方法（无需依赖样式）是将标题文本放置在图像 

alt
标签中，例如：

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

我想你可以在标题上为“预览文本”留出一些空间

“<div style=”display:none;”>The preview text goes here</div>”

如果您有显示：无，则根本不会显示并且无法选择。如果可见性设置为隐藏，则文本不会出现在电子邮件上，但会占用空间并且也可以选择。只是一个想法...

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.