如何创建真正完美运行的自定义 Mailchimp 模板

已发表: 2021-06-22

从头开始编写每封电子邮件需要很长时间，因此拥有一个可重复使用、久经考验的电子邮件模板可以为您的工作流程效率创造奇迹。但是，根据我们的电子邮件服务提供商状况报告，构建自己的模板本身也是一种冒险，即使对于 Mailchimp 来说也是如此，它是第二大最受欢迎的电子邮件服务提供商 (ESP)。

您可能有一种首选的电子邮件开发方式，但是当涉及到 Mailchimp 的自定义模板时，重要的是要遵循一些非常具体的指导方针，以确保您不会因为让模板工作而浪费时间。我说这是我自己损失了很多小时！

在我引导您创建自定义 Mailchimp 模板时，请注意您构建代码的方式、创建按钮的方式，甚至图像的大小都需要从 Mailchimp 技术观点来解决。

这就是为什么我们在这篇博文中与 Mailchimp 和其他专家合作，以确保您的 Mailchimp 模板能够完美运行。

Mailchimp 的预建模板和自定义模板的区别

Mailchimp 拥有大量可用于创建电子邮件的模板库。它们中的每一个都可以在拖放编辑器和多个电子邮件模块中进行编辑，以供选择以布置您的内容。

那么为什么要创建自定义模板呢？

Mailchimp 的模板具有高度可编辑性，因此任何品牌都可以将它们与自己的品牌颜色和样式一起使用。这使得监控他们的使用以及品牌标识在电子邮件之间保持一致变得具有挑战性。创建自定义模板可确保您在模板中构建的许多样式不会被更改。

此外，自定义模板的编辑环境不同。没有拖放编辑器。相反，根据您实现的模板语言，创建可以复制、切换或删除的模块和元素。这是防止不需要的布局和编辑的另一种方法。

如何编写自定义 Mailchimp 模板

准备好创建自己的 Mailchimp 电子邮件模板了吗？继续阅读有关正确操作所需的提示和技巧。

考虑您的目标和最终用户

在开始之前，首先要考虑模板的目标以及将要使用它的人，这一点很重要。例如，您可能需要一个具有很多细节和灵活性的模板。或者，您的团队中技术含量较低的成员可能需要简单易行。

电子邮件营销顾问和营销推动者 Joolz Joseph 说：

乔尔兹约瑟夫

“问问自己'我们想通过这个实现什么？'

它是一个可用于多种电子邮件类型的全能模板，因此需要对不同的块有很大的灵活性吗？或者更严格的内容，例如促销模板、入门系列或时事通讯？

具有许多可以调整的块的模板有很大的优势，但有时 2 或 3 个较短的模板对于可能被大量选项淹没的人来说更容易管理。

开始时的这个简短考虑使您能够在考虑目标和最终用户的情况下构建模板。

例如，促销模板需要关注主要目标和号召性用语 (CTA)，而时事通讯可能有多个不同的 CTA。

这一切都需要反映在您的模板设计中。如果他们的选择有限，这也将使运行促销的人更容易加入相关内容！

做一个能捕捉所有可能性的单一模板可能会导致一封带有品牌效应的电子邮件，但效果不如预期，因此值得先退后一步，看看你想要实现什么以及什么样的模板（或模板）最能帮助您做到这一点。”

谢谢，Joolz，给小费！一旦您知道模板的目标，您就可以开始构建。

嵌入您的 CSS 样式

值得一提的第一件事是 Mailchimp 在您将模板保存在平台中时自动内联您嵌入的 CSS 样式。因此，当您开始开发工作时，您可能会发现更容易嵌入所有样式并限制代码膨胀。

创建模块行

在构建代码时，请考虑您希望可编辑的块，尤其是那些您希望能够重新排序的块。这些块应该位于行内，例如：

<!--modules that can be re-ordered-->
<!--module 1-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 1-->
<!--module 2-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 2-->

关闭父表后，您将无法重新排序超过这一点的行。

考虑按钮限制

有很多方法可以对按钮进行编码。但是，只有带衬垫的按钮才能在您的自定义 Mailchimp 模板中使用。这是因为应用于可编辑按钮的锚标记的许多样式会被自动删除。 VML 代码的格式以及您放置在锚标记中的任何跨度也可能会进行调整。

填充按钮方法意味着只有按钮的文本是可点击的，因为您需要将填充和其他按钮样式应用到父表格单元格。 Mailchimp 的大量文档提供了有关按钮代码的更多详细信息（以及其他 HTML 电子邮件限制，如果您好奇的话）。

使用精确大小的图像作为可编辑的占位符

像按钮一样，图像在可编辑时会产生一些代码。这一次，删除的是定义宽度和高度的 HTML 属性。 Outlook 依赖于这些，Mailchimp 编辑环境还将呈现图像的实际大小，直到您使用编辑器将这些属性放回原处。

这使得在电子邮件中使用视网膜图像（即两倍大小的图像）变得有点棘手。

我建议对您编码到模板中的任何占位符使用 1x 图像。然后，当模板用于活动时，将占位符切换为 2x 图像（视网膜图像），在图像编辑器的设置选项卡中定义宽度和高度。

应用 Mailchimp 的模板语言

要在模板中定义可编辑区域，您需要实现 Mailchimp 的模板语言。有大量可用的文档概述了您需要包含的内容，具体取决于您创建的模板类型。

对于可能被多个品牌使用的高度可定制的模板，您可以使 CSS 样式可编辑。为此，请遵循 Mailchimp 关于可编辑样式的指南。

出于本演练的目的，我们将了解如何创建将可编辑性限制为仅内容的模板。为此，我们需要向模板中的 HTML 元素添加以下语言：

mc:edit用于为模板中的特定元素提供内容编辑操作。 确保为模板中的每个实例使用唯一名称。

mc:hideable用于为模板中的特定元素提供隐藏/显示操作。

mc:label是一个可选标签，用于命名应用程序中的可编辑部分。

mc:repeatable用于为模板中的特定元素提供复制操作。

mc:variant用于提供一种在 HTML 的离散块之间切换的方法。

有关 Mailchimp 模板语言的更多详细信息，这是我的首选文档。

包括 Mailchimp 合并标签

您可以在模板和活动中利用许多合并标签。我建议应用的标签是：

*|MC_PREVIEW_TEXT|*
将此预览文本合并标签添加到您的构建中，以确保在活动设置期间，添加到预览文本字段的内容被注入到电子邮件中。在我们的预览文本在 Mailchimp 中不起作用后，我们通常添加到 Litmus 电子邮件中的预览文本黑客来创建空格。不要害怕。 Mailchimp 记录了为自定义模板执行此操作的理想方法。

*|取消订阅|*
在模板的页眉和/或页脚中，将此合并标签添加到您的取消订阅链接，以确保人们可以选择将自己从您的列表中删除。另外，这是一项法律要求，所以您绝对不想忘记这一点。

*|UPDATE_PROFILE|*
让订阅者有机会更新他们的信息或管理他们的偏好。

*|存档|*
将此合并标签添加到“在线查看”链接，让人们有机会在他们的网络浏览器中查看您的电子邮件。

如何将模板添加到 Mailchimp

现在您已经对模板进行了编码，您可以开始使用它了。

前往“活动 > 电子邮件模板”，然后单击“创建模板”按钮以导入您的模板。

将模板带入 Mailchimp 的最简单方法是上传包含 HTML 和图像的 zip，因为 Mailchimp 将为您管理图像路径。

Mailchimp：为您的模板选择一个起点

为模板命名并导航到 zip 文件后，模板将在模板编辑器中打开。在这里，您可以进行调整、访问存储图像和其他资产的内容工作室，并测试您的模板渲染。

在此编辑器中完成后，您可以保存并关闭，您的模板就可以使用了。

确保您的模板在 Mailchimp 中有效

有许多常见的 HTML 错误，因此在将 Mailchimp 发送给您的团队、客户或其他人使用之前，最好先了解一下 Mailchimp 中的编辑体验是什么样的。为此，请前往主菜单上的“创建”，然后选择“电子邮件”并坚持“常规活动”。

您可以添加一些营销活动详细信息，例如主题行和预览文本。这将使您有机会检查是否正确实施了合并标签和预览文本代码。

单击“设计电子邮件”后，您将能够选择要使用的模板。在“保存的模板”选项卡中找到您的自定义模板。

在 Mailchimp 中选择一个模板

选择模板后，您将进入 Mailchimp 编辑环境，您可以在其中测试所有可编辑部分。

要编辑可编辑元素，只需单击它，右侧就会出现一个编辑窗格。

编辑 Mailchimp 模板中的元素

需要注意的是：有时重新排列我的内容块不起作用，因此如果您在单击一个块时看不到带有向上和向下箭头的图标，请尝试复制您想要重新排序的块。将要移动的块拖动到新位置后，您可以删除不需要的额外块。

重新排列 Mailchimp 模板中的块

不要忘记测试电子邮件渲染

与往常一样，查看不同的电子邮件客户端如何呈现您的模板非常重要，尤其是在使用它创建电子邮件活动之后。

正是通过这样的测试，我发现了我的模板问题并遇到了 Mailchimp 的一些代码删除怪癖。您可以通过将“预览”和“发送测试电子邮件”发送到您的收件箱或 Litmus 测试地址来轻松地在营销活动和模板编辑器中进行测试，以进行彻底、自动化的预发送测试。

Litmus 和 Mailchimp 还以多种方式集成，以帮助您尽可能彻底和有效地测试电子邮件。前往“进入预览模式”并选择“收件箱”选项卡，以在 Mailchimp 的收件箱预览中运行 Litmus 驱动的电子邮件测试。使用 Litmus Plus 或 Enterprise 计划，您可以获得额外的测试和节省时间的集成，包括在使用 Chrome 中的 Litmus 扩展程序构建时测试关键的预发送元素的能力，以及在 Litmus 和 Mailchimp 之间同步电子邮件的能力。