跳转到主要内容

​
概述

OneSignal 拖放邮件生成器让您可以直观地设计响应式邮件,完全按照它们在用户收件箱中显示的样子呈现——无需编写完整的 HTML。 您可以使用三个核心组件构建邮件:
  • 设置 – 应用于整个邮件的全局样式和布局
  • 行 – 控制结构和响应性的水平布局容器
  • 内容 – 单个区块,如文本、图像、按钮和 HTML
本指南将引导您了解每个组件,并展示从开始到结束构建邮件的推荐方式。
如果您想要以下功能,请使用拖放邮件生成器:
  • 无需管理完整 HTML 即可直观地设计邮件(HTML 区块可用)
  • 跨活动重复使用行或模板
  • 允许非技术团队成员安全地编辑内容
如果您需要完整的 HTML 控制、各处的自定义字体或高级深色模式逻辑,请改用 HTML 编辑器。

​
推荐构建流程(默认)

按照以下顺序可获得最佳结果并减少渲染问题:
  1. 在设置中配置全局样式
  2. 使用行添加布局结构
  3. 插入内容区块
  4. 添加个性化和链接
  5. 添加取消订阅链接(对于营销邮件)
  6. 保存为模板或发送
完成后,您的邮件应该:
  • 宽度不超过 600px
  • 在移动和桌面端清晰呈现
  • 包含必需的合规链接

​
导入您自己的模板

如果您已经有 HTML 邮件模板,可以通过以下方式将它们添加到 OneSignal:
  1. 邮件模板转发
  2. 创建模板 API
  3. 将 HTML 复制粘贴到 HTML 编辑器

​
设置

设置定义了邮件的基础布局和样式。除非明确覆盖,否则这些值会级联到行和内容区块。
生成器的设置
设计设置描述
内容区域宽度邮件的宽度(像素)。推荐: 600px。
内容区域对齐将内容向左或居中对齐。
背景颜色内容区域后面的颜色。
内容区域背景颜色内容区域内的颜色。
默认字体应用于所有文本,除非被覆盖。自定义字体需要 HTML。
链接颜色所有链接的默认颜色。
语言设置 HTML lang 属性以提高可访问性。默认为英语。
推荐默认值: 在设置中配置尽可能多的样式以确保一致性并减少每个区块的覆盖。

​
行

行定义邮件的水平布局。每行可以包含一个或多个列,每列可以包含内容区块。 将行拖放到编辑器中以构建您的结构。
添加行来构建邮件
使用行来控制布局和间距。避免依赖单个内容区块进行主要布局决策。

​
删除和复制行

选择行并使用删除和复制图标。
删除和复制行控件

​
保存的行

保存的行让您可以跨邮件和模板重复使用页眉、页脚或重复部分。 点击行上的保存图标来保存它。
保存行以供重用
从行 > 保存的行访问保存的行。
选择保存的行
保存的行类别:
  • 空白 – 空白行模板
  • 我保存的行 – 您或您的团队创建的行
  • 示例行 – OneSignal 示例

​
行属性

点击行的外边缘来编辑行级设置。
如果您在悬停时看到内容而不是行,说明您选择了内容区块。点击外容器边缘,直到标签显示行。
行属性描述
背景行后面的颜色或图像。推荐: 在设置中设置背景颜色以保持一致性。
边框边框颜色、宽度和样式。
布局在移动或桌面端显示或隐藏行。
列添加、删除或调整列大小并调整列内边距。
避免在行中使用背景图像。邮件客户端支持不一致。如果行仅包含图像,请改用图像区块。

​
内容

内容区块是用户看到的实际元素——文本、图像、按钮、分隔符和 HTML。 将内容区块拖到行列中。它会自动适应列宽。
可用的内容区块
内容区块决策规则:
  • 使用文本区块处理大部分文本。
  • 使用图像区块处理视觉元素或自定义字体。
  • 仅在需要高级样式或行为时使用HTML 区块。

​
自定义字体

拖放编辑器默认支持系统字体。要使用自定义字体,必须使用 HTML 区块。
HTML 区块
<!-- 将此内容放入邮件顶部的 HTML 区块中 -->
<style type="text/css">
  /* 声明 Bebas Neue (仅在支持网络字体的客户端中加载) */
  @font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoo9Wlhzg.ttf') format('truetype');
  }
</style>

<h1 style="font-family:'Bebas Neue', Arial, Helvetica, sans-serif; 
           font-size:36px; line-height:1.2; margin:0; text-transform:uppercase;">
  欢迎!
</h1>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; margin:12px 0 0;">
  感谢您的订阅。
</p>
推荐默认值: 正文文本使用系统字体,仅标题使用自定义字体。
许多邮件客户端(包括 Gmail 和 Windows 版 Outlook)不加载网络字体。始终包含回退字体或使用图像来保证字体效果。要”强制”特定字体,考虑使用包含所需字体的图像。

​
图像和视频

您可以将图像上传到 OneSignal 仪表板,让您的团队可以访问它们。直接在编辑器中更改和应用图像效果,如裁剪、过滤等。您也可以使用图像和视频的 URL。确保它们可通过提供的 URL 访问。

​
邮件推荐图像尺寸

宽高比:
  • 页眉/横幅图像: 3:1 或 4:1 (例如 600×200 或 600×150)
  • 主图像: 16:9 或 2:1 (例如 600×338 或 600×300)
  • 方形图像: 1:1 (例如 300×300) — 适用于产品网格
  • 缩略图: 1:1 或 4:3
  • 最大宽度: 600–700px 是标准(大多数邮件客户端)
  • 为视网膜显示设计 2x (例如 1200px 宽,显示为 600px)
文件大小:
  • 保持单个图像在 100–200KB 以下
  • 总邮件大小(包括图像)在 1MB 以下
  • 更小 = 更快的加载时间和更好的可投递性
文件格式:
  • JPG: 最适合照片
  • PNG: 最适合图形、标志、透明度
  • GIF: 用于简单动画(保持文件大小小)
  • WebP: 在邮件中尚未广泛支持——避免使用
其他技巧:
  • 始终包含alt文本以提高可访问性以及在图像无法加载时使用
  • 使用内联 CSS 进行样式设置(许多客户端会剥离 <style> 标签)
  • 避免背景图像(支持不一致)
  • 跨客户端测试(Gmail、Outlook、Apple Mail 呈现方式都不同)
    • Outlook 经常忽略图像尺寸,因此在 HTML 中设置宽度和高度属性

​
链接

链接跟踪默认启用。支持多链接跟踪。有关更多详细信息,请参阅链接和深度链接。

​
退订链接

所有营销邮件都应包含退订链接。没有退订链接,您的邮件被标记为垃圾邮件的可能性会更高。有关更多详细信息,请参阅退订链接。 OneSignal 提供默认的退订链接,使用后将取消用户的邮件订阅。如果需要,您也可以包含自己的自定义退订 URL。只需确保正确管理邮件订阅(详细信息请参阅创建自定义退订页面)。 通过以下方式将 OneSignal 的默认 [unsubscribe_url] 添加到您的邮件中:
  • HTML 区块: <a href="[unsubscribe_url]">Unsubscribe</a>
  • 选择您的文本并使用编辑器中的特殊链接选项,或在 URL 字段中设置 [unsubscribe_url]

​
HTML 区块

HTML 区块允许自定义标记和样式。
  • 不支持 JavaScript
  • 推荐内联 CSS
  • 某些客户端会剥离类和 ID
HTML 区块是高级样式(如深色模式覆盖)的最佳位置。请参阅深色模式样式最佳实践。

​
个性化

使用 liquid 模板来个性化消息。示例: {{ first_name | default: "there" }}
使用 Liquid 模板个性化消息
有关更多详细信息,请参阅消息个性化和使用 Liquid 语法。

​
表情符号

表情符号在不同邮件平台上可能呈现不同。

​
保存您的工作

您可以将邮件设计保存为模板以供将来使用。

​
常见问题

​
如何处理深色模式?

大多数邮件在深色模式下呈现都是可接受的,但请务必测试。对于高级深色模式样式,请使用 HTML 区块,参见深色模式样式最佳实践。

​
如何添加自定义退订链接?

有关详细信息,请参阅创建自定义退订页面。

​
相关文章