Litmus Builder Essentials：在我们的电子邮件生成器中创建

在 Litmus Builder Essentials 系列的最后一篇文章中，我们浏览了 Builder 的界面，了解了 Builder 的所有不同部分、一些菜单和设置选项，以及右上角的那些小图标到底是什么. 既然您已经熟悉了 Builder 中的哪些功能，现在是时候深入研究一些使在 Builder 中开发电子邮件成为一种美妙体验的功能。

在 Litmus Builder Essentials 的第二部分中，我们将更深入地了解 Builder 的代码和可视化编辑器、一些专为电子邮件开发设计的功能，以及如何使用 Builder 加快您的开发工作流程。

认识我们的电子邮件编辑器

Litmus Builder 分为三个主要部分：代码编辑器、可视化编辑器和预览窗格。

大多数情况下，Builder 中的主要工作将发生在代码或可视化编辑器中。

代码编辑器

代码编辑器是您为电子邮件编写 HTML 和 CSS 的地方。

除非您已开始使用新模板或将您自己的代码复制并粘贴到您的 Builder 项目中，否则默认情况下代码编辑器将为空白。

如果您对电子邮件编码有经验，则可以直接在编辑器中开始编写代码，或者从本地文件或您选择的文本编辑器中复制和粘贴电子邮件。

如果您开始一个新的空白文档，但后来决定需要一个模板来构建，请转到菜单栏单击插入，然后单击 。 这将打开模板库，您可以在其中从自己保存的模板中进行选择，也可以从优雅的、经过预先测试的模板库中进行选择，以用于一系列用例，您可以为下一个活动自定义这些用例。 选择一个新模板，Builder 会将该模板（包括图像和所有内容）加载到代码编辑器中。

可视化编辑器

可视化编辑器允许编码人员和非编码人员使用模板和模块快速轻松地构建品牌电子邮件。 为 Visual Editor 创建这些适用于任何 HTML — 并且不需要冗长的设置或复杂的专有语法来学习。 它也不会向您的代码添加任何额外内容。

首先，在您的 Litmus 帐户中打开现有电子邮件，或使用模板开始新电子邮件。 您可以在首次创建新电子邮件时执行此操作，也可以转到现有电子邮件并单击可视化编辑器菜单中的模板按钮。

然后只需在预览窗格中从电子邮件中选择一个元素即可在左侧的可视化编辑器中进行编辑。

有关如何使用可视化编辑器构建电子邮件的更多详细信息，请查看此博客文章：使用 Litmus 的可视化编辑器更快地构建更高质量的电子邮件。

如果您是 Litmus Enterprise 客户，您还可以灵活地拖放模块或内容块，在不牺牲质量的情况下使每封电子邮件都独一无二。

编码视图：HTML 和 CSS

Builder 允许您在 HTML 和 CSS 中进行编辑。 默认情况下，Builder 中的代码编辑器在HTML视图中打开一个文档，因为这是大多数电子邮件设计人员和开发人员所熟悉的。 在 HTML 视图中，您可以编写 HTML 和 CSS 来构建您的电子邮件。 您对代码所做的所有更改都会实时显示在预览窗格的右侧。

不过，Builder 的代码编辑器有第二个视图。 CSS视图允许您拆分 HTML 和 CSS，以便您可以分别处理它们。

虽然分离 HTML 和 CSS 使编码过程变得更加容易，但许多电子邮件客户端不支持电子邮件头部的外部样式表，甚至不支持 CSS。 相反，它们要求将样式直接应用于每一行 HTML 中的 HTML 元素。

手动内联 CSS 是一个繁琐的过程：无论何时对样式标记进行更改，都必须在代码的每一行中更新它。 Litmus Builder 会为您自动执行该步骤。 在构建电子邮件时将 HTML 和 CSS 分开，并将 CSS 内联过程留给 Builder 的自动 CSS 内联工具。

您可以在“设置”菜单中的 Builder 中打开 CSS 内联，该菜单可通过代码编辑器面板中的齿轮图标访问。 开启后，Builder 会自动将您的 CSS 添加到您的 HTML 文档中——无论是在您设计时还是在使用电子邮件预览测试您的营销活动时。

完成电子邮件活动后，Builder 会将您的 HTML 和 CSS 编译在一起，以便复制并粘贴到您的 ESP 中。 单击“导出”获取编译后的代码，然后选择“复制 HTML”或“下载 HTML”，这会将电子邮件和任何上传的资产直接下载到您的计算机。

复制 HTML 时，您将看到编译后的电子邮件大小。 这可以让您深入了解使用部分、CSS 内联和其他功能对标记的总权重有多大影响。 使用它来查看您的电子邮件的重量是否会影响加载速度 - 并确保您在 Gmail 的 102KB 显示限制下，以防止您的电子邮件被剪裁或裁剪。

虽然依赖 Builder 的 CSS 内联是加快电子邮件开发的一种方式，但 Builder 还掌握了一些技巧。

您可能还记得第 1 部分中的设置菜单除了内联 CSS 之外还有另外两个切换：自动完成和关闭标签。 启用这两个选项后，您可以更快地编写更可靠的广告系列。

自动完成允许您在代码编辑器中键入时查看 HTML 元素的选项列表。 当您忘记特定的 HTML 元素时，这可能会有所帮助。 只需开始输入，Builder 就会向您显示一个元素列表，您可以选择弹出到您的代码中。

厌倦了一遍又一遍地编写相同的代码行？ 通过添加对预先存在的 CSS 和图像的自动完成支持，加快您的开发过程。 对于任何预先存在的 CSS（无论是嵌入在样式块中、CSS 选项卡中还是部分中），当使用 class 或 id 属性时，这些值将作为自动完成选项提供。

此外，上传到 Builder 的任何图像都将具有图像文件名作为源属性的自动完成选项，以及宽度/高度属性和 CSS 属性的宽度/高度尺寸。

关闭标签选项在编码时自动关闭 HTML 标签。 缺少关闭 HTML 标记会导致电子邮件中出现各种问题，因此关闭标记是确保您不会因恶意打开标记而遇到任何呈现问题的好方法。

我最喜欢的 Builder 代码编辑器功能之一是其内置的Emmet集成。 Emmet 允许您键入快捷方式，然后将其扩展为完整的代码片段。 虽然 Emmet 最初是作为桌面文本编辑器的插件构建的，但我们已将 Emmet 直接构建到代码编辑器中——让您可以利用 Emmet 的强大功能，而无需自己下载或安装任何东西。

我们整理了一份快速指南，以帮助您开始在自己的电子邮件中使用 Emmet。

Builder 的更多功能可让您加快开发工作流程，包括使用Snippets 和 Partials以及Tracking Manager 。 我们将在 Litmus Builder Essentials 系列的最后一篇文章中更深入地研究这些内容。

测试您的电子邮件

一旦您开始在 Builder 的代码或可视化编辑器中创建电子邮件，您将需要在实际的电子邮件客户端中预览和测试它。 这就是预览窗格发挥作用的地方。 Builder 的预览窗格允许您使用电子邮件预览在 90 多种不同的电子邮件客户端、设备和浏览器中预览、导航和测试您的营销活动。

默认情况下，预览窗格会加载电子邮件的浏览器视图。 此视图使用 Web 浏览器的渲染引擎来显示您的电子邮件，并允许您在构建时快速查看对电子邮件的更改。 您甚至可以测试电子邮件中的链接和交互性等内容。

代码编辑器中的浏览器视图还允许您使用预览窗格工具栏中的一些工具。

在预览窗格工具栏中，您将看到一个齿轮图标。 单击齿轮时，会出现一个下拉菜单，其中包含以下选项：

• 弹出：在单独的窗口中打开整个预览窗格，如果您想在代码编辑器中查看更多代码或利用多个显示，这将非常有用。
• 切换图像：打开和关闭电子邮件中的图像，这对于模拟默认阻止图像的电子邮件客户端很有用。 将此视为您的友好提醒，对任何图像使用 ALT 文本，如果丢失，会影响您的信息。
• 切换网格线：在电子邮件中的所有单个元素周围切换蓝色网格，允许您单击它们并直接导航到代码编辑器中的那段代码。 Dreamweaver 的用户们正在看着您。
• 移动：快速切换预览窗格的宽度以模仿更窄的移动设备屏幕尺寸。
• 桌面：快速切换预览窗格的宽度以模仿更宽的桌面设备屏幕尺寸。

需要电子邮件中元素的尺寸？ 通过简单的悬停，轻松查看特定元素的尺寸，例如表格单元格或图像。

预览窗格内的第二个视图是Email Previews 。 此视图允许您查看您的电子邮件活动在 90 多种不同的电子邮件客户端、设备和浏览器中的外观。 单击预览窗格工具栏中的电子邮件预览进行访问。

在“电子邮件预览”视图中，您将看到预览窗格工具栏中的图标被一个按钮替换为“选择客户端” 。 这将打开一个模式，您可以在其中准确选择要测试的电子邮件客户端。 请注意，可以选择基于平台（桌面、网络、平板电脑/移动设备）或基于供应商或设备（Microsoft Outlook、Gmail、iOS 客户端等）选择所有客户端的选项。 这允许您快速选择特定的客户端组进行测试，而不是默认在所有客户端中进行测试。

一旦您选择了电子邮件客户端，就可以轻松测试对代码的更改。 每次您在 Builder 中保存对电子邮件的更改时，都会运行电子邮件预览。 只需更新您的代码，按 Command ⌘ + S （在 Mac 上）或CTRL + S （在 PC 上），然后看着 Litmus 在您选择的电子邮件客户端中返回您的电子邮件活动的更新屏幕截图。

在电子邮件预览视图中，您可以选择单个电子邮件客户端来展开这些客户端，从而允许您在该客户端中查看电子邮件的完整屏幕截图。

对于某些电子邮件客户端，您可以在预览中打开和关闭图像。 也可以查看部分客户端的代码分析。 代码分析显示有关某些客户端的代码中潜在问题的信息，通常突出显示这些客户端不完全支持的 HTML 和 CSS。 切换图像和代码分析都可以通过预览窗格工具栏访问。

此外，您可以在 40 个移动客户端上切换移动设备视图，让您准确查看电子邮件在实际设备上的呈现方式。

谈到客户端如何呈现您的电子邮件，您还可以查看 HTML 的处理版本。 许多电子邮件客户端会操纵您发送给他们的代码，从而在您的 HTML 和 CSS 中产生有问题的更改。 您可以通过查看已处理的 HTML 按钮来准确了解代码的更改方式，该按钮可以通过单击预览弹出窗口中的图标找到（见下文）。 您的代码编辑器将显示处理后的 HTML，从而比以往更容易找到棘手的错误。

许多电子邮件客户端也内置了上下文帮助。 如果可用，您会在电子邮件预览上方看到警报。 单击“更多信息”以显示这些电子邮件客户端中常见问题的解释，以及解释如何解决这些问题的文章的链接。

最后，您可以使用预览窗格工具栏中电子邮件客户端名称两侧的箭头图标在客户端之间快速切换。 您也可以使用键盘上的箭头。

在特定客户端中查看完电子邮件后，关闭完整预览，这将使您返回到电子邮件预览网格。

立即开始使用 Builder 进行编码

既然您了解了 Builder 的使用方式，为什么不试一试呢？ 无论您使用何种编码技术，Litmus Builder 都可以帮助您比以往更快地开发更可靠的活动。 而且，如果您是团队的一员，请查看 Litmus Builder Essentials 的下一部分，了解 Builder 如何改进跨团队和组织的工作流程。

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

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

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

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