电子邮件内容块参考

本文档是关于您可以在拖放编辑器画布上添加的每个内容块，以及按钮和文本上可用的链接类型的参考。要控制哪些收件人可以看到某个块，请设置显示条件。

添加内容块

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

标题： 电子邮件中的标题和短标题
文本： 正文和较长的描述
按钮： 可点击的行动号召
图片： 来自媒体库、上传或 URL 的图片
视频： 链接到 YouTube 或 Vimeo 视频的可点击视频海报
卡片： 将图片与标题、文本和按钮组合在一个布局中
分隔线： 在视觉上分隔区域的线条
2 列： 并排的两个等宽列
3 列： 并排的三个等宽列
4 列： 并排的四个等宽列
33 / 67： 两列，左列约占 33% 宽度，右列约占 67%
67 / 33： 两列，左列约占 67% 宽度，右列约占 33%
计时器： 用于优惠和截止日期的倒计时
菜单： 一行或一列链接，如导航或联系方式
社交： 链接到您的社交资料的图标
HTML： 自定义 HTML，如表单、调查或嵌入式视频
产品： 重复的产品卡片网格。手动输入产品，或从您的产品目录或收件人的废弃购物车中提取。

标题和文本

标题和文本块包含收件人在电子邮件中阅读的文案。使用标题表示标题和短句，文本表示正文和较长的描述。

单击画布上的块开始编辑。选择文本以调出格式工具栏。

工具栏选项

文本样式： 为整个块设置段落样式（标题 1、标题 2、普通等）
字体大小： 调整所选文本的大小，或将大小应用于整个段落
粗体 / 斜体 / 下划线 / 删除线： 标准字符格式
对齐： 左对齐、居中或右对齐
链接： 将所选文本包装在超链接中
项目符号列表 / 编号列表： 将所选行转换为列表。行已有的任何项目符号或数字都会被删除，因此不会与列表自身的标记重复。

选择块（而不是文本范围）以在右侧面板中打开其设置，然后打开字母间距以放松或收紧整个块的字符间距。接受小数和负值。要一次性将字母间距应用于所有文本块，请在排版下将其设置为电子邮件范围的默认值。请参阅配置电子邮件范围的样式。

从其他文档粘贴

从 Google Docs、Word 或网页粘贴文本会保留粗体、斜体、下划线、删除线和链接。源文档的颜色、字体大小和字体系列不会被带过来——块自身的排版始终优先。要完全忽略源格式并采用块的样式，请使用 Ctrl+Shift+V（Mac 上为 Cmd+Shift+V）粘贴。

粘贴的项目符号或编号列表会将其项目符号或数字作为纯文本保留在每行的开头，在同一个块中。选择这些行并单击项目符号列表 / 编号列表将其转换为真正的列表——该按钮会为您删除多余的标记。

在单行字段中，例如按钮标签，粘贴的换行符会折叠成一个空格。

使用合并标签进行个性化

合并标签是占位符，它会插入收件人个人资料中的标签值，因此每个订阅者都会看到个性化的文案。要添加一个，请选择文本，在工具栏中单击合并标签，然后从您的帐户中选择一个标签。

图片

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

添加图片

当块为空时单击添加图片，或当已设置图片时单击替换图片。这将打开媒体库，其中有三个选项卡：

库：您上传的文件，可按文件名搜索。
图库照片： 无需离开编辑器即可搜索免费的 Pexels 照片。单击一张照片将其复制到您的库中并插入。
使用 AI 生成： 描述您想要的图片并选择一个宽高比。生成的图片会保存到您的库中。

您也可以直接将托管链接粘贴到图片 URL 中以跳过媒体库。

替代文本

在替代文本中描述图片以提高可访问性，或单击使用 AI 生成替代文本让 AI 根据您当前编辑语言的图片编写它。从图库照片或使用 AI 生成添加的图片会自动获得替代文本。

尺寸

宽度 (px)： 设置固定的渲染宽度。留空则使用图片的自然宽度。
移动设备上的宽度 (px)： 仅在手机屏幕上覆盖宽度。留空则保持图片从其桌面宽度按比例缩小。
高度 (px)： 设置固定的渲染高度。留空则使用图片的自然高度。

链接和间距

要在点击图片时打开链接，请在链接 URL 中输入链接，并将链接目标设置为在同一选项卡或新选项卡中打开。有关可用链接类型，请参阅添加链接。

在间距中，打开内边距以在图片周围添加空间。使用所有边进行统一内边距，或打开更多选项以分别设置每一边。

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

视频

视频块将 YouTube 或 Vimeo 视频作为可点击的缩略图添加到电子邮件中。电子邮件客户端无法在消息内播放视频，因此该块显示带有 ▶ 覆盖层的静态图片。当收件人点击它时，视频会在 YouTube 或 Vimeo 上打开。这在所有主要客户端中都有效，包括 Outlook。

在画布上选择视频块以在右侧面板中打开其设置。

视频 URL： 粘贴 YouTube 或 Vimeo 链接。编辑器会自动获取缩略图。
替代文本： 描述视频以提高可访问性。
缩略图 URL： 保留自动获取的缩略图，或单击添加缩略图 / 替换缩略图从媒体库中选择一个，或直接粘贴托管链接。
播放按钮覆盖层： 默认开启。关闭以显示没有 ▶ 覆盖层的纯缩略图。某些外部主机的缩略图不支持覆盖层。当这种情况适用时，编辑器会警告您，并且电子邮件会显示纯缩略图。
宽度 (px)、圆角半径 (px) 和对齐： 控制缩略图的外观及其在布局中的位置。您可以为移动设备单独设置对齐方式。

视频块设置，包含视频 URL、替代文本、缩略图 URL、播放按钮覆盖层、宽度、圆角半径和对齐

卡片

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

布局： 选择图片相对于内容的位置。
图片： 替换图片、设置替代文本，或为您使用使用 AI 生成创建的图片编辑提示。
尺寸与适配： 尺寸字段取决于布局。裁剪适用于所有布局。适配适用于除背景外的所有布局：
- 顶部： 高度设置图片的高度（以 px 为单位或作为卡片宽度的百分比）。宽度 (px) 将图片缩小到固定的像素宽度并居中。
- 背景： 高度设置卡片的高度（以 px 为单位或作为其宽度的百分比）。没有宽度 (px) 字段。图片始终填充卡片作为其背景并裁剪到它，因此适配对此布局没有影响。焦点仍然有效：它设置图片的哪个部分保持可见。
- 左侧或右侧： 宽度设置图片列的宽度（以 px 为单位或作为卡片的百分比）。高度 (px) 将图片固定到像素高度。设置像素高度会清除下面的裁剪比例。选择裁剪比例会清除像素高度。您不能同时使用两者。
- 对于所有布局：
  - 裁剪： 选择原始以保持图片的自然比例，或选择一个比例（方形 (1:1)、4:3、3:2、16:9）将图片裁剪到该框。
  - 适配： 选择覆盖以填充框并裁剪到它。使用焦点设置裁剪点。或选择包含以在不裁剪的情况下缩放整个图片到框内。使用设置位置定位它。
间距： 设置卡片内容周围的内边距。

按钮

按钮是电子邮件中可点击的行动号召。

单击按钮块以在画布上编辑其标签。使用工具栏更改字体大小、文本颜色、粗体、斜体、下划线、删除线和对齐方式。标签是单行的：粘贴的换行符会折叠成一个空格。有关粘贴保留和删除的内容，请参阅从其他文档粘贴。

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

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

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

在右侧面板的样式下：

对齐： 左对齐、居中或右对齐。
背景、文本颜色、字体大小和字体系列： 打开每个选项以覆盖默认外观。
边框半径、边框颜色和边框宽度： 按钮的形状和轮廓。
宽度： 设置固定的按钮宽度或使其自动。
内边距： 在按钮内部添加空间。使用所有边进行统一内边距，或打开更多选项以分别设置每一边。

分隔线

分隔线是内容块之间的水平线。用它在电子邮件中视觉上分隔区域。

在设置面板中配置线条样式（实线、虚线、点线）、颜色、粗细和宽度。

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。

菜单

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

对于每个菜单项，设置：

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

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

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

社交

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

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

倒计时器

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

要设置它：

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

计时器以任何语言或大小呈现为清晰的图像，背景延伸到整个电子邮件行，并且为移动设备宽度原生渲染一个版本，而不是缩小的桌面图像。

列

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

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

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

然后在每列中添加内容。要更改电子邮件中所有列的间距，请打开设置 → 列默认值并调整外部内边距、列内边距和列之间的间距。

对于列自身的图像（您使用列设置中的添加图像添加的图像），设置会显示一个尺寸与适配部分。这与卡片块的左侧 / 右侧布局的控件相同。拖入列中的图像块是一个独立的内容元素，并保留其自己的简单尺寸字段——请参阅图像。

您也可以直接将托管链接粘贴到图片 URL 中以跳过媒体库。

宽度： 设置图像的宽度（以 px 为单位或作为列的百分比）。不设置则填充列。
高度 (px)： 将图像固定到像素高度。设置像素高度会清除下面的裁剪比例。选择裁剪比例会清除像素高度。您不能同时使用两者。
裁剪： 选择原始以保持图像的自然比例，或选择一个比例（方形 (1:1)、4:3、3:2、16:9）将图像裁剪到该框。
适配： 选择覆盖以填充框并裁剪到它。使用焦点设置裁剪点。或选择包含以在不裁剪的情况下缩放整个图像到框内。使用设置位置定位它。

产品

产品块显示一个来自共享模板的产品卡片网格。每个卡片可以包括图像、标题、描述、价格和一个购买按钮。模板为每个产品重复。

单击画布上的卡片使其处于活动状态并进行编辑：

更改标题、描述、价格、图片或每个产品的链接以仅更新该卡片。
更改模板布局、颜色、内边距或其包含的元素以更新每个卡片。

在设置面板的来源下，选择产品的来源：

手动： 手动输入产品，通过 ID 从您的产品目录中选择，或两者混合。
目录规则： 按类别和排序顺序自动提取产品，在发送时从目录中实时解析。
购物车： 显示每个收件人当前废弃购物车中的商品。

手动添加产品

自己填充网格，可以手动输入产品，也可以通过 ID 从您的产品目录中选择特定商品。您可以在同一个块中混合使用这两种方式。

产品数量： 设置要显示的卡片数量（1-24）。
添加产品： 添加一个卡片并自己填写其标题、描述、价格、图片和链接。
从目录中选择…： 从您的产品目录中选择特定产品，而不是手动输入。
从目录刷新： 为您从目录中选择的产品拉取最新的标题、描述、价格和图片，以防它们在您添加后发生了变化。不影响手动输入的产品。
产品图片： 单击缩略图以替换该产品的图片。
产品链接： 输入或编辑每个产品的 URL。

产品块的手动来源设置，包含添加产品、从目录中选择、从目录刷新、产品图片和产品链接

使用目录规则拉取产品

按类别和排序顺序自动拉取产品，无需手动选择。

类别： 限制到特定的目录类别，或所有类别。
排序： 选择产品拉取的顺序：最新优先、价格：从低到高、价格：从高到低或标题 A-Z。
产品数量： 设置要显示的卡片数量限制（1-12）。
刷新预览： 立即根据目录重新计算画布预览。

显示购物车中的商品

渲染收件人废弃购物车中的当前商品。

显示的最大产品数： 设置要显示的卡片数量限制（1-12）。
预览用户的购物车： 输入用户 ID 或电子邮件，然后单击预览购物车以查看该块为该特定收件人渲染的效果。

设计网格样式

选择来源后，这些设置控制网格及其卡片的外观。无论您使用哪个来源，它们都保持不变：

列：选择每行 1、2 或 3 个卡片。在移动设备上，卡片始终堆叠在一列中。
间距： 打开以设置卡片之间的空间。关闭则使用默认值（16px）。
描述限制： 描述文本被修剪到的字符限制，以便卡片保持一致的大小。
卡片模板： 选择一个布局，然后为每个卡片设置卡片背景、卡片圆角半径和内容内边距。

下面的块样式设置对整个块进行样式设置，与其中的卡片分开：

背景和背景图片： 在整个网格后面设置背景颜色或图片。
边框颜色、边框宽度和边框半径： 在整个网格周围添加轮廓和圆角。
在移动设备上隐藏和在桌面上隐藏： 在一种设备上隐藏整个块。请参阅按设备显示或隐藏内容。

保存和重用块

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

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

已保存的块出现在块选项卡底部的已保存的块下。

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

保持副本同步

保存块时，打开保持副本同步以将每个插入的副本链接到同一来源。一次编辑来源，更改将应用于使用该块的所有地方，包括已计划发送的电子邮件。

同步的副本在画布上被锁定。您不能直接编辑它。选择副本以打开其设置：

编辑同步的块： 解锁此副本以便您可以更改它。顶部会出现一个横幅。单击应用到所有以将您的更改保存到来源和所有其他副本，或单击取消以放弃它们。您一次只能解锁一个同步的块。
从源更新： 用来源的最新版本替换此副本。
从源分离： 将此副本与来源取消链接，以便您可以单独编辑它。

添加链接

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

打开网站

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

管理偏好设置链接

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

取消订阅链接

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

您也可以在 HTML 块中添加取消订阅链接：

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

发送电子邮件时，%%PW_EMAIL_UNSUBSCRIBE%% 占位符将被替换为 Pushwoosh 取消订阅 URL。

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

如果启用了订阅偏好中心

收件人仅从分配给该电子邮件的类别（例如，新闻通讯）中取消订阅。类别名称将从他们的 Subscribed Email Categories 标签中删除。

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

如果未启用订阅偏好中心

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

点击次数会计入消息历史中的取消订阅率。

网页版本链接

为收件人提供访问电子邮件网页版本的权限，如果他们在收件箱中查看时遇到问题，这会很有用。

不跟踪统计数据

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

订阅表单确认链接

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