如何使用 Gmail 发送自定义 HTML
已发表: 2024-03-30HTML 电子邮件已成为现代电子邮件营销的关键组成部分。 它们可让您创建具有视觉吸引力和交互式的电子邮件消息,使您的电子邮件更具吸引力和效果。 它们对企业至关重要,因为它们可以以纯文本无法做到的方式突出显示产品、促销和品牌。 它们还可以更好地跟踪和分析,帮助您了解收件人如何与您的电子邮件互动。
过去,Gmail允许用户在电子邮件编辑器中直接输入和编辑HTML代码。 此功能受到那些想要广泛个性化和设计电子邮件的人的青睐。 然而,为了增强安全性并简化用户体验,Gmail 决定删除在电子邮件编辑器中直接输入 HTML 代码的功能。
这一变化促使用户探索通过 Gmail 发送自定义 HTML 电子邮件的替代方法,我们将在本文中深入探讨。
跳至此处的某个部分,或阅读完整指南:
- 通过 Gmail 发送自定义 HTML 电子邮件
- 将渲染的 HTML 直接复制到 Gmail 中
- 使用自定义 HTML 模板的限制
- 纯文本电子邮件与 HTML 电子邮件
- 使用 Mailmeteor 发送个性化 HTML 电子邮件!
通过 Gmail 发送自定义 HTML 电子邮件
Gmail 使用所见即所得 (WYSIWYG) 编辑器,这意味着直接发送原始 HTML 代码不是一个可行的选择。 因为收件人实际上会看到原始 HTML 代码而不是呈现的文档。
例如,看看这个模拟电子邮件模板。
曾经有一段时间,您可以直接在 Gmail 中制作类似的内容,但如果您尝试在 Gmail 编辑器中复制并粘贴 HTML 代码,则会发生以下情况:
由于 Gmail 使用所见即所得编辑器,这会导致收件人收到与您在此处看到的完全相同的内容,即一封以纯文本编写的 HTML 代码的电子邮件:
然而,有一个实用的解决方法。 用户可以将呈现的 HTML 电子邮件复制并粘贴到 Gmail 编辑器中以发送自定义 HTML 电子邮件。 通过此方法,您可以在 Gmail 的限制范围内创建具有视觉吸引力的自定义电子邮件。
将渲染的 HTML 直接复制到 Gmail 中
这种方法实际上比看起来简单得多,您只需在浏览器中打开电子邮件模板,然后将其所有内容复制并粘贴到 Gmail 编辑器中即可。 这是您需要做的:
- 准备您的 HTML 代码
- 打开文本编辑器,例如记事本 (Windows) 或 TextEdit (Mac)。
- 将 HTML 代码写入或粘贴到文本编辑器中。 该代码可以包含文本、图像、链接和格式,就像标准网页一样,但有一些限制,我们将在稍后讨论。
- 使用“.html”扩展名保存文件,例如“template.html”。
- 在网络浏览器中预览
- 双击刚刚创建的 HTML 文件,在默认 Web 浏览器中将其打开。 这将使您的电子邮件与收件人看到的完全一样。
- 如果您愿意,您可以返回文本编辑器并更改内容,只需记住在完成更改后保存文件,并刷新浏览器页面以更新您的更改。
- 选择全部并复制
- 在浏览器中,按 Ctrl+A (Windows) 或 Cmd+A (Mac) 选择 HTML 电子邮件中的所有内容。
- 接下来,按 Ctrl+C (Windows) 或 Cmd+C (Mac) 复制所选内容。 您也可以右键单击并从菜单中选择“复制”。
- 粘贴到 Gmail
- 打开 Gmail 并开始撰写新电子邮件。
- 单击要插入 HTML 电子邮件内容的电子邮件正文。 您无法在主题行中插入 HTML,因此您唯一的选择是电子邮件正文。
- 现在,按 Ctrl+V (Windows) 或 Cmd+V (Mac) 粘贴从浏览器复制的内容。 或者您可以右键单击并从菜单中选择“粘贴”。
- HTML 电子邮件应直接粘贴到 Gmail 编辑器中,您应该会看到它的呈现方式如下图所示。
- 发送电子邮件
- 使用主题、收件人以及任何其他文本或元素来完成您的电子邮件。
- 单击“发送”按钮,您的自定义 HTML 电子邮件将发送给收件人。
如果一切顺利,您的收件人将收到完美呈现的电子邮件,就像您创建的 .html 文件中一样。 我们建议您先将电子邮件发送给自己,然后再将其发送给目标收件人,以确保 HTML 代码中没有错误。
使用 HTML 编辑器浏览器扩展
对于希望更好地控制电子邮件的原始 HTML 并熟悉手动编辑的精通技术的用户来说,使用 HTML 编辑器扩展是一个可行的解决方案。
这些扩展广泛适用于 Google Chrome 等流行浏览器,为经验丰富的用户提供了在通过 Gmail 发送电子邮件之前手动编写和编辑 HTML 代码的方法。 cloudHQ 提供的免费 Gmail 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 电子邮件模板以在您的营销活动中使用。
- 电子邮件营销
- 邮箱
- 指导