跳转到主要内容

导入自定义 HTML 电子邮件（Email）模板

将来自 Canva、Mailchimp、Klaviyo 或自定义代码的 HTML 电子邮件（Email）模板导入 Omnisend。了解如何修复常见错误、正确托管图片并解决空白预览问题。

作者：Ira

通过导入您已设计的电子邮件（Email）模板来节省时间。从 Canva、Mailchimp、Klaviyo 或自定义代码上传 HTML 文件，然后将它们用于 电子邮件（Email）营销活动 和 自动化流程（Automation）工作流。

本指南将向您展示如何导入模板、排除常见错误，并确保图片正确显示。

开始之前

了解 HTML 要求：
导入前，请查看 电子邮件 HTML 基础知识 和 自定义 HTML 内容块，了解完整的支持标签列表。

⚠️ 重要提示： <!DOCTYPE HTML> 和<head> 标签必须在上传前移除。</head>您可以手动在文本编辑器中完成此操作，或使用htmlcorrector.com 自动去除这些标签以及其他不支持的元素。

两种导入方法：

  1. 导入 HTML (上传 .html 文件) – 适用于 Mailchimp 用户

  2. 粘贴代码 (复制/粘贴 HTML) – 适用于 Klaviyo 和 Canva 用户

从 Canva 导入

Canva 是一款流行的设计工具，但其 HTML 导出需要额外的步骤才能在 Omnisend 中使用。

步骤 1.从 Canva 导出

在 Canva 中，前往 Share → Download → File type: HTML。Canva 将下载一个包含以下内容的文件夹：

  • 电子邮件（Email）.html (您需要的文件)

  • 一个 images 文件夹（您需要单独托管这些文件 – 详见下文）

步骤 2.在文本编辑器中打开 HTML 文件

  • Windows: 右键点击email.html →打开方式 → Notepad

  • Mac：右键点击email.html →打开方式 → TextEdit

⚠️ 请勿双击文件 – 它将改为在您的浏览器中打开。

步骤 3.清理 HTML

  1. 删除顶部的整个 <!DOCTYPE html> 行

  2. 删除 <head></head> 和 之间所有内容（包括标签本身）

  3. 复制剩余代码并将其粘贴到htmlcorrector.com

  4. 点击 Clean HTML 并复制结果

步骤 4.托管您的图片

Omnisend 无法直接导入图片文件。 Canva 的图片文件夹无法使用 – 图片必须在线托管并使用完整 URL (例如，https://yoursite.com/image.jpg).

选项 A: 上传到 Omnisend

  1. 在 Omnisend 中，创建一个新的电子邮件（Email）营销活动（Campaign）

  2. 添加图片区块 → 上传每张图片

  3. 右键点击图片 → 复制图片网址

  4. 在您的 HTML 中，将本地图片路径 (images/photo.jpg) 替换为 Omnisend URL。

选项 B：使用外部托管
上传图片到 Imgur、Cloudinary 或您的网站，然后更新您的 HTML 中的图片 URL。

步骤 5.粘贴代码

前往 店铺设置 → 已保存的模板 → 导入模板 → 粘贴代码，然后粘贴您清理过的 HTML。

导入过程

步骤 1.前往 Store Settings

前往 店铺设置 → 已保存的模板。

步骤 2.查看已保存的模板

您将看到：

选项 1.导入 HTML 文件

如果您有一个 .html 文件保存在您的电脑上：

  1. 点击 Import HTML

  2. 添加您的模板名称

  3. 选择 HTML 文件

  4. 点击 "Upload"

如果您看到 "Sorry, we couldn't import HTML template"：

常见原因：

  • HTML 仍然包含 <doctype></doctype> 或 <head></head> 标签 (请先移除这些)

  • 文件包含不支持的元素（<iframe>、<script>、无效的 CSS）

  • 文件格式错误（.zip、.txt 或文件夹）– 必须是 .html 文件

修复：清理您的代码使用htmlcorrector.com, 然后尝试选项 2：改为粘贴代码

您导入的模板将显示在已保存模板页面上，并在创建营销活动和自动化流程（Automation）时可用。

选项 2.粘贴 HTML 代码

如果您已复制 HTML 代码（例如，来自 Canva、Klaviyo 或其他工具）：

  1. 点击 粘贴代码

  2. 添加您的模板名称

  3. 粘贴清理过的 HTML

  4. 点击 "Import"

您的模板将显示在“Saved templates”页面，并可在营销活动和自动化流程（Automation）中使用。

编辑已导入的模板

您可以编辑您的模板的内容和设计。点击电子邮件（Email）内容以打开 HTML 编辑器。

⚠️ 重要提示:

如果您从其他电子邮件（Email）服务提供商处转移模板，您将需要手动删除：

  • 所有个性化标签

  • 在浏览器中查看链接

  • 取消订阅链接

Omnisend 将自动添加自己的版本。

注意：图片可能无法在测试电子邮件（Email）或预览中正确显示。这是预期行为 — 测试电子邮件（Email）使用临时图片链接，这些链接并非总能正确渲染（尤其是在 Gmail 和 Outlook Web 中）。为了验证您的设计，请将营销活动（Campaign）发送到真实的测试细分（Segment）或您自己的电子邮件（Email）地址。图片将在正式营销活动（Campaign）中正确显示。

故障排除

为什么我的 HTML 在预览中是空白的？

空白预览通常是由不支持的 HTML 标签或格式错误造成的。

修复：

  1. 使用 htmlcorrector.com 清理您的 HTML

  2. 删除 <DOCTYPE>、<head>、<iframe> 和 <script> 标签

  3. 确保图片使用完整的 URL，而非本地文件路径

  4. 首先使用简单的 HTML 进行测试 (例如，<p>Test</p>)，以确认该区块有效，然后逐步添加您的内容。

为什么导入后看不到图片？

Omnisend 无法访问本地图片文件。 如果您的 HTML 引用了存储在您电脑上的图片 (例如，images/photo.jpg)，它们将无法显示。

修复：在线托管图片并更新您的 HTML 中的 URL。请参阅“托管您的图片”以上部分。

"text contains prohibited HTML tags" 是什么意思？

此错误表示您的 HTML 包含在电子邮件（Email）中不支持的标签。常见原因：

  • <doctype> 和</doctype><head> 标签</head>

  • <iframe> (嵌入内容)</iframe>

  • <script> (JavaScript)</script>

  • 复杂的 CSS 或字体样式

修复：使用htmlcorrector.com 自动删除这些标签，或者手动删除它们。请参阅自定义 HTML 内容块 以查看支持的完整标签列表。

常见问题

我可以上传 Canva 的图片文件夹以及 HTML 文件吗？

否Omnisend 只接受 HTML 代码 – 它无法处理图片文件夹或本地图片文件。您需要单独上传图片，并更新您的 HTML 中的 URL。参见上方"Host your images"。

导入的 HTML 看起来与我的设计不同。为什么？

电子邮件（Email） HTML 的渲染方式与网页 HTML 不同。常见问题：

  • 电子邮件（Email）客户端会剥离复杂的 CSS – Gmail、Outlook 和 Apple Mail 不支持许多现代 CSS 属性

  • Canva 设计使用网页格式 – Canva 针对网页进行优化，而非电子邮件（Email）客户端

  • 字体可能无法加载 – 自定义字体在电子邮件（Email）中通常会恢复为备用字体

解决方案：

  1. 使用 htmlcorrector.com 清理不支持的代码

  2. 简化您的设计：使用基本的 HTML 标签和内联 CSS

  3. 考虑在 Omnisend 的 Omnisend邮件构建器（Email Builder）中重建，以获得更好的兼容性。开始使用 Omnisend邮件构建器（Email Builder）.

  4. 在发布之前，请在多个客户端（例如 Gmail、Outlook、Apple Mail）上测试您的电子邮件（Email）。

如需进一步指导或帮助，请联系我们屡获殊荣的支持团队，您可以通过应用内聊天或发送电子邮件至 [email protected]。

相关文章
这是否解答了您的问题？