使用拖放编辑器创建邮件内容

在 Pushwoosh 内置编辑器中无需编写代码即可构建邮件内容。您可以获得一个可重复使用的布局，其中包含内容块、图片、按钮、个性化文本和合规的页脚，可用于客户旅程 (Customer Journey) 或一次性邮件。

创建新的邮件内容

前往 内容 (Content) → 邮件内容 (Email content)。
选择如何开始：
- 点击 创建邮件内容 (Create email content) 打开拖放编辑器，从头开始构建邮件。
- 点击 创建邮件内容 (Create email content) 旁边的箭头，然后选择 使用模板 (Use a template)，从模板库中预构建的布局开始。
- 点击 创建邮件内容 (Create email content) 旁边的箭头，然后选择 HTML 代码 (HTML code) 以使用 HTML 代码编辑器。了解更多

浏览编辑器布局

打开邮件后，内置编辑器包含以下区域：

顶部栏

重命名邮件、撤销或重做更改，并保存您的工作。打开 ⋮ 菜单以获取更多操作：

预览 (Preview)： 查看邮件在收件人端呈现的效果，并带有自己的桌面/移动设备切换开关。请参阅编辑移动视图。
验证 Liquid (Validate Liquid)： 在发送前，检查所有语言的主题、预标题、页脚和正文中的 Liquid 语法。
测试邮件 (Test email)： 向测试设备或地址发送预览。请参阅发送测试邮件。

语言 / 主题 / 预标题栏

在画布上方，切换编辑语言并设置邮件的主题行和预标题。了解如何设置这些内容。

画布

查看收件人将看到的邮件，并直接在布局上编辑文本、图片和按钮。一封空邮件会显示 从一个块开始 (Start with a block)。

图层面板

以树状结构列出邮件中的每个块，顺序与画布上相同。从左侧边缘打开它以选择嵌套的块或拖动行以重新排序内容。

右侧面板

在三个选项卡之间切换：

块 (Blocks)： 向邮件添加内容。请参阅添加内容块。
设置 (Settings)： 一次性对整个邮件应用样式。请参阅配置邮件全局样式。
AI： 与 AI 助手聊天，根据提示生成或编辑内容。

开始构建您的邮件

从 块 (Blocks) 面板拖动一个块到画布上，或单击面板中的一个块将其添加到邮件末尾。
以同样的方式继续添加块，直到布局完成。
当您需要邮件全局样式时，打开 设置 (Settings) 选项卡。

添加内容块

打开 块 (Blocks) 选项卡，将一个块拖到画布上，或单击一个块将其添加到邮件末尾。可用块：

标题： 邮件中的标题和短标题
文本： 正文和较长的描述
按钮： 可点击的行动号召
图片： 来自媒体库、上传或 URL 的图片
卡片： 在一个布局中将图片与标题、文本和按钮配对
分隔线： 在视觉上分隔区域的线条
2 列： 并排的两个等宽列
3 列： 并排的三个等宽列
4 列： 并排的四个等宽列
33 / 67： 两列，左列约占 33% 宽度，右列约占 67%
67 / 33： 两列，左列约占 67% 宽度，右列约占 33%
计时器： 用于优惠和截止日期的倒计时
菜单： 一行或一列链接，如导航或联系方式
社交： 链接到您社交媒体资料的图标
HTML： 自定义 HTML，如表单、调查或嵌入式视频

标题和文本

标题 (Heading) 和 文本 (Text) 块包含收件人在邮件中阅读的文案。在画布上编辑文本并使用工具栏进行格式化。

单击 标题 (Heading) 或 文本 (Text) 块以在画布上编辑其文案。选择一些文本以调出格式化工具栏：粗体、斜体、下划线、对齐方式、链接按钮和 文本样式 (text style) 下拉菜单。

合并标签 (Merge Tags) 是占位符，可将收件人个人资料中的标签 (Tag) 值插入邮件中，以便每个订阅者都能看到个性化的文案。要添加一个，请选择文本，单击工具栏中的 合并标签 (Merge Tags)，然后从您的帐户中选择一个标签 (Tag)。

图片

图片 (Image) 块在邮件中显示一张图片。在画布上选择它以在右侧面板中打开 图片 (Image) 设置。

添加图片 (Add image) / 替换图片 (Replace image)： 当块为空时单击 添加图片 (Add image)，或当已设置图片时单击 替换图片 (Replace image)。您可以上传文件或从您的媒体库中选择一个。
图片 URL (Image URL)： 粘贴图片的托管链接。
替代文本 (Alt text)： 为无障碍性描述图片。
链接 URL (Link URL)： 单击图片时打开一个链接。有关可用链接类型，请参阅添加链接。
链接目标 (Link target)： 在同一选项卡或新选项卡中打开链接。
文件 (File)： 添加图片后，显示正在使用的文件的路径。

在 间距 (Spacing) 中，打开 内边距 (Padding) 以在图片周围添加空间。使用 所有边 (All sides) 为每条边设置相同的内边距，或打开 更多选项 (More options) 分别设置每条边。

图片设置面板，包含替换图片、图片 URL、替代文本、链接 URL、链接目标、文件和内边距

卡片

卡片 (Card) 块在一个现成的布局中将图片与标题、文本和按钮配对。在画布上选择它以在右侧面板中打开其设置。

布局 (Layout)： 选择图片相对于内容的位置。
图片 (Image)： 替换图片、设置替代文本，以及（对于 AI 生成的图片）编辑用于创建它的提示。
尺寸与适配 (Size & fit)： 设置图片尺寸及其在其区域内的适配和定位方式。
间距 (Spacing)： 设置卡片内容周围的内边距。

按钮

按钮 (Button) 是邮件中可点击的行动号召。

单击 按钮 (Button) 块以在画布上编辑其标签。使用工具栏更改字体大小、文本颜色、粗体、斜体、下划线和对齐方式。

要设置收件人单击按钮时发生的操作：

单击工具栏中的链接图标以打开 插入/编辑链接 (Insert/Edit Link)。
或使用右侧面板 链接 (Link) 部分中的 操作类型 (Action type) 和 URL。

有关可用的操作类型，请参阅添加链接。

在右侧面板的 样式 (Styles) 下：

对齐方式 (Alignment)： 左对齐、居中或右对齐。
背景 (Background)、文本颜色 (Text color)、字体大小 (Font size) 和 字体系列 (Font family)： 打开每个选项以覆盖默认外观。
边框半径 (Border radius)、边框颜色 (Border color) 和 边框宽度 (Border width)： 按钮的形状和轮廓。
宽度 (Width)： 设置固定的按钮宽度或保持自动。
内边距 (Padding)： 在按钮内部添加空间。使用 所有边 (All sides) 实现统一的内边距，或打开 更多选项 (More options) 分别设置每条边。

右侧面板中的按钮样式设置，包含对齐方式、背景、文本颜色、字体大小、边框半径和内边距

分隔线

分隔线 (Divider) 是内容块之间的水平线。用它在邮件中直观地分隔各个部分。

在设置面板中配置 线条样式 (line style)（实线、虚线、点线）、颜色 (color)、粗细 (thickness) 和 宽度 (width)。

HTML

HTML 块允许您将自定义 HTML 粘贴到邮件中。用它来创建自定义表单、调查或嵌入式视频。

示例

此潜在客户表单收集电子邮件地址，以发送新年促销的优惠码。

邮件编辑器中的 HTML 潜在客户表单，包含一个电子邮件字段和一个“获取我的代码”按钮

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #CC0000;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
</style>
</head>
<body>

<h2>Get your New Year Sale code</h2>
<p>Enter your email and we'll send you an exclusive promo code for up to 50% off.</p>

<div id="form">
  <input type="email" placeholder="Your email address" />
  <button type="button">Get my code</button>
</div>

</body>
</html>

此调查问卷询问收件人正在购买哪个类别，并将每个选项链接到相关的促销页面。

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    color: #222;
  }
  .option:hover { border-color: #CC0000; background: #fff5f5; }
</style>
</head>
<body>

<h2>What are you shopping for?</h2>
<p>Pick a category and go straight to your deals</p>

<a class="option" href="https://example.com/sale/clothing">👗 Clothing</a>
<a class="option" href="https://example.com/sale/electronics">📱 Electronics</a>
<a class="option" href="https://example.com/sale/beauty">💄 Beauty</a>
<a class="option" href="https://example.com/sale/home">🏠 Home & Living</a>

</body>
</html>

此示例在邮件中嵌入了新年促销的宣传视频。

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>New Year Sale — Up to 50% Off</h1>

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
</div>

</body>
</html>

您也可以直接在 HTML 块中添加退订链接：

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

当邮件发送时，%%PW_EMAIL_UNSUBSCRIBE%% 占位符将被替换为 Pushwoosh 的退订 URL。

菜单

菜单 (Menu) 块将多个可点击项放置在一行或一列中。用它来创建导航栏或公司联系人列表。

为每个菜单项设置：

标签 (Label)： 收件人看到的文本
URL： 项目打开的位置
目标 (Target)： 同一选项卡或新选项卡

在块设置中，您还可以设置：

方向 (Direction)： 水平或垂直
对齐方式 (Alignment)： 左对齐、居中或右对齐
分隔符 (Separator)： 项目之间的可选分隔符
字体、大小、粗细、字母间距和链接/文本颜色

社交

社交 (Social) 块显示一行链接到您个人资料的社交媒体图标。用它将收件人从邮件发送到 Facebook、Instagram、X 和其他平台。

添加入口平台，然后设置对齐方式、图标大小和图标之间的间距。

倒计时器

计时器 (Timer) 块是邮件中的倒计时。用它来宣传限时优惠、闪购和活动提醒。

设置方法如下：

在 倒计时 (Countdown) 中，设置 结束日期 (End date) 和 结束时间 (End time)，然后为计时器标签选择 时区 (Timezone) 和 语言 (Language)。
打开 标签 (Labels) 以在数字下方显示“天 / 小时 / 分钟 / 秒”的标题，或关闭以仅显示数字。
在 外观 (Appearance) 中，设置 背景 (Background)、数字颜色 (Digits color)、标签颜色 (Labels color)，以及数字（默认 40px）和标签（默认 16px）的字体大小。
根据需要调整 间距 (Spacing)（内边距）。

列

列 (Columns) 将画布分割成并排的部分，以便您可以在一行中将内容并排放置。

将以下块之一拖到画布上：

2 列： 两个等宽列
3 列： 三个等宽列
4 列： 四个等宽列
33 / 67： 左列约 33% 宽，右列约 67%
67 / 33： 左列约 67% 宽，右列约 33%

然后向每列添加内容。要更改邮件中所有列的间距，请打开 设置 (Settings) → 列默认值 (Columns defaults) 并调整外边距、列内边距和列之间的间距。

保存和重用块

保存一个块以便在此邮件或其他邮件中重用，而不是每次都重新构建。

单击块本身（其框架或背景，而不是其中的文本或按钮）以选择整个块。卡片、列和社交块是这种工作方式的示例。
单击块工具栏中的书签图标并为其命名。

已保存的块出现在 块 (Blocks) 选项卡底部的 已保存的块 (Saved blocks) 下。

将已保存的块拖到画布上，或单击它以将其添加到邮件末尾。
单击已保存块磁贴上的 × 以将其删除。

编辑移动视图

添加内容块后，切换到移动设备视图以检查和调整它们在手机上的外观。在画布上方的语言切换器旁边，使用 桌面 / 移动 (Desktop / Mobile) 切换开关进入一个完全可编辑的、真实手机宽度的移动视图。选择、编辑和重新排列内容，就像您的订阅者在手机上看到的一样，而不仅仅是预览桌面布局的适应情况。

每个可被移动设备覆盖的设置旁边都有一个复选框。当复选框未选中时，提示会显示继承的桌面值，并且该设置会继续使用它。打开复选框为移动设备设置一个单独的值。再次关闭它以回退到桌面值。

为不同设备设置不同的内边距和字体大小

内边距 (Padding)： 每个块、列、卡片和单个元素（如文本、图片或按钮）都有一个可以为移动设备覆盖的内边距控件。将画布切换到 移动 (Mobile)，打开 内边距 (Padding) 旁边的复选框，并设置新值。桌面内边距保持不变，直到您打开复选框。
字体大小 (Font size)： 在文本元素上打开 字体大小（移动）(Font size (mobile)) 以仅为移动设备设置一个大小。如果没有此覆盖，大标题会自动缩小以适应手机屏幕。

控制列在移动设备上的堆叠方式

默认情况下，列布局在手机上垂直堆叠。在移动视图中，使用 堆叠列 (Stack columns) 来设置每个列块的行为：

堆叠 (Stack)： 列流入单个列，从上到下（默认）。
保持行 (Keep row)： 列保持并排，保留桌面布局。
反转 (Reverse)： 列以相反的顺序堆叠。对于图片 + 文本行很有用：在桌面上将图片保持在右侧，但在移动设备上显示在顶部。

按设备显示或隐藏内容

打开块或元素的设置，并使用 可见性 (Visibility) 下的 在移动设备上隐藏 (Hide on mobile) 或 在桌面上隐藏 (Hide on desktop) 仅在一种设备上显示它，这样您就可以构建特定于设备的横幅、行动号召或导航，而无需维护两个模板。

添加链接

使用 插入/编辑链接 (Insert/Edit Link) 对话框设置收件人单击按钮或选定文本时发生的操作。选择一个 操作类型 (Action type)，然后填写该操作的字段。

打开网站

收件人点击时打开一个链接。在 URL 中输入地址。

管理偏好设置链接

添加一个指向订阅偏好设置中心的链接，收件人可以在其中选择他们接收的邮件类别。该链接会自动插入。

退订链接

让收件人根据法规和他们的偏好选择退出。

您也可以在 HTML 块中添加退订链接：

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

当邮件发送时，%%PW_EMAIL_UNSUBSCRIBE%% 占位符将被替换为 Pushwoosh 的退订 URL。

收件人点击退订链接时会发生什么

如果启用了订阅偏好设置中心

收件人仅从分配给该邮件的类别（例如，时事通讯）中退订。类别名称将添加到他们的 已退订邮件类别 (Unsubscribed Email Categories) 标签中。

会出现一个确认屏幕，其中包含 重新订阅 (Resubscribe) 和 管理偏好设置 (Manage preferences) 选项。了解更多。

如果未启用订阅偏好设置中心

收件人将选择退出所有营销邮件，并且 已退订邮件 (Unsubscribed Emails) 标签将设置为 true。交易性邮件不受影响，将继续发送。了解有关消息类型的更多信息。

点击次数会计入消息历史记录中的退订率。

网页版链接

让收件人可以访问邮件的网页版，如果他们在收件箱中查看邮件时遇到问题，这会很有用。

不跟踪统计数据

收件人点击时打开一个链接，但不将该点击计入您邮件的点击统计数据。在 URL 中输入地址。

订阅表单确认链接

为订阅表单提交插入一个确认链接（例如，确认双重选择加入）。了解有关双重选择加入的更多信息。

配置邮件全局样式

邮件设置控制整个邮件的样式：文档大小和背景、面向发件人的选项以及块的默认样式。

打开右侧面板中的 设置 (Settings) 选项卡。

可用部分：

文档 (Document)： 整个邮件区域的大小和外观：宽度、内边距、背景颜色、背景图片或渐变、文本颜色、字体系列以及块之间的间距。
邮件选项 (Email options)： 为邮件打开或关闭 在浏览器中查看 (View in browser) 和 退订链接 (Unsubscribe link)。
块默认值 (Block defaults)： 您稍后添加的块的起始背景、背景图片、边框颜色、边框宽度、边框半径和默认的移动/桌面可见性，以便新内容与邮件匹配，直到您在画布上覆盖一个块。
列默认值 (Columns defaults)： 每个列布局的间距：外边距、每列内的内边距以及列之间的间距。
卡片默认值 (Card defaults)： 卡片容器的起始外观，用于在布局中对内容进行分组，直到您单独设置卡片样式。
按钮组默认值 (Button group defaults)： 多个按钮作为一个组在一起时的间距和对齐方式。
按钮默认值 (Button defaults)： 新按钮块的起始外观，以便行动号召在整个邮件中保持一致，直到您单独设置一个样式。
分隔线默认值 (Divider defaults)： 新分隔线块的起始线条样式、颜色、粗细和宽度。

默认值适用于单个块未覆盖的任何地方。

配置邮件页脚

每封邮件都包含一个 页脚 (Footer) 块，用于显示法律要求的发件人信息和退订链接。在 图层面板 (Layers panel) 中选择 页脚 (Footer) 以打开其设置。

使用 从帐户加载 (Load from account) 导入您保存的帐户级页脚，或使用 另存为帐户默认值 (Save as account default) 将当前页脚重用为未来邮件的起点。

邮件类型 (Email type)： 营销 (Marketing) 或 交易性 (Transactional)。退订可见性遵循此设置。
徽标 (Logo)： 设置徽标 URL 或从图库中选择一个，然后设置以 px 为单位的宽度和可选的点击链接。
公司名称 (Company name)、邮政地址 (Postal address) 和 版权 (Copyright)： 您在页脚中的发件人身份。

在 链接和徽章 (Links & badges) 中：

页脚链接 (Footer links)： 添加带标签的链接，如隐私政策或条款。
应用商店徽章 (App store badges)： 添加带有目标 URL 的 App Store 或 Google Play 徽章。
社交链接 (Social links)： 添加链接到您社交媒体资料的图标。

页脚设置，包含从帐户加载、邮件类型、徽标、公司名称、邮政地址、版权以及链接和徽章

在 样式 (Style) 中：

文本颜色 (Text color)： 设置页脚文本颜色。
字体大小 (px) (Font size (px))： 设置页脚字体大小。
对齐方式 (Alignment)： 左对齐、居中或右对齐。
下划线链接 (Underline links)： 打开以给页脚链接加下划线。

在 选项 (Options) 中：

退订链接文本 (Unsubscribe link text)： 营销邮件上托管的退订链接的标签。交易性邮件会省略它。

本地化您的邮件内容

使用画布上方的语言切换器添加语言并按语言编辑内容。了解如何添加语言。

当前语言尚未翻译的内容会显示为灰色。开始输入以创建翻译。在您操作之前，默认语言会一直显示。

保存您的邮件

单击顶部栏中的 保存 (Save) 以保存您的更改。使用顶部栏中的 撤销 (Undo)/重做 (Redo) 在您的编辑中前后移动。

发送测试邮件

在发送您的邮件营销活动之前，您可以发送一封测试邮件来预览内容在收件人收件箱中的显示方式。

打开顶部栏中的 ⋮ 菜单，然后选择 测试邮件 (Test email)。

在打开的窗口中，选择一个已保存的测试设备或输入任何电子邮件地址。

单击 发送 (Send) 将测试消息发送到您选择的地址。

使用拖放编辑器创建邮件内容

创建新的邮件内容

浏览编辑器布局

开始构建您的邮件

添加内容块

标题和文本

图片

卡片

按钮

分隔线

HTML

示例

菜单

社交

倒计时器

列

保存和重用块

编辑移动视图

为不同设备设置不同的内边距和字体大小

控制列在移动设备上的堆叠方式

按设备显示或隐藏内容

添加链接

打开网站

管理偏好设置链接

退订链接

收件人点击退订链接时会发生什么

如果启用了订阅偏好设置中心

如果未启用订阅偏好设置中心

网页版链接

不跟踪统计数据

订阅表单确认链接

配置邮件全局样式

配置邮件页脚

本地化您的邮件内容

保存您的邮件

发送测试邮件

使用您保存的邮件内容