Litmus Builder Essentials：在 Builder 中创建 HTML 电子邮件模板的最佳实践

Litmus Builder 是用于 HTML 电子邮件的强大自定义电子邮件构建器。 在我们的 Litmus Builder Essentials 系列的早期版本（第一、二和三部分）中，我们已经分解了如何使用 Builder。 今天，我们将向您展示如何在创建自己的 HTML 模板时使用这些功能。

正如我们在第 1 部分中看到的，您可以将任意数量的预先构建和预先测试的 HTML 模板用于您自己的营销活动。 每个都是一个良好的基础，让您可以节省时间并专注于重要的事情：内容。 模板还允许不编码的营销人员或设计师自己构建出色的电子邮件活动。

但是，如果您希望在电子邮件设计中获得更大的灵活性和自定义性，那么从头开始制作自己的模板是不二之选。

当您在 Builder 中时，单击左上角附近的Start building按钮或右侧的Create new按钮，为您的项目命名，选择Build ，然后单击Next按钮。 在Build a new email屏幕中，选择第一个选项： Blank email 。 Builder 将创建一个新的电子邮件项目并将您带入 Builder 界面。

以下是 Litmus Builder 功能，可让您更轻松地创建自己的模板：

• CSS 内联
• 片段和部分
• 网格线
• 电子邮件预览
• 分享

使用 CSS 内联

CSS 内联使您能够将 HTML 和 CSS 分离到界面中的不同选项卡中。 这确保您的代码尽可能干净和可读，允许您快速导航和更新模板的代码。 它也非常适合需要交给技术较少的团队成员的开发人员。

要启用 CSS 内联，请单击 Builder 屏幕左侧的齿轮图标，然后切换名为Inline CSS的选项。 您可以使用编辑器工具栏中的选项在 HTML 和 CSS 编辑器之间切换。

Builder 的 CSS 内联旨在真正理解电子邮件。 例如，它不会删除任何 Outlook 条件注释或伪选择器，它保留了字符实体，并有许多工具可以让您改进工作流程。

当您准备好将模板从 Litmus Builder 移到您自己的电子邮件服务提供商 (ESP) 中时，单击导出按钮。 从这里，您可以将您的电子邮件同步到您的 ESP、复制已编译的 HTML 或下载已编译的 HTML。 就这么简单！

利用片段和部分

Litmus Builder 有两个专门设计用于更快、更轻松地构建和使用模板的工具： snippets和partials 。 让我们仔细看看它们如何帮助您构建更好的模板。

片段

片段允许您在所有 Builder 项目中保存和重用代码位。 您可以使用“插入”按钮访问您的片段。

如果您之前没有使用过片段，您会看到一个空的库。 幸运的是，创建一个新的片段很容易！

在片段库中，单击管理片段。 从这里，您将选择New Snippet 。 将弹出一个新屏幕，您可以在其中命名代码段、创建用于插入该代码段的代码段触发器，以及编写或粘贴要包含在代码段中的 HTML 和/或 CSS。

有效使用片段的关键是为电子邮件中的常用组件创建它们，并依靠片段触发器来插入它们。

例如，大多数电子邮件活动依靠预览文本来鼓励订阅者打开电子邮件。 无需为您创建的每封电子邮件手动键入新的预览文本组件，您可以将该组件保存为片段并直接在 Builder 的编辑器中触发它。 在这种情况下，我们可以在新代码段中包含代码，为其命名，并将其触发器设置为类似pvt 的内容。

现在，每当您需要在编辑器中调用该代码段时，只需键入pvt ，然后紧跟选项卡按钮，Builder 就会将代码插入到您的模板中。

您甚至可以通过将文本括在花括号中来在代码段中包含编辑/跳转点。 当您插入片段时，具有编辑/跳转点的片段会自动将光标定位在该点，让您可以快速编辑片段的内容。

不确定要在您自己的库中包含哪些片段？ 查看我们在电子邮件设计中使用片段的终极指南以获取灵感。

部分

与片段类似，部分允许您收集代码组件以在 Builder 项目中使用。 片段和部分之间的主要区别在于片段最终被硬编码到您的模板中，而 Builder 会在您预览、编译或下载模板时将部分提取到您的模板中。

可以通过单击插入，然后单击局部来访问局部。

要创建新的分音，请单击管理分音。 Builder 将在新窗口中打开您的部分。 从这里，选择New Partial来创建一个新的部分。 每个部分由文档的标题标识，并且可以通过将部分的标题括在双花括号中来包含在您自己的模板中。 例如，如果我们有一个部分命名的header ，我们可以通过键入{{header}}在 Builder 文档中调用它。 代码编辑器仅显示该短文本块，同时将部分文本动态提取到您的电子邮件中。

您可能想知道，“为什么要使用部分而不是片段？” 这是一个很好的问题。

虽然片段非常方便，但部分的杀手级功能是它们被动态添加到您的模板中。 由于在编译、预览、下载或共享模板之前，代码实际上并未添加到编辑器中，因此您可以在一处更新部分，并将这些更改渗透到使用该部分的所有模板中。

想想电子邮件页脚。 通常，每当法律部门做出更改时，公司都需要更新多封电子邮件页脚中的信息。 您不必单独手动更新数十封电子邮件，而是可以更新单个 {{footer}} 部分，该部分被拉入所有这些电子邮件。 更新该部分会自动更新所有模板，从而为您节省大量时间。

这对于属于更大团队的设计师和开发人员非常有帮助。 他们可以控制部分内容，同时让营销人员可以访问包含电子邮件内容的模板。 营销人员可以更新该内容，同时保持页眉和页脚等元素不变——减少错误并确保为订阅者提供更好的电子邮件。

使用网格线进行快速导航

虽然 CSS 内联、片段和部分可以帮助加快开发速度并使代码导航更容易，但大多数电子邮件仍然包含大量难以阅读的代码。 Builder 的网格线无需滚动数百行代码来查找需要编辑的部分，而是允许您快速查找和选择要关注的电子邮件元素。

要启用网格线，请按预览工具栏中的齿轮图标，然后单击切换网格线。 网格线将覆盖预览窗格中电子邮件上的蓝色框，突出显示电子邮件模板中的每个单独元素。 启用网格线后，只需选择任何元素，代码编辑器就会自动导航到该代码块，因此您可以进行任何必要的更新。

在 100 多个电子邮件客户端中预览

一旦您开始在 Litmus Builder 中构建模板，下一步就是确保您的模板在所有必要的电子邮件客户端中正确呈现。 Litmus 电子邮件预览使这变得快速而简单。 在电子邮件构建器预览窗格中，在默认浏览器预览和电子邮件预览之间切换。 选择电子邮件预览会启动一系列测试，让您能够查看您的模板在 100 多个电子邮件客户端中的外观。

如果您知道您的受众只在特定电子邮件客户端中打开您的营销活动，您可以通过单击电子邮件预览视图中的选择客户端按钮来选择要测试的客户端。 这将打开您可以打开和关闭的所有可用客户端的列表。 不确定您的订阅者正在使用哪些电子邮件客户端？ 尝试 Litmus 电子邮件分析以深入了解订阅者的行为。

与您的团队共享模板

在 Litmus Builder 中开发模板的最后一步是与团队成员和利益相关者共享这些模板。

Litmus Builder 没有将您的代码和图像复制到您的 ESP、设置测试列表并手动将活动发送到该列表，而是有一个完整的共享面板，专门用于获取有关您的活动的反馈。

在共享面板中，您可以选择发布、发送电子邮件和嵌入模板。 如果您发布电子邮件，您可以选择仅共享所选客户端中的电子邮件预览，或同时共享 HTML 和电子邮件预览。

这样，您可以选择要与每个利益相关者共享的内容。 如果您只需要利益相关者签署设计，请仅共享预览，以免他们被 HTML 混淆。 将模板发送给其他开发人员进行审查或故障排除？ 共享 HTML 和预览。

电子邮件选项允许您快速将测试电子邮件直接发送到您的收件箱，而无需上传到您的 ESP。

如果您想在博客或 Litmus 社区上共享模板，请使用嵌入功能在任何网站上嵌入模板的实时预览。 人们甚至可以打开代码并在他们自己的 Builder 帐户中开始编辑，让团队成员可以在不影响您自己的模板的情况下快速即兴发挥创意。 生成器预览在创建后 60 天到期。

立即开始使用 Builder

既然您知道如何在 Builder 中创建模板、片段和部分，为什么不试一试呢？ 这是加快工作流程的最有效方法之一，同时确保您自己的广告系列达到最高质量标准。

已经是 Litmus 客户？ 直接进入。否则，免费试用 Litmus 7 天，看看 Builder 如何改进您的开发过程。

Litmus Builder 不仅仅是构建电子邮件 在对您的受众最重要的电子邮件客户端上快速构建和 QA 测试，并利用可重复使用的电子邮件模块和模板来减少错误并保持品牌一致性。 查看所有福利 →

在我们的 Litmus Builder Essentials 系列中了解更多信息

• Litmus Builder Essentials，第 1 部分：了解我们的电子邮件生成器
• Litmus Builder Essentials，第 2 部分：在我们的电子邮件生成器中创建
• Litmus Builder Essentials，第 3 部分：团队如何使用我们的电子邮件生成器
• 您在这里：Litmus Builder Essentials，第 4 部分：在 Builder 中创建 HTML 电子邮件模板的最佳实践