此指南包含可自定义从您的帐户发送的电邮外观的 HTML 配方。自定义电邮外观有助于增强品牌一致性,提高客户互动度。例如,您可以在电邮布局中添加公司徽标或号召性用语横幅,以匹配您公司的品牌标识或更匹配您的帮助中心外观。
从 Zendesk 帐户发送的电邮通知的外观和风格在很大程度上取决于管理中心的模板——一个是 HTML,另一个是纯文本。纯文本模板不支持指南中讨论的自定义类型。有关详情,请参阅 自定义通知电邮模板。
本指南包括以下主题:
配方使用 HTML 和 CSS 来自定义电邮通知。有关 CSS 的介绍和参考,请参阅 CSS:级联样式表 在 Mozilla 开发者网络上。
通知电邮的常见设计模式
了解常见的设计模式有助于您创建符合您品牌的紧凑有效的电邮布局。
大多数通知电邮仅包含以下几个部分:
- 徽标:徽标图像。
- 公司横幅:单独使用徽标的替代方法。
- 内容:电邮正文。
- 号召性用语横幅:号召性用语,加入您的社区、使用您的帮助中心、试用新产品等等。
- 页脚:可包含各种信息,包括联系信息、社交媒体链接等。
在电邮模板中,除内容外,所有组件都是可选的。
本指南中的配方描述了如何在电邮模板中创建和插入设计元素。您可以混合及匹配元素以创建您自己的电邮设计。以下是一些常见的设计模式:
公司徽标 | 带有页脚的公司徽标 |
![]() |
![]() |
带有页脚的公司横幅 | 带有 CTA 横幅和页脚的公司横幅 |
![]() |
![]() |
要获得一些灵感,请在 Lotus 主题博客上查看一些电邮设计。
电邮的 HTML 指南和最佳实践
设计电邮的外观和风格并非易事,因为 HTML 和 CSS 在不同的电邮应用程序中会有不同的呈现方式。某些类型的格式甚至可能被解释为垃圾信息。
设计电邮时请遵循这些一般指南:
- 尽量简洁:尽量保持设计的简洁,避免复杂的布局。
- 使用表格进行布局:一些电邮应用程序可能无法可靠呈现基于 CSS 的布局。使用 HTML 表格创建布局更为可靠。
-
使用内联 CSS 样式:使用 内联 样式,即在 中定义的样式
style
HTML 元素的 属性,例如:<p style="width=400px;">
更新。导入的样式表或在 中定义的样式<style>
工单标签可能并非在所有电邮应用程序中都受支持。 - 使用网络安全字体:使用 网络安全字体 ,例如 Arial、Verdana 或 Georgia。自定义字体可能不受所有电邮应用程序支持,或无法正确呈现。
- 尽量减少文本格式:尽量减少文本格式有助于保持布局整洁。此外,大量粗体文本会触发垃圾信息过滤器。
请遵循以下图像指南:
- 谨慎使用图像:更少的图像有助于保持布局整洁。此外,大量图像可能触发垃圾信息过滤器。
- 用 CSS 设置图像的大小:使用内联样式设置布局中图像的大小。未定义大小的图像通常会使电邮的布局失真。为了更安心,您可以使用重新采样以实际调整图像大小。
- 对所有图像 使用 ALT 标签:在用户允许显示图像之前,ALT 标签会显示图像的描述。
- 不要链接到已关闭 Zendesk 帐户中的图像:如果目标收件人未注册并登录,图像将中断。
配方:添加您的公司徽标
此配方将向您展示如何将公司徽标添加到电邮模板。例如:
成分
- 您公司徽标图像的 URL
配方
- 将以下代码块粘贴在 HTML 或文本编辑器中:
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="center" style="padding-top: 0px; padding-bottom: 0px;"> <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto;"> </td> </tr> </tbody> </table>
- 进行以下任意更改以自定义徽标:
更改 徽标图像
元素:img> sRC
将 的占位符值替换为
src
属性 替换为您徽标图像的 URL。例如:
img src="https://www.example.com/images/logo_acme.png"
徽标大小
元素:img>样式>宽度
更改
width
值以调整徽标大小。例如:
img style="width: 120px; height: auto; ..."
徽标周围有空格
如果徽标周围的空间太大,您可能需要使用图像编辑工具剪掉图像周围的空白。
如果图像周围的空间太小,可以增加表格单元格的边距。
元素:td>样式
添加
padding
到style
属性并调整其值。例如:
td style="padding: 10px; ..."
徽标的水平对齐方式
元素:td>对齐
选择居中、靠左或靠右。
例如:
td align="left"
徽标的垂直间距
元素:td>样式>填充顶部
更改
padding-top
值以在徽标上方添加空格。元素:td>样式>填充顶部
更改
padding-bottom
值以在徽标下方添加空格。例如:
td style="padding-top: 15px; padding-bottom: 5px; ..."
- 根据需要调整其他值。
- 以 .html 扩展名保存文件,并经常在浏览器中预览更改。
- 在将其添加到您帐户中的电邮模板之前,先在测试电邮模板中预览 徽标。
- 准备好上线后,将徽标代码块插入管理中心(管理中心>渠道>电邮)。
配方:添加公司横幅
此配方向您展示如何在电邮模板中添加公司横幅。公司横幅通常由设置在背景颜色中的公司徽标和名称组成。例如:
成分
- 您公司徽标图像的 URL
- 您品牌标识的颜色值
配方
- 将以下代码块粘贴在 HTML 或文本编辑器中:
<table style="background-color: #c0c7d8;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px;"> <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto; margin-right: 10px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 24px; font-weight: bold; color: #333; margin-top: 50px;">Company name</p> </td> </tr> </tbody> </table>
- 进行以下任意更改以自定义公司横幅:
更改 徽标图像
元素:img> sRC
将 的占位符值替换为
src
属性 替换为您徽标图像的 URL。例如:
img src="https://www.example.com/images/logo_acme.png"
徽标大小
元素:img>样式>宽度
更改
width
值以调整徽标大小。例如:
img style="width: 120px; height: auto; ..."
徽标周围有空格
如果徽标周围的空间太大,您可能需要使用图像编辑工具剪掉图像周围的空白。
如果图像周围没有足够空间,可以增加表格单元格的边距。
元素:td>样式
添加
padding
到style
属性并调整其值。例如:
td style="padding: 10px; ..."
公司名称的格式
元素:p>样式
更改任意文本样式或添加您自己的文本样式。
例如:
p style="font-size: 30px; color: #553e3e; ..."
徽标和公司名称之间留有空格
元素:img>样式>页边距-右
增加或减少
margin-right
值以增加或减少徽标和名称之间的间距。例如:
img style="margin-right: 15px; ..."
公司名称相对于徽标垂直对齐
元素:p>样式>页边距顶部
增加或减少
margin-top
值,将公司名称相对于徽标上移或下移。例如:
p style="margin-top: 40px; ..."
横幅的背景颜色
元素: 表格>样式>背景颜色
将十六进制值 #d3d3d3 替换为
background-color
style 替换为您自己的值。请查阅您的品牌打造指南或使用在线颜色选取器,例如 html- color.codes。例如:
table style="background-color: #d8e3fb; ..."
- 根据需要调整其他值。
- 以 .html 扩展名保存文件,并经常在浏览器中预览更改。
- 在测试电邮模板中预览 横幅,然后再将其添加到您帐户中的电邮模板。
- 准备好上线后,将横幅代码块粘贴到管理中心(管理中心)HTML 电邮模板中的以下位置 >渠道>电邮)。
配方:添加号召性用语横幅
此配方将向您展示如何在电邮模板中添加号召性用语 (CTA) 横幅。号召性用语横幅通常位于电邮正文之后。它通常会邀请用户进行一些操作,例如加入您的社区、使用您的帮助中心、试用新产品等。它由一个图形、文本和一个设置在背景颜色上的链接组成。例如:
成分
- 号召性用语的文本
- 号召性用语图像的 URL
- 用于帮助用户完成号召性用语的链接的 URL
- 您品牌标识的颜色值
配方
- 将以下代码块粘贴在 HTML 或文本编辑器中:
<table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px; padding-left: 50px; margin-top: 12px; margin-bottom: 8px;"> <div id="cta-text" style="width: 300px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #333; margin-top: 6px;">Take a hand, lend a hand</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 14px;">Join our worldwide community to ask expert users for advice or share your own.</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px;"><a href="#">Ask the community</a></p> </div> <div id="cta-image" style="padding-left: 20px;"> <img src="cta_image.png" alt="cta_image" style="width: 140px; height: auto; border-radius: 50% 50% 0 0;"> </div> </td> </tr> </tbody> </table>
- 在三个段落标签中添加号召性用语。根据需要添加或移除段落。
- 进行以下任意更改以自定义号召性用语横幅:
更改 号召性用语图像
元素:img> sRC
将 的占位符值替换为
src
属性中替换为号召性用语图像的 URL。例如:
img src="https://www.example.com/images/cta_image.png"
图像大小
元素:img>样式>宽度
更改
width
值以调整图像大小。例如:
img style="width: 120px; height: auto; ..."
号召性用语消息的格式
元素:p>样式
更改任意文本样式或添加您自己的文本样式。
例如:
p style="font-size: 30px; color: #553e3e; ..."
消息和图像之间的空格
元素:div id="cta-image">样式>左填充
增加或减少
padding-left
值以增加或减少消息和图像之间的间距。例如:
div id="cta-image" style="padding-left: 30px; ..."
横幅的背景颜色
元素: 表格>样式>背景颜色
将 的十六进制值 #d8e3fb 替换为
background-color
style 替换为您自己的值。请查阅您的品牌打造指南或使用在线颜色选取器,例如 html- color.codes。例如:
table style="background-color: #d3d3d3; ..."
- 根据需要调整其他值。
- 以 .html 扩展名保存文件,并经常在浏览器中预览更改。
- 在测试电邮模板中预览 横幅,然后再将其添加到您帐户中的电邮模板。
- 准备好上线后,将横幅代码块粘贴到管理中心(管理中心)HTML 电邮模板中的以下位置 >渠道>电邮)。
配方:添加页脚
此配方介绍了如何在电邮模板中添加页脚。页脚可包含各种信息,包括联系信息、社交媒体链接等。有关社交媒体链接,请参阅下一个配方, 配方:将社交媒体链接添加到页脚更新。
标准电邮模板已为页脚提供了以下占位符:
-
{{footer}}
:显示以下行:“ This email is a service from Acme.”,其中“Acme”是您公司的名称。 -
{{footer_link}}
:在电邮中显示以下行:“由 Zendesk 提供。”,带有“Zendesk”上可返回 zendesk.com 的链接。
您可以用自己的页脚替换或补充这些占位符。
在本配方中,您将创建一个提供联系信息的页脚。它将替换 {{footer}}
和 {{footer_link}}
占位符。例如:

成分
- 贵公司的联系信息
- 您品牌标识的颜色值
配方
- 将以下代码块粘贴在 HTML 或文本编辑器中:
<table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p> </td> </tr> </tbody> </table>
- 更改三个段落标签中的联系信息。
- 进行以下任意更改以自定义页脚:
更改 页脚的背景颜色
元素: 表格>样式>背景颜色
将 的十六进制值 #d8e3fb 替换为
background-color
style 替换为您自己的值。请查阅您的品牌打造指南或使用在线颜色选取器,例如 html- color.codes。例如:
table style="background-color: #d3d3d3; ..."
文本颜色
元素:p>样式>颜色
更改
color
值。例如:
p style="color: #553e3e; ..."
文本格式
元素:p>样式
更改任意文本样式或添加您自己的文本样式。
例如:
p style="font-family: Georgia, sans-serif; ..."
顶部和底部边框的间距
元素:td>样式>填充顶部
增加或减少
padding-top
值以更改上边框和文本之间的间距。例如:
td style="padding-top: 8px; ..."
元素:td>样式>填充底部
增加或减少
padding-bottom
值以更改文本和下边框之间的间距。例如:
td style="padding-bottom: 8px; ..."
- 根据需要调整其他值。
- 以 .html 扩展名保存文件,并经常在浏览器中预览更改。
- 在将页脚添加到您帐户中的电邮模板之前,先在测试电邮模板中预览页脚 。
- 准备好上线后,将代码块粘贴到管理中心(管理中心>渠道>电邮)。
配方:将社交媒体链接添加到页脚
此配方介绍了如何将社交媒体链接添加到自定义页脚。
例如:
成分
- 用作按钮的社交媒体图像的 URL
- 链接到您的社交媒体帐户
配方
- 将以下代码块粘贴在 HTML 或文本编辑器中:
<table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p> </td> </tr> </tbody> </table>
这是创建带有联系信息的页脚的方法(配方:添加页脚)。
- 将社交图标添加到 HTML 中第一段落标签的前面。例如:
<div style="padding-top: 12px; padding-bottom: 0px;"> <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_facebook.png"/></a> <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_x.png"/></a> <a href="#"><img style="width: 30px;" src="https://www.example.com/images/icon_instagram.png"/></a> </div>
- 对于每个社交媒体链接,更改该链接的 URL(
href="..."
)和图标图像(src="..."
)对于每个社交媒体链接。 - 进行以下任意更改以自定义图标:
更改
图标大小
元素:img>样式>宽度
确保所有图标具有相同的宽度值。
例如:
img style="width: 24px; ..."
图标间距
元素:img>样式>右填充
更改 的值
padding-right
设置除了最后一个链接之外的每个社交媒体链接的样式。例如:
img style="padding-right: 8px; ..."
图标上方和下方有空格
元素:div>样式>填充顶部
增加或减少
padding-top
值以调整图标上方的间距。例如:
div style="padding-top: 8px; ..."
元素:div>样式>填充底部
增加或减少
padding-bottom
值以调整图标下方的间距。例如:
div style="padding-bottom: 10px; ..."
- 根据需要调整其他值。
- 以 .html 扩展名保存文件,并经常在浏览器中预览更改。
- 在将页脚添加到您帐户中的电邮模板之前,先在测试电邮模板中预览页脚 。
- 准备好上线后,将代码块粘贴到管理中心(管理中心>渠道>电邮)。
配方:自定义电邮正文
此配方将向您展示如何自定义电邮正文。您将更改文本的字体和大小,以及电邮正文周围的空间。
电邮由通知消息和电邮对话组成。在电邮模板中,电邮正文由 {{content}}
占位符。Zendesk 将占位符替换为 HTML,然后发送电邮。例如:
Zendesk 插入的某些 HTML 包含无法修改或覆盖的样式。有关详情,请参阅 自定义电邮正文的限制。
配方
- 粘贴
{{content}}
在 HTML 或文本编辑器中,创建占位符 及其父 div 标签。例如:<div style="padding: 10px; line-height: 1.5; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#444444;"> {{content}} </div>
- 对父 div 的样式进行以下任意更改,以自定义电邮正文。
更改 消息文本的大小
元素:div>样式>字体大小
更改
font-size
值。请注意,此更改不会改变用户名的文本大小或电邮的发送时间。
例如:
div style="font-size: 11px; ..."
文本字体
元素:div>样式>字体系列
您可在有限范围内更改字体。使用 网络安全字体, 例如Tre Buket MS、Verdana或Georgia。并非所有电邮应用程序都支持其他字体。
例如:
div style="font-family: 'Trebuchet MS', sans-serif; ..."
电邮正文周围留有空格
元素:div>样式>填充
增加或减少
padding
值以更改电邮正文周围的空格。例如:
div style="padding: 15px; ..."
如果要更改左侧和右侧的间距(例如 25px),请为
padding
样式。第一个值是顶部和底部内边距,第二个值是左侧和右侧内边距。例如:
div style="padding: 15px 25px; ..."
- 根据需要添加其他内联样式或调整其他值。
请注意电邮正文的某些属性无法更改。请参阅 自定义电邮正文的限制。
- 以 .html 扩展名保存文件,并经常在浏览器中预览更改。
- 在测试电邮模板中预览 更改,然后再将其添加到您帐户中的电邮模板。
- 准备好上线后,将代码块粘贴到管理中心(管理中心>渠道>电邮)。
自定义电邮正文的限制
Zendesk 替换 {{content}}
发送电邮时,将 占位符替换为自己的 HTML。但是,系统生成的 HTML 包含用于电邮正文某些元素的内联样式。很遗憾,您无法访问并修改这些样式。您也无法在电邮模板中使用内联样式覆盖它们。在 CSS 中,子元素的内联样式优先于父元素(例如 div)的内联样式。
本节概述了自定义电邮正文的一些限制。在设计电邮正文的其余部分时,请务必考虑这些设置。
正文
您无法更改正文的以下样式:
- 字体颜色
- 行高
- 文本周围的边距
这些样式的设置如下:
color: #2b2e2f; line-height: 22px; margin: 15px 0
发送名称和日期文本
名称和发送日期文本的以下样式无法更改:
- 字体颜色
- 字体系列
- 字号
- 行高
- 文本周围的边距
名称文本的设置如下:
color: #1b1d1e"; font-family: Verdana, Tahoma, sans-serif; font-size: 15px;
line-height: 18px; margin-bottom: 0; margin-top: 0;padding: 0; color: #1b1d1e"
短信发送日期的设置如下:
font-family: Verdana, Tahoma, sans-serif; font-size: 13px; line-height: 25px;
margin-bottom: 15px; margin-top: 0; padding: 0; color: #bbbbbb"
测试更改
您可以使用此配方附带的测试电邮模板测试您的更改。
在管理中心直接对电邮模板进行的更改会立即生效。因此,您应在测试模板中全面测试更改,确保其按预期工作,然后再将其添加到您帐户的电邮模板。
测试更改
- 下载测试电邮模板(即下文所附的 test_email_template.html),并在 HTML 或文本编辑器中打开。
- 将组件的代码块粘贴在测试电邮模板中的指定位置。例如:
<!-- Paste logo or company banner code block here -->
- 在浏览器中打开测试模板并缩小浏览器窗口以模拟电邮应用程序。
- 在测试模板中调整代码,然后刷新浏览器页面以查看更改的效果。
- 继续进行迭代更改,直到您对设计满意为止。
- 待上线准备就绪后,将组件的代码块粘贴到管理中心(管理中心>渠道>电邮)。
翻译免责声明:本文章使用自动翻译软件翻译,以便您了解基本内容。 我们已采取合理措施提供准确翻译,但不保证翻译准确性
如对翻译准确性有任何疑问,请以文章的英语版本为准。
0 条评论