Email Template Builder：HTML邮件创建
块编辑器构建邮件模板。创建带标题、按钮、图片和双栏布局的响应式HTML邮件。导出HTML。
什么是 Email Template Builder？
Email Template Builder 是一款可视化块编辑器，让您直接在浏览器中创建响应式 HTML 邮件模板。您可以添加内容块——标题、文本段落、按钮、图片、分隔线、双栏布局和页脚——使用上下控件调整顺序，并通过属性面板编辑每个块。创建过程中，实时 iframe 预览会即时更新。完成后，该工具会生成完整的基于表格的 HTML 邮件，包含内联 CSS，与 Gmail、Outlook 和 Apple Mail 兼容。无需设计软件、无需编码，也无需注册账户。
主要功能
- 可视化块编辑器 — 通过添加和重新排列内容块来构建邮件。七种块类型：标题、文本、按钮、图片、分隔线、双栏和页脚。
- 标题、文本、按钮、图片、分隔线和页脚块 — 每个块都有独立的属性面板。标题块具有背景色和文字颜色选择器。文本块可选择字体大小（12px–24px）和对齐方式（左、中、右）。按钮块接受标签、URL 和颜色对。图片块接受 URL、替代文本和宽度。
- 含移动端/桌面端切换的实时预览 — 编辑器面板包含实时 iframe 预览。无需离开编辑器标签即可在桌面（全宽）和移动端（375px）之间切换。
- 自定义颜色、字体和间距 — 全局邮件设置控制主体背景（默认
#f4f4f4）、内容背景（#ffffff）、主色调、最大宽度（480px、600px 或 640px）以及字体系列（Arial、Georgia、Helvetica 或 Verdana）。 - 导出简洁的响应式 HTML — HTML 标签页显示完整生成的源代码：符合标准的基于表格的布局（含内联 CSS）、预头部文本、Outlook 的 MSO VML 按钮回退，以及在 600px 以下屏幕自动折叠为全宽的响应式媒体查询。
- 将 HTML 复制到剪贴板 — "复制 HTML" 按钮一键复制整个生成的 HTML 字符串，并显示"已复制！"确认状态。
- 预制模板起始页 — 三个起始模板可即时加载：欢迎、新闻通讯和促销。每个模板都包含为其用途预配置的块。欢迎和新闻通讯使用您当前的主色调；促销使用自己的红色强调色。
- 100% 客户端处理 — 邮件内容不会传输到任何服务器。页面加载后可完全离线使用。
如何使用 Email Template Builder
第一步：配置全局设置
打开 即将推出: Email Template Builder，在左侧面板找到"邮件设置"卡片。填写以下内容：
- 主题行 — 成为导出 HTML 中的
<title>标签（在某些邮件客户端中可见，也用于无障碍访问）。 - 预头部文本 — 在收件箱预览中主题后显示的隐藏预览行。默认为
"出现在收件箱中的预览文字..."。将其设置为一句吸引人的概括。 - 主体背景 / 内容背景 — 颜色选择器可让您输入十六进制值或使用原生颜色选择器。默认的浅灰色主体（
#f4f4f4）配白色内容（#ffffff）符合大多数主流品牌使用的视觉规范。 - 主色调 — 自动用作新标题块和按钮块的默认背景。
- 最大宽度 — 选择 480px（紧凑）、600px（标准，默认）或 640px（更宽）。
- 字体系列 — Arial（默认）、Georgia、Helvetica 或 Verdana。
第二步：加载模板或添加块
方式 A：加载模板起始页。 在"模板起始页"卡片中点击"欢迎"、"新闻通讯"或"促销"。编辑器会加载为该用途预配置的完整块集。欢迎模板包括一个标题块、一个问候语文本块、一个"开始使用" CTA 按钮、一条分隔线和一个页脚。促销模板使用硬编码的红色（#e53e3e）标题和按钮颜色，并包含图片占位符。欢迎和新闻通讯起始页使用您当前的主色调设置；促销模板使用其自有的红色配色方案。
方式 B：从零开始构建。 在"添加块"卡片中点击任意块类型。可用块：标题、文本、按钮、图片、分隔线、双栏、页脚。每个新块出现在块列表末尾，并自动打开其编辑面板。
第三步：编辑每个块
在"块"列表中点击一个块以打开其编辑器。更改会立即在实时预览中反映。
- 标题块： 用于标题和副标题的文本字段，以及背景色和文字颜色选择器。
- 文本块： 内容文本区域（换行符生成独立的
<p>标签）、字体大小下拉列表（12px 至 24px）以及左对齐/居中/右对齐选项。 - 按钮块： 标签文本、目标 URL、按钮背景色和按钮文字颜色。生成的 HTML 包含 MSO VML 标记，以便 Outlook 渲染真正的按钮而非普通链接。
- 图片块： 图片 URL（或上传本地文件）、替代文本和宽度（例如
100%或400px）。上传的图片以 Base64 数据 URI 嵌入。 - 分隔线块： 颜色选择器和粗细输入（1–10px）。
- 栏目块： 左右两栏内容各有独立的文本区域。
- 页脚块： 页脚文本区域（换行变为独立段落）、链接标签和链接 URL 字段对（例如用于添加退订链接），以及背景色和文字颜色选择器。
使用上下箭头按钮重新排序块。使用垃圾桶图标删除块。
第四步：预览和导出
切换到预览标签，查看邮件的全页视图。使用桌面/移动端切换以验证 375px 下的响应式布局。
切换到 HTML 代码标签查看生成的源代码。点击文本区域可选择全部文本，或点击"复制 HTML"将其复制到剪贴板。代码可直接粘贴到任何 ESP（邮件服务提供商），如 Mailchimp、SendGrid 或 HubSpot。
实用示例
示例一：产品发布公告
从"促销"模板起始页开始。将标题文本替换为您的产品名称和发布语。使用颜色选择器将 #e53e3e 标题背景更新为您的品牌色。将占位图片 URL 替换为产品截图。编辑文本块，用一到两句话描述核心优势。更新按钮标签（"立即预订"）和 URL。将预头部文本设置为 "[产品]来了——今日开始使用。" 导出 HTML 并粘贴到您的 ESP。
示例二：每周新闻通讯
加载"新闻通讯"模板。将主题设为 "每周精选——2026年3月3日那周"。用您的头条文章编辑特别报道文本块。在其下方添加第二个"双栏"块，并排放置两篇较短的内容。添加一个链接至您网站的"阅读完整档案"按钮块。调整页脚文本，按 CAN-SPAM 要求加入退订链接和实际邮寄地址。
示例三：欢迎邮件序列
使用"欢迎"模板。将标题副标题改为 "您的账户已就绪。" 将正文文本编辑为三个短段落：用户可以做什么、在哪里寻求帮助，以及如何联系支持。将"开始使用"按钮 URL 替换为实际的引导 URL。切换到预览标签，切换至移动端视图，确认 375px 下所有文本均清晰可读。导出并上传到您的 ESP 自动化工作流。
技巧与最佳实践
加载模板前先设置主色调。 模板起始页会将您当前的主色调应用于新的标题块和按钮块。加载模板后更改主色调不会对已有块产生追溯影响——每个块的颜色选择器可独立编辑。
善用预头部字段。 很多构建工具忽视了它，但预头部文本直接影响打开率。生成的 HTML 通过 display:none; ... max-height:0px; overflow:hidden 隐藏该文本——它不会在邮件中直观显示，但会出现在收件箱预览中。
14px 以下的字体在移动端难以阅读。 文本块的字体大小下拉列表最小可至 12px。实际使用中，正文文本应使用 14px 或更大。12px 仅适用于法律免责声明或页脚的细则说明。
测试 600px 最大宽度。 标准的 600px 最大宽度在所有主流客户端均表现良好。480px 适用于窄版布局设计；640px 仅适合不施加自身宽度限制的客户端。
Outlook VML 按钮无需额外步骤。 生成的 HTML 已在每个按钮周围包含 MSO VML 条件注释块。粘贴到 ESP 时，请确保 ESP 不会删除 HTML 注释，因为 VML 标记依赖于此。
常见问题与故障排查
实时预览显示空白区域。 这发生在添加任何块之前。添加至少一个块或加载模板起始页——iframe 会立即填充内容。
图片块显示图片损坏。 该工具直接在 <img> 标签中显示图片 URL。请确认 URL 可公开访问（不在身份验证之后）且使用 HTTPS。您输入的替代文本已包含在导出的 HTML 中，以满足无障碍访问要求。
复制的 HTML 在 Outlook 中显示布局错乱。 确认字体系列设置使用了 Web 安全字体栈（例如 Arial, Helvetica, sans-serif）。Web 字体（Google Fonts、自定义字体）在 Outlook 中无法渲染。工具中的四种字体选项均为 Web 安全字体栈。
双栏块在移动端折叠为单栏。 这是 MSO 条件注释和内联块布局的预期行为。在 600px 以下的屏幕上，媒体查询将 .email-container 设置为 width: 100%，48% 宽的内联块栏会自然换行。移动端无法强制并排显示两栏。
模板起始页未使用我的品牌色。 点击模板起始页按钮前，请在邮件设置卡片中检查主色调设置。模板在加载时读取主色调——加载后更改需要手动更新每个块的颜色选择器。
隐私与安全
Email Template Builder 完全在您的浏览器中构建和预览邮件 HTML。模板内容、主题行和图片 URL 不会传输到任何服务器。实时预览使用带有 sandbox="allow-same-origin" 属性的 iframe——预览中不执行任何脚本。页面加载后，该工具可完全离线运行，适合处理机密的营销内容或客户资料。
常见问题解答
Email Template Builder 是免费的吗？ 是的。完整的块编辑器、全部七种块类型、三个模板起始页、实时预览和 HTML 导出均完全免费，无需账户。请访问 即将推出: /web/social/email-template-builder 使用该工具。
Email Template Builder 可以离线使用吗？ 可以，页面加载后即可离线使用。所有 HTML 生成均在您的设备上通过 JavaScript 完成。实时预览从其来源加载图片 URL（需要网络连接），但编辑器、块管理和 HTML 导出均可离线运行。
我的数据在 Email Template Builder 中安全吗？ 您的邮件内容、主题行和设计选择永远不会离开您的浏览器。该工具在本地生成 HTML，不会向服务器发送包含您数据的任何请求。创建机密客户邮件或专有活动内容均可放心使用。
生成的 HTML 支持哪些邮件客户端？ 该工具生成带有内联 CSS 的基于表格的 HTML，这是邮件客户端兼容性最广的布局方式。它包含用于 Outlook 按钮渲染的 MSO VML 条件代码，以及用于移动端客户端的响应式媒体查询。专为 Gmail、Outlook（2016–2024）、Apple Mail 和 Yahoo Mail 设计。
可以添加超过七种块类型吗？ 当前编辑器支持七种块类型：标题、文本、按钮、图片、分隔线、栏目和页脚。您可以多次添加同一种块类型以构建复杂布局——例如，交替排列文本和图片块，或使用多个按钮块。
如何添加退订链接？ 添加页脚块。页脚编辑器包含专用的链接标签字段和链接 URL 字段。输入链接文本（如"退订"）和目标 URL。生成的 HTML 将其渲染为页脚文本下方的可点击 <a> 标签。导出后，您也可以将 URL 替换为 ESP 的退订合并标签。
预头部文本字段是什么？ 预头部文本是一段简短的字符串（通常为 40–130 个字符），邮件客户端会在收件箱列表的主题行后显示它。在渲染的邮件中，它通过 CSS 隐藏。该工具在生成的 HTML 中将其放置在具有 display:none 和 max-height:0px 的 <div> 中。
我可以保存已创建的模板吗？ 可以。Glyph Widgets 的支持者可以使用 PresetsPanel 将完整的编辑器状态——所有块、设置和内容——作为命名预设保存并重新加载，数据存储在浏览器本地的 IndexedDB 中。
应使用哪种最大宽度？ 600px 是行业标准，在所有主流客户端中均可正常使用。如需更窄、更聚焦的布局，请选择 480px。仅在确认目标 ESP 和客户端能正确处理的情况下才使用 640px——某些较旧的 Outlook 版本会应用自身的宽度限制。
该工具支持自定义字体吗？ 不支持。字体下拉列表中的四种字体系列均为 Web 安全字体栈：Arial、Georgia、Helvetica 和 Verdana。由于大多数邮件客户端——尤其是 Outlook——不加载外部字体文件，因此不支持 Web 字体。
相关工具
- 即将推出: Email Extractor — 从任意文本中提取并验证邮件地址，然后与您在此创建的模板配合使用。
- 即将推出: Social Meta Tags — 生成 Open Graph 和 Twitter Card 标签，优化您的活动落地页在社交媒体分享时的显示效果。
- 即将推出: Hashtag Generator — 为引导流量到邮件订阅表单的社交媒体帖子生成相关话题标签。
立即试用 Email Template Builder：即将推出: Glyph Widgets Email Template Builder