What's my plan?
Suite Team, Growth, Professional, Enterprise, or Enterprise Plus
Support Team, Professional, or Enterprise
位置：管理中心 > 渠道 > Talk 和电邮 > 电邮

此指南包含可自定义从您的帐户发送的电邮外观的 HTML 配方。自定义电邮外观有助于增强品牌一致性，提高客户互动度。例如，您可以在电邮布局中添加公司徽标或号召性用语横幅，以匹配您公司的品牌标识或帮助中心的外观。

从 Zendesk 帐户发送的电邮通知的外观和风格在很大程度上取决于管理中心的模板——一个是 HTML，另一个是纯文本。纯文本模板不支持指南中讨论的自定义类型。有关详情，请参阅 自定义通知的电邮模板。

本指南包括以下主题：

  • 通知电邮的常见设计模式
  • 电邮的 HTML 指南和最佳实践
  • 配方：添加您的公司徽标
  • 配方：添加公司横幅
  • 配方：添加号召性用语横幅
  • 配方：添加页脚
  • 配方：将社交媒体链接添加到页脚
  • 配方：自定义电邮正文
  • 测试更改

这些配方使用 HTML 和 CSS 来自定义电邮通知。有关 CSS 的介绍和参考，请参阅 CSS：级联样式表 在 Mozilla 开发者网络上。

注意：Zendesk 提供的本文章仅供说明之用。Zendesk 不为配方中的 HTML 和 CSS 提供支持。如需答案或解决方案，请在互联网上搜索或询问您最喜欢的人工智能聊天机器人。

通知电邮的常见设计模式

了解常见的设计模式有助于您创建与您的品牌保持一致的紧凑有效的电邮布局。

大多数通知电邮仅包含以下几个部分：

  • 徽标：徽标图像。
  • 公司横幅：单独使用徽标的替代方法。
  • 内容：电邮正文。
  • 号召性用语横幅：号召性用语，加入您的社区、使用您的帮助中心、试用新产品等。
  • 页脚：可包含各种信息，包括联系信息、社交媒体链接等。

在电邮模板中，除内容外，所有组件都是可选的。

本指南中的配方描述了如何在电邮模板中创建和插入设计元素。您可以混合搭配元素以创建您自己的电邮设计。以下是一些常见的设计模式：

公司徽标 带有页脚的公司徽标
带有页脚的公司横幅 带有 CTA 横幅和页脚的公司横幅

要获得一些灵感，请在 Lotus 主题博客上查看一些电邮设计。

电邮的 HTML 指南和最佳实践

设计电邮的外观和风格并非易事，因为 HTML 和 CSS 在不同的电邮应用程序中会有不同的呈现方式。某些类型的格式甚至可能被解释为垃圾信息。

设计电邮时请遵循这些一般指南：

  • 尽量简洁明了：保持设计简洁，避免布局复杂。
  • 使用表格进行布局：一些电邮应用程序可能无法可靠呈现基于 CSS 的布局。使用 HTML 表格创建布局更加可靠。
  • 使用内联 CSS 样式：使用 内联 样式，即在 style HTML 元素的 属性，例如： <p style="width=400px;">.导入的样式表或在 中定义的样式 <style> 标签 可能并非所有电邮应用程序都受支持。
  • 使用网络安全字体：使用 网络安全 字体，例如 Arial、Verdana 或 Georgia。自定义字体可能不受所有电邮应用程序支持，或无法正确呈现。
  • 尽量减少文本格式：尽量减少文本格式有助于保持布局整洁。此外，大量粗体文本会触发垃圾信息过滤器。

请遵循以下图像指南：

  • 谨慎使用图像：更少的图像有助于保持布局整洁。此外，大量图像可能触发垃圾信息过滤器。
  • 用 CSS 设置图像的大小：使用内联样式在布局中调整图像大小。未定义大小的图像通常会导致电邮布局失真。为了更安心，您可以使用重新采样以实际大小调整图像。
  • 对所有图像使用 ALT 标签：在用户允许显示图像之前，ALT 标签会显示图像的描述。
  • 不要链接到已关闭 Zendesk 帐户中的图像：如果目标收件人未注册并登录，图像将中断。

配方：添加您的公司徽标

此配方将向您展示如何将公司徽标添加到电邮模板。例如：

成分

  • 您公司徽标图像的 URL

配方

  1. 将以下代码块粘贴在 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>
  2. 进行以下任意更改以自定义徽标：
    更改  

    徽标图像

    元素：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; ..."
  3. 根据需要调整其它值。
  4. 用 .html 扩展名保存文件，并经常在浏览器中预览更改。
  5. 在将其添加到您帐户中的电邮模板之前，先在测试电邮模板中预览 徽标。
  6. 当您准备好上线时，在管理中心的 HTML 电邮模板中以下位置插入徽标代码块（管理中心>渠道>电邮)。

配方：添加公司横幅

此配方将向您展示如何在电邮模板中添加公司横幅。公司横幅通常包含设置在背景颜色上的公司徽标和名称。例如：

成分

  • 您公司徽标图像的 URL
  • 品牌标识的颜色值

配方

  1. 将以下代码块粘贴在 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>
  2. 进行以下任意更改以自定义公司横幅：
    更改  

    徽标图像

    元素：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; ..."
  3. 根据需要调整其它值。
  4. 用 .html 扩展名保存文件，并经常在浏览器中预览更改。
  5. 在将横幅添加到您帐户中的电邮模板之前，先在测试电邮模板中预览 横幅。
  6. 准备好上线后，将横幅代码块粘贴到管理中心（管理中心）HTML 电邮模板中的以下位置 >渠道>电邮)。

配方：添加号召性用语横幅

此配方将向您展示如何在电邮模板中添加号召性用语 (CTA) 横幅。号召性用语横幅通常位于电邮正文之后。它通常会邀请用户进行一些操作，例如加入您的社区、使用您的帮助中心、试用新产品等。它由一个图形、文本和一个设置在背景颜色上的链接组成。例如：

成分

  • 号召性用语的文本
  • 号召性用语图像的 URL
  • 用于帮助用户完成号召性用语的链接的 URL
  • 品牌标识的颜色值

配方

  1. 将以下代码块粘贴在 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>
  2. 在三个段落标签中添加号召性用语。根据需要添加或移除段落。
  3. 进行以下任意更改以自定义号召性用语横幅：
    更改  

    号召性用语图像

    元素：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; ..."
  4. 根据需要调整其它值。
  5. 用 .html 扩展名保存文件，并经常在浏览器中预览更改。
  6. 在将横幅添加到您帐户中的电邮模板之前，先在测试电邮模板中预览 横幅。
  7. 准备好上线后，将横幅代码块粘贴到管理中心（管理中心）HTML 电邮模板中的以下位置 >渠道>电邮)。

配方：添加页脚

此配方将向您展示如何在电邮模板中添加页脚。页脚可包含各种信息，包括联系信息、社交媒体链接等。有关社交媒体链接，请参阅下一个配方， 配方：将社交媒体链接添加到页脚.

标准电邮模板已为页脚提供了以下占位符：

  • {{footer}} :显示下行：“这是 Acme 提供的服务。”，其中“Acme”是您公司的名称。
  • {{footer_link}}:在电邮中显示以下行：“由 Zendesk 提供。”，“Zendesk”上有一个可返回 zendesk.com 的链接。

您可以用自己的页脚替换或补充这些占位符。

在这个配方中，您将创建一个提供联系信息的页脚。它将替换 {{footer}} 和 {{footer_link}} 占位符。例如：

成分

  • 贵公司的联系信息
  • 品牌标识的颜色值

配方

  1. 将以下代码块粘贴在 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>
  2. 更改三个段落标签中的联系信息。
  3. 进行以下任意更改以自定义页脚：
    更改  

    页脚的背景颜色

    元素： 表格>样式>背景颜色

    将十六进制值 #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; ..."
  4. 根据需要调整其它值。
  5. 用 .html 扩展名保存文件，并经常在浏览器中预览更改。
  6. 在将页脚添加到您帐户中的电邮模板之前，先在测试电邮模板中预览 页脚。
  7. 准备好上线后，将代码块粘贴到管理中心（管理中心>渠道>电邮)。

配方：将社交媒体链接添加到页脚

此配方介绍了如何将社交媒体链接添加到自定义页脚。

注意：如果您已添加社交媒体渠道到 Zendesk 帐户，可以将 {{footer}} 占位符显示社交媒体渠道的按钮。请参阅 在电邮中添加社交媒体按钮。

例如：

成分

  • 用作按钮的社交媒体图像的 URL
  • 链接到您的社交媒体帐户

配方

  1. 将以下代码块粘贴在 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>

    这是创建带有联系信息的页脚 (配方：添加页脚）。

  2. 将社交图标添加到 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>
  3. 对于每个社交媒体链接，更改该链接的 URL（href="..."）和图标图像（src="..."）对于每个社交媒体链接。
  4. 进行以下任意更改以自定义图标：

    更改

    		  

    图标大小

    元素：img>样式>宽度

    确保所有图标具有相同的宽度值。

    例如：

    img style="width: 24px; ..."

    图标之间的间距

    元素：img>样式>右填充

    更改 的值 padding-right style 用于每个社交媒体链接，除了最后一个。

    例如：

    img style="padding-right: 8px; ..."

    图标上方和下方的空格

    元素：div>样式>填充顶部

    增加或减少 padding-top 值以调整图标上方的间距。

    例如：

    div style="padding-top: 8px; ..."

    元素：div>样式>填充底部

    增加或减少 padding-bottom 值以调整图标下方的间距。

    例如：

    div style="padding-bottom: 10px; ..."
  5. 根据需要调整其它值。
  6. 用 .html 扩展名保存文件，并经常在浏览器中预览更改。
  7. 在将页脚添加到您帐户中的电邮模板之前，先在测试电邮模板中预览 页脚。
  8. 准备好上线后，将代码块粘贴到管理中心（管理中心>渠道>电邮)。

配方：自定义电邮正文

此配方将向您展示如何自定义电邮正文。您将更改文本的字体和字号，以及电邮正文周围的空间。

电邮由通知消息和电邮对话组成。在电邮模板中，电邮正文由 {{content}} 占位符。Zendesk 将占位符替换为 HTML，然后发送电邮。例如：

Zendesk 插入的某些 HTML 包含无法修改或覆盖的样式。有关详情，请参阅 自定义电邮正文的限制。

配方

  1. 粘贴 {{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>
  2. 对父 div 的样式进行以下任意更改，以自定义电邮正文。
    更改  

    消息文本的大小

    元素：div>样式>字体大小

    更改 font-size 值。

    请注意，此更改不会更改用户名的文本大小或电邮的发送时间。

    例如：

    div style="font-size: 11px; ..."

    文本字体

    元素：div>样式>字体系列

    您可在不超过限制的范围内更改字体。使用 网络安全字体， 例如Trechiet MS、Verdana 或Georgia。并非所有电邮应用程序都支持其他字体。

    例如：

    div style="font-family: 'Trebuchet MS', sans-serif; ..."

    电邮正文周围有空格

    元素：div>样式>填充

    增加或减少 padding 值以更改电邮正文周围的间距。

    例如：

    div style="padding: 15px; ..."

    如果要更改左侧和右侧的间距（例如 25px），请为 padding 样式。第一个值是顶部和底部内边距，第二个值是左侧和右侧内边距。

    例如：

    div style="padding: 15px 25px; ..."
  3. 根据需要添加其他内联样式或调整其他值。

    请注意，电邮正文的某些属性无法更改。请参阅 自定义电邮正文的限制。

  4. 用 .html 扩展名保存文件，并经常在浏览器中预览更改。
  5. 在测试电邮模板中预览 更改，然后再将其添加到您帐户中的电邮模板。
  6. 准备好上线后，将代码块粘贴到管理中心（管理中心>渠道>电邮)。

自定义电邮正文的限制

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"

测试更改

您可以使用此配方所附的测试电邮模板来测试您的更改。

在管理中心直接对电邮模板进行的更改会立即生效。因此，您应在测试模板中全面测试更改，确保其按预期工作，然后再将其添加到您帐户的电邮模板。

测试更改

  1. 下载下面所附的测试电邮模板 test_email_template.html，并在 HTML 或文本编辑器中打开。
  2. 将组件的代码块粘贴在测试电邮模板中的指示位置。例如：
    <!-- Paste logo or company banner code block here -->
  3. 在浏览器中打开测试模板并缩小浏览器窗口以模拟电邮应用程序。
  4. 在测试模板中调整代码，然后刷新浏览器页面以查看更改的效果。
  5. 继续进行迭代更改，直到您对设计满意为止。
  6. 准备好上线后，将组件的代码块粘贴到管理中心的电邮模板中相同的位置（管理中心>渠道>电邮)。

翻译免责声明：本文章使用自动翻译软件翻译，以便您了解基本内容。 我们已采取合理措施提供准确翻译，但不保证翻译准确性

如对翻译准确性有任何疑问，请以文章的英语版本为准。

由 Zendesk 提供技术支持