HTML邮件模板构建器——用GrapesJS拖拽

设计带有拖拽功能的响应式邮件

专为现代电子邮件工作流程打造

可视化创建响应式邮件模板并导出支持ESP的HTML

本页关注实际成果,而不仅仅是功能:更快的模板生成、更清晰的工程交付,以及基于MJML驱动输出的跨客户可靠性。

22k+

GitHub 星

100+

生态系统插件

MJML

邮件安全标记

10+年

生产成熟度

电子邮件构建器功能

默认响应式

MJML 会自动生成针对移动端响应的 HTML。无需手动查询媒体。

MJML 支持

原生MJML插件将你的设计编译成支持电子邮件的HTML,支持Outlook和Gmail。

跨客户端输出

发送前请在Gmail、Outlook、Apple Mail和Yahoo上测试模板。

干净的HTML导出

导出内嵌HTML即可用于任何邮件发送服务:Mailgun、SendGrid、AWS SES等。

第一周的有用结果

快速推出品牌通讯

从可重复使用的部分开始,保持字体、间距和行动策略风格在各活动中保持一致。

减少渲染意外

使用邮件安全的结构,发送前检查兼容性,以避免排版损坏。

将可靠的HTML交接给ESP工具

导出干净的 HTML 支持Mailgun、SendGrid、SES 和自定义 SMTP 管道。

团队和用户构建流程

步进 01

选择模板基础

选择欢迎、收据、促销或摘要模板,并将其映射到你的品牌系统。

步进 02

用方块进行视觉定制

通过拖拽控制和内联风格工具编辑页眉、正体模块、CTA和页脚。

步进 03

安全预览和导出

验证渲染行为,然后导出内嵌HTML供你的发送服务。

电子邮件模板画廊

事务性

欢迎邮件

带着简洁的欢迎信息引导新用户上线

通讯

通讯

每周摘要,包含图片、文本和CTA块

市场营销

宣传

促销和折扣公告模板

事务性

交易收据

订单确认,包含清单和总额

滴答

滴水运动

SaaS 入职流程的 Sequence 邮件

通讯

每周摘要

精选内容汇总及分段

市场营销

产品公告

功能发布邮件附英雄图片

保留

重新接触

赢回不活跃的订阅用户

GJS 上的邮件构建插件。市场

电子邮件免费

MJML通讯预设

完整的基于MJML的电子邮件构建器预设

方块免费

电子邮件块库

页眉、页脚、关键号和内容块

用户界面免费

响应式预览

测试手机、平板、桌面大小的邮件

出口免费

HTML 导出

导出内嵌HTML即可支持任何ESP

资产免费

图像优化器

自动压缩图片以实现电子邮件投递

风格免费

暗黑模式风格

为邮件添加暗黑模式媒体查询支持

如何用GrapesJS构建邮件构建器

1

安装GrapesJS和MJML插件

运行 npm,安装 grapesjs grapesjs-mjml,并在你的项目中导入两者。

2

用新闻通讯预设初始化编辑器

在插件数组中传递 grapesjsMjml 以激活 MJML 块库和响应式模板。

3

根据你的使用场景自定义模块

添加、删除或修改模块以符合您的电子邮件设计系统和品牌指南。

4

与你的发送服务集成

从 editor.getHtml() 导出 HTML,并通过 Mailgun、SendGrid、AWS SES 或任何 SMTP 提供商发送。

5

加GJS。市场插件以获得额外功能

GJS提供暗黑模式、图像优化和高���导出插件。市场。

最适合这些团队

产品与生命周期团队

通过可重复使用的模块和可预测的输出管理入职、激活和保留邮件。

代理机构与成长团队

更快地构建广告活动变体,并保持多个客户之间的视觉一致性。

带嵌入式编辑器的SaaS平台

为客户提供集成的电子邮件构建体验,而无需从零开始创建。

电子邮件客户端兼容性

电子邮件客户端网络莫比尔注释
Gmail全力支持
Outlook 2019+使用MJML以获得最佳效果
Apple Mail出色的渲染
Yahoo Mail支持的大部分功能
Samsung EmailN/A良好的移动支持

有用的邮件生成器启动清单

  • 定义模板类型:欢迎、通讯、促销、交易和再参与。
  • 设定间距、字体和按钮样式的方块规则,以强化品牌一致性。
  • 配置图像托管和优化,以减轻负载和更好的交付能力。
  • 在发布前测试Gmail、Outlook、Apple Mail和Yahoo中的密钥模板。
  • 实现草稿和版本历史,让团队能够安全地迭代活动。

HTML 邮件常见问题解答

用更少的修改量打造更好的邮件模板

使用经过验证的插件和模板模块,更快地从初稿到准备就绪的邮件HTML。

浏览电子邮件插件