如何使用 Gmail 发送自定义 HTML

已发表: 2024-03-30

HTML 电子邮件已成为现代电子邮件营销的关键组成部分。 它们可让您创建具有视觉吸引力和交互式的电子邮件消息,使您的电子邮件更具吸引力和效果。 它们对企业至关重要,因为它们可以以纯文本无法做到的方式突出显示产品、促销和品牌。 它们还可以更好地跟踪和分析,帮助您了解收件人如何与您的电子邮件互动。

过去,Gmail允许用户在电子邮件编辑器中直接输入和编辑HTML代码。 此功能受到那些​​想要广泛个性化和设计电子邮件的人的青睐。 然而,为了增强安全性并简化用户体验,Gmail 决定删除在电子邮件编辑器中直接输入 HTML 代码的功能。

这一变化促使用户探索通过 Gmail 发送自定义 HTML 电子邮件的替代方法,我们将在本文中深入探讨。

跳至此处的某个部分,或阅读完整指南:

  • 通过 Gmail 发送自定义 HTML 电子邮件
  • 将渲染的 HTML 直接复制到 Gmail 中
  • 使用自定义 HTML 模板的限制
  • 纯文本电子邮件与 HTML 电子邮件
  • 使用 Mailmeteor 发送个性化 HTML 电子邮件!

通过 Gmail 发送自定义 HTML 电子邮件

Gmail 使用所见即所得 (WYSIWYG) 编辑器,这意味着直接发送原始 HTML 代码不是一个可行的选择。 因为收件人实际上会看到原始 HTML 代码而不是呈现的文档。

例如,看看这个模拟电子邮件模板。 Gmail 中呈现的 HTML

曾经有一段时间,您可以直接在 Gmail 中制作类似的内容,但如果您尝试在 Gmail 编辑器中复制并粘贴 HTML 代码,则会发生以下情况: Gmail 中的纯文本 HTML

由于 Gmail 使用所见即所得编辑器,这会导致收件人收到与您在此处看到的完全相同的内容,即一封以纯文本编写的 HTML 代码的电子邮件: Gmail 中的收件人 HTML

然而,有一个实用的解决方法。 用户可以将呈现的 HTML 电子邮件复制并粘贴到 Gmail 编辑器中以发送自定义 HTML 电子邮件。 通过此方法,您可以在 Gmail 的限制范围内创建具有视觉吸引力的自定义电子邮件。

将渲染的 HTML 直接复制到 Gmail 中

这种方法实际上比看起来简单得多,您只需在浏览器中打开电子邮件模板,然后将其所有内容复制并粘贴到 Gmail 编辑器中即可。 这是您需要做的:

  1. 准备您的 HTML 代码
    • 打开文本编辑器,例如记事本 (Windows) 或 TextEdit (Mac)。
    • 将 HTML 代码写入或粘贴到文本编辑器中。 该代码可以包含文本、图像、链接和格式,就像标准网页一样,但有一些限制,我们将在稍后讨论。
    • 使用“.html”扩展名保存文件,例如“template.html”。
  2. 在网络浏览器中预览
    • 双击刚刚创建的 HTML 文件,在默认 Web 浏览器中将其打开。 这将使您的电子邮件与收件人看到的完全一样。
    • 如果您愿意,您可以返回文本编辑器并更改内容,只需记住在完成更改后保存文件,并刷新浏览器页面以更新您的更改。
  3. 选择全部并复制
    • 在浏览器中,按 Ctrl+A (Windows) 或 Cmd+A (Mac) 选择 HTML 电子邮件中的所有内容。
    • 接下来,按 Ctrl+C (Windows) 或 Cmd+C (Mac) 复制所选内容。 您也可以右键单击并从菜单中选择“复制”。
  4. 粘贴到 Gmail
    • 打开 Gmail 并开始撰写新电子邮件。
    • 单击要插入 HTML 电子邮件内容的电子邮件正文。 您无法在主题行中插入 HTML,因此您唯一的选择是电子邮件正文。
    • 现在,按 Ctrl+V (Windows) 或 Cmd+V (Mac) 粘贴从浏览器复制的内容。 或者您可以右键单击并从菜单中选择“粘贴”。
    • HTML 电子邮件应直接粘贴到 Gmail 编辑器中,您应该会看到它的呈现方式如下图所示。 在 Gmail 中粘贴 HTML
  5. 发送电子邮件
    • 使用主题、收件人以及任何其他文本或元素来完成您的电子邮件。
    • 单击“发送”按钮,您的自定义 HTML 电子邮件将发送给收件人。

如果一切顺利,您的收件人将收到完美呈现的电子邮件,就像您创建的 .html 文件中一样。 我们建议您先将电子邮件发送给自己,然后再将其发送给目标收件人,以确保 HTML 代码中没有错误。

使用 HTML 编辑器浏览器扩展

对于希望更好地控制电子邮件的原始 HTML 并熟悉手动编辑的精通技术的用户来说,使用 HTML 编辑器扩展是一个可行的解决方案。

这些扩展广泛适用于 Google Chrome 等流行浏览器,为经验丰富的用户提供了在通过 Gmail 发送电子邮件之前手动编写和编辑 HTML 代码的方法。 cloudHQ 提供的免费 G​​mail HTML 编辑器是 Chrome 用户最喜欢的选项之一。

只需安装该扩展程序,然后转到 Gmail 即可访问分屏 HTML 编辑器,您可以在其中进行更改并实时查看其效果,这一切都可以在 Gmail 帐户中轻松完成。

使用自定义 HTML 模板的限制

不幸的是,即使您有能力编写自己的 HTML 代码,在开始此旅程之前您也需要了解一些限制。 以下是您需要了解的内容:

和字体说再见!

遗憾的是,Gmail 不提供将自定义网络字体导入 HTML 电子邮件的方法。 您只能使用标准字体,这可能会限制您的设计选择和品牌机会。

如果您确实需要在某个地方使用自己的品牌,您别无选择,只能使用带有文字的图像。 但您也不能将这些图像作为电子邮件本身的一部分发送,这将引出我们的下一点。

图片必须公开托管

您无法在电子邮件中链接到计算机上的图像并将其发送给其他人,它可能会显示在您的本地浏览器中,但当您将其添加到 Gmail 编辑器时,它将拒绝加载。

在我们的示例模板中,我们使用了占位符中的图像并放置了一只小猫,因为两者都是公开可用的。 您的图像还必须公开可用并托管在互联网上的某个位置。 这可以是您自己的网站、公共 Google 云端硬盘文件夹或在线图像共享网站。

不支持外部样式表

外部样式表在您的电子邮件中不起作用。 如果您精通 CSS,请考虑使用嵌入式 CSS 和内联样式来实现电子邮件所需的格式和样式。

此限制可能会增加设计过程的复杂性,因为您需要将所有样式直接包含在 HTML 代码中。 同时,让您的样式尽可能简单,您永远不知道收件人正在使用什么浏览器或电子邮件应用程序,因此最好坚持使用标准 CSS 样式以获得最大兼容性。

坚持基于表格的布局

虽然许多现代 HTML 使用<div>元素进行布局和样式设计,但电子邮件仍然使用良好的旧式基于表格的布局。 因此,如果您需要创建任何网格元素或框,则需要使用各种表格标签,例如<table><tr>和 `<td> 。

这是因为并非每个人都使用相同的电子邮件服务提供商,因此即使 Gmail 开始支持新功能,仍然会有无数其他人落后。 渲染不当的电子邮件会给人留下不好的第一印象,因此最好坚持对每个人都有效的方式,并专注于相关电子邮件的实际内容。

纯文本电子邮件与 HTML 电子邮件

发送纯文本电子邮件和 HTML 电子邮件之间的选择对于确定消息的有效性和影响力起着关键作用。 两种格式都有各自的优势,可以满足独特的需求和偏好。

让我们强调一下这两种电子邮件格式之间的主要区别:

特征纯文本电子邮件HTML 电子邮件
格式和样式仅限纯文本,无样式支持丰富的格式和样式
图像和媒体不支持嵌入图像可以包含图像和多媒体
链接和 CTA 按钮基本超链接时尚的链接和交互式按钮
布局与结构线性、最小结构复杂的布局是可能的
个性化仅限于基于文本的个性化广泛的个性化选项,包括将个性化图像用于更高级的用例
跟踪和分析跟踪能力有限高级跟踪和分析
兼容性普遍兼容需要大量的测试和开发时间才能完全兼容所有设备
参与度和影响力视觉吸引力有限,仅传达信息增强参与度和影响力

虽然纯文本电子邮件以其简单性和通用兼容性而闻名,但 HTML 电子邮件为创造力和参与度提供了更广泛的画布。

使用 Mailmeteor 发送个性化 HTML 电子邮件!

Mailmeteor 是一款功能强大的电子邮件营销工具,可简化通过 Gmail 向多个收件人发送个性化 HTML 电子邮件的过程。 这个方便的插件与您的 Gmail 和 Google 表格无缝集成,让您轻松创建和发送个性化电子邮件。

  • 电子邮件个性化:通过使用 Google 表格中数据的自定义合并标签,或使用包含名称、公司详细信息或任何其他自定义变量等字段的网络平台,创建高度个性化的电子邮件。
  • HTML 模板编辑器:利用高级 HTML 编辑器并将个性化数据直接插入到您的电子邮件模板中。
  • 电子邮件跟踪:在电子邮件离开邮箱后对其进行跟踪,查看收件人是否打开它们并运行 A/B 测试并提供可靠的反馈。
  • 模板库:访问预先设计的电子邮件模板库或创建您自己的 HTML 电子邮件模板以在您的营销活动中使用。

本指南由 Mailmeteor 的内容编辑 Guy Bou Samra 撰写。 Mailmeteor 是一款简单且注重隐私的电子邮件软件。 它受到全球数百万用户的信赖,通常被认为是使用 Gmail 发送新闻通讯的最佳工具。 尝试一下,让我们知道您的想法!

➤ 使用 Mailmeteor 通过 Gmail 发送电子邮件,节省时间
出版于:
  • 电子邮件营销
  • 邮箱
  • 指导