开源交易电子邮件模板

已发表: 2017-11-29

当您设置新的 SendGrid 帐户时，为您的帐户创建一组电子邮件模板是要完成的最重要的任务之一。 如果您计划通过我们的 API 为您的应用或服务发送电子邮件，您很可能需要几种不同类型的电子邮件模板。 一些最常见的是密码重置、电子邮件确认和收据。

虽然网络上有大量预制的电子邮件模板可供选择，但要找到一套易于定制以匹配您的品牌的模板并不总是那么容易。

彻底测试常见电子邮件客户端中的模板也很重要。 此过程可能会很耗时，并且会减慢设置 SendGrid 帐户和开始发送电子邮件的过程。

我意识到 SendGrid 的团队可以通过创建一组开源电子邮件模板来为我们的客户提供价值，用户可以利用这些模板来涵盖这些常见用例。 模板不仅易于定制，而且您可以快速启动并发送！

我们称之为“粘贴”的模板集涵盖了 5 个用例：

  • 密码重置
  • 邮件确认
  • 欢迎信
  • 收据
  • 摘要（每天、每周或每月）

在 GitHub 上下载模板

要开始使用我们的粘贴模板，请前往 GitHub 并克隆存储库或下载粘贴模板文件夹。 还值得一提的是，这些模板存在于电子邮件模板的开源存储库中，其他 SendGrid 用户在我们最近的 Hacktoberfest 期间帮助贡献了这些模板。

自定义粘贴模板

一旦你有粘贴模板的本地副本，在你喜欢的代码编辑器中打开它们（我推荐 VSCode 或 Atom；它们都是免费的）。

我建议从 base.html 开始，因为它包含许多其他模板中的大部分可重用组件。 这些模板都共享一个共同的 HTML 结构，虽然文档中有一些基本样式，但大多数样式都是内联的。

当您梳理 HTML 时，您会注意到许多 HTML 注释来指示块的开始和结束位置。 这些是重要的注释，有助于您浏览模板并开始修改它们。

您还会注意到 HTML 元素上的背景颜色、排版、间距等样式。我鼓励您对它们进行试验，以了解它们如何改变这些模板的外观和感觉。

将您的徽标添加到模板中

您要做的第一件事就是将粘贴模板徽标替换为您自己的徽标。 您可以通过搜索其 HTML 注释快速找到徽标块，指示它的起始位置：

在此块中，您需要找到锚标记 (<a> ) 并将 HREF 更改为您的 URL。 默认情况下，模板应链接到 SendGrid 的主页。

调整好 URL 后，让我们将粘贴徽标替换为您自己的。 我建议将您的徽标存储在您可以轻松链接到的位置，例如您的网络服务器或 CDN。 替换 logo src 后，调整内联样式以使宽度/高度正确——这将取决于 logo 的纵横比。 默认情况下，粘贴徽标是 48px 正方形，因此我们将宽度样式设置为 48px。

例子：

在此示例中，粘贴徽标 URL 与一些宽度样式一起被引用，以将其设置为所需的 48 像素大小。 为您自己的徽标调整这些值，以确保它看起来清晰。

自定义背景颜色

如上所述，在各种块上设置背景颜色以建立粘贴模板的默认样式（灰色和白色）。 您可以轻松更改（并且应该）以匹配您的品牌颜色。

在这些样式之间跳转的最简单方法是使用您的编辑器搜索内联样式、bgcolor 和背景颜色。 这些属性的值可以替换为十六进制值（例如#000000）或颜色名称（例如黑色）。 在完成这些更改时，如果您在首选浏览器中打开其中一个模板并在进行更改时刷新，则很容易保持对事物的关注。

例子：

在此示例中，body 标记的样式为浅灰色背景色。 此颜色值和模板中的其他颜色值应自定义以匹配您的品牌。

自定义按钮

按钮是电子邮件模板中最常见的界面组件之一。 您将使用这些作为号召性用语，突出显示您希望用户执行的最重要的操作，例如确认他们的电子邮件地址。

默认情况下，Paste 的按钮被设计为蓝色块，带有一个微妙的边框半径来圆角。 自定义这些按钮以匹配您的品牌类似于我们已经对模板的背景颜色进行的修改。 使用我们为您添加的 HTML 注释搜索该块：

我们有几个应用了白色背景的表格单元格 (#ffffff) 以在按钮周围创建块，但您需要在下面找到具有以下样式的表格单元格。

例子：

在这个例子中， <td> 有一个 bgcolor 用于设置按钮的颜色，以及一个用于巧妙地圆角的边框半径。 尝试使用这些样式，为您的按钮打造与您的品牌相匹配的独特外观。

我们按钮的第二部分是上面显示的表格单元格中的锚点 (<a> )。

此锚点控制单击按钮时的 URL，以及标签的文本样式。 您可以调整样式以根据您的喜好和与您的品牌相匹配的内容来调整标签。

自定义排版

默认情况下，粘贴模板通过 Google 字体加载到 Web 字体 Source Sans Pro 中。 您可以使用来自 Google 集合的不同网络字体，或​​者使用当今大多数计算机上的标准字体集（Arial、Georgia、Times 等）。

如果您打算使用不同的网络字体，请查看我的电子邮件开发提示和技巧帖子以获得一些有用的指导。 确保您梳理 HTML 以查找任何引用字体系列的内联样式，并根据您的偏好进行调整。

例子：

在这个例子中，<td> 有一个 font-family 样式设置为使用 Source Sans Pro，在 webfont 不加载的情况下有一些回退到更标准的字体。

结束思想

我希望这些指针可以帮助您自定义这些模板以适合您的品牌，并让您在 SendGrid 的平台上启动和运行。 将来，我希望通过更多模板来扩展我们的电子邮件模板库，同时也是一个构建工具，可以使定制过程更快。

如果您在此过程中遇到任何问题，请针对 GitHub 存储库提交问题，如果您想贡献，请提交拉取请求。 寻找更多模板进行试验？ 试用 SendGrid 的免费响应式 HTML 电子邮件模板。