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

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

创建新的电子邮件内容

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

探索编辑器布局

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

顶部栏

重命名电子邮件、撤销或重做更改、保存您的工作或发送测试电子邮件。

语言/主题/预标题栏

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

画布

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

图层面板

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

右侧面板

使用 块 (Blocks) 向电子邮件添加内容，使用 设置 (Settings) 进行适用于整个电子邮件的样式设置。请参阅配置全电子邮件范围的样式。

开始构建您的电子邮件

从 块 (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、链接目标、文件和内边距

按钮

按钮 (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) 并调整外边距、列内边距和列之间的间距。

添加链接

使用 插入/编辑链接 (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。交易性电子邮件不受影响，将继续发送。了解有关消息类型的更多信息。

点击次数将在消息历史记录的取消订阅率中计算。

网页版链接

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

订阅表单确认链接

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

配置全电子邮件范围的样式

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

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

可用部分：

文档 (Document)： 整个电子邮件区域的大小和外观：宽度、内边距、背景颜色、背景图片或渐变、文本颜色、字体系列以及块之间的间距。
电子邮件选项 (Email options)： 为电子邮件打开或关闭 在浏览器中查看 (View in browser) 和 取消订阅链接 (Unsubscribe link)。
块默认值 (Block defaults)： 为您稍后添加的块共享的初始样式，因此新内容与电子邮件匹配，直到您在画布上覆盖某个块。
列默认值 (Columns defaults)： 每个列布局的间距：外边距、每列内部的内边距以及列之间的间距。
卡片默认值 (Card defaults)： 在布局中对内容进行分组的卡片容器的初始外观，直到您单独设置卡片样式为止。
按钮组默认值 (Button group defaults)： 当多个按钮作为一个组放在一起时的间距和对齐方式。
按钮默认值 (Button defaults)： 新按钮块的初始外观，以便 CTA 在整个电子邮件中保持一致，直到您单独设置一个样式。
分隔线默认值 (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

示例

菜单

社交

倒计时器

列

添加链接

打开网站

管理偏好链接

取消订阅链接

当收件人点击取消订阅链接时会发生什么

如果启用了订阅偏好中心

如果未启用订阅偏好中心

网页版链接

订阅表单确认链接

配置全电子邮件范围的样式

配置电子邮件页脚

本地化您的电子邮件内容

保存您的电子邮件

发送测试电子邮件

使用您保存的电子邮件内容