---
title: 邮件区段和区块
description: 随时新增区段和重新排版区块。使用区段在邮件来新增栏位，区块用来添加内容，比如图片…
url: "https://www.benchmarkedm.cn/docs/emails-sections-and-blocks/"
updated: "2025-05-22"
category: 模板与编辑器
---

# 邮件区段和区块

随时新增区段和重新排版区块。使用区段在邮件来新增栏位，区块用来添加内容，比如图片，文字，或按钮。使用邮件拖曳式编辑器，既轻松又快速设置电子邮件样式，备受我们的客户喜欢和赞赏。

##### 区段

区段是在编辑器中用来架构电子邮件的功能。区段可以隔开您的邮件内容，充当内容区块的容器。您可以添加新的区段，删除区段，在设置区段样式时，也可以在邮件里单独区段设置样式。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/section-01.png?resize=600%2C330&ssl=1)

 

以下是使用区段运作方式：

1. **加号选项**提供五种不同类型的栏位，可以添加到邮件排版；电子邮件里面添加区段数量没有限制。![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/sections-02.png?resize=666%2C175&ssl=1)
   - 一栏
   - 两栏
   - 三栏
   - 两栏式，左侧边栏
   - 两栏式，右侧边栏
2. **铅笔**打开特定区段的样式设定。您可以选定整个区段的背景颜色以及框线> 如果您使用的是多栏位区段，可以设定每个栏位。![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/sections-03.gif?resize=1822%2C1132&ssl=1)
   - 点击区段区域内的任何地方，可以打开区段设置。
   - 请注意**内容**可单独在区块设定设置样式。
3. **上下箭头**可以重新排定整封邮件的区段顺序。
   - 除了引文区段和页尾区段，每个都可以上移和下移，其他区段不能放在引文区段的上方或页尾区段的下方。
   - **页尾区块**保管您的订阅链接，也能在整封中移动；但是，我们建议您保留页尾区块在页尾区段。保留页尾区块在邮件底部，能够让订阅用户轻松取消订阅或管理邮件偏好。![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/sections-04.gif?resize=722%2C590&ssl=1)
4. **垃圾桶**用途是删除区段。任何时候删除区段，先前添加的内容（比如区块或样式）都会被删除；删除选项不能还原。为了协助您避免丢失先前的内容，系统会要求您确认删除选项。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/sections-05.png?resize=489%2C229&ssl=1)

 

---

 

##### 全局样式

在全局样式设定中，您可以管理邮件布景颜色；您也可以新增通用背景颜色和边框。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/sections-06.png?resize=1278%2C1238&ssl=1)

###### 布景颜色

系统提供 27 种不同的布景颜色；选择一款符合您需求的颜色。即便选了特定的布景颜色，区段和区块仍然可以自定义。

###### 背景颜色

此选项可以让您选择一款特定的背景颜色，选择可用的颜色或者添加 hex 颜色代码。另外，单个区段和区块设定背景颜色。

###### 邮件边界

您可以在**「邮件边界」选项**更改背景为**全屏背景**或**边框背景**。全屏背景没有其他样式选项。

在边框背景选项，您可以新增或更改以下选项：

- 框线
- 框线颜色
- 框线尺寸
- 圆角
  - 套用圆角半径到邮件引文和邮件页尾。

###### 显示区段

「显示区段」选项可以浏览邮件内所有区段，选择「隐藏区段」则会移除区段名称。在此画面，您也可以点击任何区块进行编辑。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/hide-sections-button.png?resize=940%2C1024&ssl=1)

---

 

##### 区块

和区段不同的是，区块是用来保留和显示邮件内容。区块是一种设计元素，具有功能性。使用区块可以添加图片、按钮或文字。每个内容区块有不同的样式选项。

要新增一个区块到您的邮件，点击想要添加的区块，并拖曳到邮件的区段中。

 

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/image-blocks-icons.png?resize=242%2C133&ssl=1)

 

###### 单图区块和图卡区块

您可以透过这些区块上传图片，或从您的图库选择图片。要使用这些区块，将他们拖曳到您的邮件，然后有两个选项可以新增您的图片。

1. **拖曳图片**。从您的计算机拖曳图片前，确保您已点击并开启此区块。
2. **汇入文档**。从图库选择已有的图片。您可以**上传新的图片**，或使用存在其他网站的图片。如果您有**图片链接**，点击**插入图片链接**选项，贴上图片链接。
3. 邮件排版加入图片后，您会看到左侧提供选项可以自定义图片。

**单图区块**可以新增图片到您的排版，而**图卡区块**可以同时新增图片和文字，放到您的排版。

下面左边是单图区块，右边是图卡区块。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/image-block-and-card.png?resize=640%2C342&ssl=1)

###### **应该使用哪一个？**

使用**单图区块**可以新增一张简单的图片。

使用**图卡区块**可以给图片添加文字叙述。移除这个区块，文字叙述也会跟着移除。

想了解更多关于单图区块，并如何新增图卡区块，请[点击此处](https://kb.benchmarkemail.com/cn/how-to-add-images/)**；**

**您可能感兴趣的主题：**

- [使用图片编辑器编辑您的图片](https://kb.benchmarkemail.com/cn/edit-and-resize-images/)
- [什么是图库？它支持什么类型的图片？](https://kb.benchmarkemail.com/cn/what-is-the-image-gallery/)
- [如何取得图片的 URL？](https://kb.benchmarkemail.com/cn/how-to-add-images/#how-to-get-an-image-url)
- [如何取得免费图片？](https://kb.benchmarkemail.com/cn/how-to-add-images/#stock-photos)
- [从编辑器删除图片](https://kb.benchmarkemail.com/cn/how-to-add-images/#deleting-images)

---

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/iconcaption-blocks.png?resize=350%2C125&ssl=1)

###### 图文区块

编辑器提供三种**图文区块：**

- 右栏文字
- 左栏文字
- 底端文字

想了解如何新增**图文区块**，[点击此处](https://kb.benchmarkemail.com/cn/how-to-add-images/#image-caption)。

**图文区块**可以在区块内同时新增图片以及文字。图文区块和图卡区块最主要的差别在于图文区块没有框架，所以您可以调整区块内的间距，如下图所示（左图为图文区块，右图为图卡区块）。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/caption-block-or-image-card.png?resize=640%2C354&ssl=1)

---

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/text-block.png?resize=112%2C125&ssl=1)

 

###### 文字区块

您可以使用**文本**区块新增文字到您的邮件。要使用此区块，将区块拖曳到您想要放置的位置。接着，点击区块，将默认文字改成您的内容。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/sections-09.gif?resize=1600%2C1178&ssl=1)

###### 可用的文本块

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/text-blocks.png?resize=268%2C140&ssl=1)

**文字区块**。添加文字方框到您的邮件排版。

**文本框。**在文字方框外添加框线。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/text-blocks-with-images.png?resize=513%2C140&ssl=1)

**带有图片的文字。**如果您需要新增图片且带有文字，可以使用[**图卡区块**](https://kb.benchmarkemail.com/cn/how-to-add-images/#image-card)或者[**图文区块**](https://kb.benchmarkemail.com/cn/how-to-add-images/#image-caption)。

**要编辑文字**，使用在邮件上方的工具栏。您会看到常用的文字编辑选项，也会看到其他选项，比如，建立锚点，添加链接，图片，甚至链接文档。

**复制粘贴**

如果您要复制文字并贴到您的邮件，我们建议您使用**贴上** ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/paste.png?resize=25%2C25&ssl=1) 功能，移除文字内任何隐藏字符，因为他们可能会影响您的文字设计。

**要贴上纯文字：**

1. 点击文字区块。
2. 在上方工具栏，点击粘贴图标（取决于您的屏幕尺寸，此图标可能会在**「了解更多」**选项下面）。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/paste-as-plain-text.png?resize=477%2C367&ssl=1)

1. 在弹出的窗口贴上文字，然后点击**「插入」**。
2. 点击左侧的**「保存并关闭」**选项。

###### **Source Code**

**原始码 **要新增原始码，点击代码 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/code.png?resize=25%2C20&ssl=1) 图标，贴上您的代码。

 

如果您没有看到上述的符号，请点击工具栏右边的**「更多」**图示。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/sections-10.png?resize=640%2C129&ssl=1)

 

######  **文字区块格式**

点击文字区块，您可以看到左侧的自定义选项。

在**「设置」**标签，您可以设定**背景颜色**，**间距**，以及文本区块的**框线**。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/container-tab-text-blocks.png?resize=560%2C357&ssl=1)

 

透过**「内容」**标签调整**行距**，如果有需要可以更改**栏数**的数量。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/content-tab-text-blocks.png?resize=340%2C300&ssl=1)

 

与任何文字编辑器一样，我们给您提供基本的格式工具栏。在上方工具栏，找到需要自定义文字的选项（粗体，斜体，底线，删除线，文字颜色，字体和字号）。

您也可以在此使用**对齐方式**，**添加编号**或**项目符号。**

此外，您也可以插入链接，锚点，图片，视频和附件，以及使用合并标签选项。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/upper-bar-options.png?resize=871%2C122&ssl=1)

 

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2021/05/note-icon.png?resize=30%2C30&ssl=1)

您可以在邮件内的文字区块内添加**个性化问候语**。[了解如何操作。](https://kb.benchmarkemail.com/cn/how-to-add-personalized-data-to-emails/)

[点击此处](https://kb.benchmarkemail.com/cn/are-there-new-fonts-available-for-my-emails/)了解电子邮件中**可使用的字体**。针对登陆页，您可以使用谷歌字体，[点击此处](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#typography)，了解更多。

您也可以在文字区块**添加链接**。[点击此处](https://kb.benchmarkemail.com/cn/how-to-add-links-in-your-benchmark-email/)，了解更多。

关于登陆页文字，如果您需要更多资讯，[点击此处](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#text-block)。

 

**注意：**有些情况下，在编辑文字区块时，您会看到 TinyMCE 商标。TinyMCE 是第三方平台，让我们拖曳式编辑运行更快更顺畅。这个商标不会出现在邮件中，只有在编辑文字区块的时候才看见。

 

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2015/02/tiny-logo-text.png?resize=618%2C139&ssl=1)

 

---

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/video-icon.png?resize=112%2C125&ssl=1)

 

###### 视频区块

视频是非常有效的视觉工具。透过视频，您可以呈现产品的质量，或是为什么顾客应该放弃您的竞争对手，选择您的产品。千万别错失在邮件中使用视频的机会。

如果您想了解如何新增视频到您的邮件，[**点击此处**](https://kb.benchmarkemail.com/cn/how-do-i-insert-a-video-into-my-emails/)。

 

---

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2019/10/Divider-1.png?resize=112%2C121&ssl=1)

###### 分段区块

使用分段区块将邮件的区块或区段间隔开来。这个区段不一定要设定为空白。要新增分段区块，将区块拖曳到您想要的位置。

[了解所有分段区块的信息](https://kb.benchmarkemail.com/cn/using-email-dividers/)。

 

---

**![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/button-icon.png?resize=112%2C125&ssl=1)**

 

###### 按键区块

行为召唤 (CTA) 按钮是邮件最趣的部份。按钮可以用来引导用户浏览登陆页。

要新增按键，将区块拖曳到您想要的位置。在左侧面板，您会看到自定义按键的选项。要了解更多关于按钮编辑选项，请浏览[词汇](https://kb.benchmarkemail.com/cn/emails-sections-and-blocks/#glossary)。继续阅读，了解如何设定按键**内容。**

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/button-options.png?resize=1443%2C1145&ssl=1)

1. 在按钮新增按钮文字。使用易记的文字吸引收件人的注意。
2. 首先，选择「链接类型」，然后在「网站 URL」输入网址。注意，这个页面可能是外部 URL，或是您同一封邮件的某个地方。 有两种方式添加链接：
   1. 您可以点击位于上方的文字编辑工具栏添加链接。![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/link-options.png?resize=351%2C352&ssl=1)
   2. 或是直接在按键区块内容选择「链接类型」。**注意：**要新增锚点，您需要先建立[锚点](https://kb.benchmarkemail.com/cn/how-to-add-links-in-your-benchmark-email/#anchorlink)。
3. 在画面上方的文字编辑工具栏自定义文字或添加链接。
4. 如果邮件里有多个按键，您不需要逐一设定。设定其中一个按键，然后勾选左侧面板「内容」标先底下的「套用所有按键区块」。邮件的所有按键就会套用相同的内容设定。

 

---

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/social-share-icons.png?resize=249%2C125&ssl=1)

 

###### 社群追踪区块 & 社群分享区块

社群媒体区块很重要。我们的编辑器提供两种类型的区块，可以增加社群渠道。要使用任何一个区块，拖曳至选定的位置。

**社群追踪区块**可以让您添加社群媒体图标，或者图标加文字。这个区块可以让您添加多达 20 种不同的社群平台，包括 Facebook, Twitter, Whatsapp, Linkedin, YouTube, Pinterest, RSS, Vimeo, TripAdvisor 等。

**社群分享区块**可以添加：Facebook, Twitter, Linkedin, Myspace, 和 instapaper。这个区块可以让用户直接分享邮件到社群媒体。

**使用哪一个区块？**

如果您想引导邮件收件人到社群媒体，使用**社群追踪**区块**。**用户点击想要浏览的社群媒体，以及点赞，或者添加到偏好中。

现在，如果您想要用户分享您的内容，就使用**社群分享**区块。

了解如何使用设置，前往词汇。

**依据以下指示在两个区块内添加社群媒体：**

1. 拖动想要使用的区块或点击排版现有的社群媒体区块。
2. 进入左侧导览列的**「内容」**标签。
3. 点击**「新增」**下拉选单并选择平台，然后点击方框旁边的**加号**图标。
4. 在排版中，点击新增的社群平台图标。自定义图标的选项设定会显示在左侧。

新增 URL 链接并自定义图标。完成后，您也能使用选项**「套用圆角至所有区块的按键」**，应用同样的圆角设定到所有区块的按键。

 

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/apply-to-all-radius.png?resize=382%2C148&ssl=1)

 

此外，将鼠标放在社群媒体图标上可以看到**移动**或**删除**的选项。

 

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/hoverin-social-icons.png?resize=309%2C128&ssl=1)

 

---

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/navigation-block.png?resize=112%2C125&ssl=1)

###### 导览列区块

透过锚点，或者外部链接，导览列用来引导邮件收件人到邮件其他部分。

如何添加导览列区块

1. 拖曳导览列图标到您的排版。大部分用户喜欢将导览列显示在邮件标头。
2. 系统默认您的导览列如下图所示：

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/default-navigation-bar.png?resize=692%2C52&ssl=1)

1. 现在，点击导览列的一个**链接**。链接选项会出现在左侧。
2. 新增您需要的链接类型并自定义。您可以点击**「移除链接」**选项来移除链接。
3. 点击一个链接，您也可以修改分隔边界的颜色和外观。分隔边界是非强制性的，如果您不想要，可以更改颜色为透明，或者线的厚度为 0。

**如何自定义导览列**

 

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/content-navigation-bar-options.png?resize=350%2C499&ssl=1)

要了解**「设置」**标签，请前往[词汇](https://kb.benchmarkemail.com/cn/emails-sections-and-blocks/#glossary)。

1. **新增链接**，只要点击「加号」图标。要自定义链接，点击导览列区块的「链接」，点击它，设定链接的选项会显示在左边。您可以新增最多六组链接。链接类型有两种可以选择：文字或图片；您可以选择任何选项。要了解更多关于不同类型的链接，[点击此处](https://kb.benchmarkemail.com/cn/how-to-add-links-in-your-benchmark-email/)。
2. 导览列有三种排版供您选择。您可以结合图片和文字。点击并选择符合您设计风格的选项。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/navigation-bar-example.png?resize=545%2C174&ssl=1)

1. 使用水平对齐和垂直对齐选项设定导览列的排列方式。「间距宽度」决定每个链接之间的距离。
2. 「移动设备样式」可以选择预设、垂直叠加以及垂直叠加并居中。您可以选择浏览设计在移动设备上呈现的样子。

 

---

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/ecommerce-block.png?resize=115%2C129&ssl=1)

###### 电子商务区块

您可以在电子邮件里使用电子商务区块，推广和销售您的产品。

电子商务区块包含以下内容：

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/e-commerce-block-BME.png?resize=480%2C383&ssl=1)

1. 图片占位符
2. 产品描述
3. 产品价格
4. 按钮

要使用产品区块，点击区块并拖曳到电子邮件区段里面。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/ecommerce-block.gif?resize=634%2C420&ssl=1)

要自定义您的电子商务区块，请按照以下步骤。

1. 先添加一张产品图片。
2. 添加产品描述；内容应该简短且带有描述文字。
3. 更新您的产品价格。
4. 然后，自定义产品按钮：
   - 按钮文字
   - 按钮链接，新增一组链接，让联络人能够进到网站完成购买。
   - 最后，设置搭配您品牌特性的按钮样式。要省去重复操作，您可以设定样式套用到邮件里所有按钮。要了解更多关于按钮样式，[点击此处](https://kb.benchmarkemail.com/cn/emails-sections-and-blocks/#button-block)。

如果不想要使用任何区块元素，在「内容」标签下关闭即可。

1. 完成后，点击**「保存」**，然后点击**「保存及下一步」**，或者只点击邮件外边即可保存操作。

以下是使用电子商务区块和设置样式的范例
 范例 1
 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/example-ecommerce-03.png?resize=640%2C606&ssl=1)
 范例 2
 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/example-ecommerce-02-1.png?resize=640%2C557&ssl=1)
 范例 3
 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/example-ecommerce-01.png?resize=640%2C527&ssl=1)

---

 

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/shopify-block-icon.png?resize=115%2C127&ssl=1)

 

###### Shopify 产品区块

要开始，点击区块并拖曳到电子邮件区段里面。

要使用 Shopify 产品区块，您应该有一组已启用的付费 Shopify 账户。首次使用这个区块，您需整合Shopify 到  Benchmark 账户。要了解如何整合 Shopify 商店到 Benchmark，[点击此处](https://kb.benchmarkemail.com/cn/integrate-benchmark-shopify/)。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/connect-products-shopify.png?resize=1500%2C1100&ssl=1)

成功整合 Shopify 账户到 Benchmark，您可以看到可选择的 Shopify 产品列表。

![drag shopify block](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2018/11/shopify-dragging-block.gif?resize=682%2C400&ssl=1)

 

选择可用的产品。区块会自动填入 Shopify 产品详细资讯。

**Shopify 产品区块包含以下资讯：**

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/shopify-product-block-container.png?resize=350%2C357&ssl=1)

1. **产品图片**
   - 产品图片是从 Shopify 产品 URL 获取的。图片不会保存在 Benchmark 图库。但是，如果使用过 Benchmark 图片编辑器修改，修改过的图片会另存在 Benchmark 图库。
2. **产品描述**
   - 产品描述从 Shopify 中获取产品名称。
3. **产品价格**
   - 产品价格是 Shopify 商店指定的产品价格。
4. **产品按钮**
   - 产品按钮会自动连到您 Shopify 商店的产品 URL。

**重要**

- 如果您的 Shopify 账户不是后台账户，需要**产品权限**。要了解更多关于 **Shopify 用户权限**，[点击此处](https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts#manage-staff)。
- 一次只能连接到一个 Shopify 商店。使用「更改商店」选项移除先前的商店产品。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/shopify-change-store.png?resize=400%2C233&ssl=1)

- Shopify 提供的资讯会自动填入 Shopify 产品详细资讯。因此，在 Benchmark 内任何更改的详细资讯不会更新到 Shopify。
- 如果电子邮件或登陆页已经选择了一项产品，之后该产品在 Shopify 有更新，产品详细资讯不会自动更新到 Benchmark。
- 封存的产品不会出现在可选择的产品列表里。
- 使用电子邮件的分析报告来追踪电子邮件里面 Shopify 产品 URL 的点击数。
- 复制区块可以保留先前添加到原本区块的格式。但是，如果您选择一款不同的产品，且先前的格式已经移除，您需要重新设定格式。

**下面是一些 Shopify 产品区块使用和样式示例：**
 范例 1
 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/shopify-example-01.png?resize=640%2C556&ssl=1)
 范例 2
 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/shopify-example-002.png?resize=618%2C705&ssl=1)
 范例 3
 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/shopify-example-03.png?resize=640%2C685&ssl=1)

 

---

 

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/saved-block-icon.png?resize=115%2C129&ssl=1)

###### 已保存的区块

使用已保存的区块，节省设计时间。您可以保存设计好的区块，以便后续设计重新使用。保存区块时，区块的样式、文字以及图片会保留下来。添加保存的区块到您的设计后，您就可以修改内容，原本保存的区块则不会改变。

 

**要保存区块**，移动鼠标到区块上方，点击「保存区块」选项。命名区块，点击**「保存并关闭」**。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/saving-a-block.gif?resize=1226%2C786&ssl=1)

**要使用「已保存的区块」**

1. 拖曳已保存区块到电子邮件设计中，放置到想要放置的区段。
2. 选择要使用的区块，继续编辑区块或保存并关闭。
   - 将鼠标放置在已保存的区块上，会显示并预览区块的内容。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/adding-a-saved-a-block.gif?resize=1226%2C786&ssl=1)

**删除「已保存的区块」**

1. 拖曳已保存的区块到任何区段。您会在左边看到先前已保存的区块清单。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/saved-block-list.png?resize=1024%2C464&ssl=1)

1. 点击垃圾桶图标，选择**「删除」**选项确认操作。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/delete-saved-blocks.png?resize=1024%2C397&ssl=1)

如果没有保存的区块，您可以从设计中删除**「已保存的区块」**。

 

---

 

##### 邮件范例

以下是一些使用区段来优化邮件的范例。

下方邮件范例是我们在整封邮件使用的区段和区块。

###### 范例 1

我们在引文区段开始添加导览列。此范例的标题使用左侧边栏，然后在第二个栏位，我们使用图卡区块，添加图片和文字。最后，在底部左边栏位，我们添加社群媒体图标，请求订阅用户反馈。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/email-example-1.png?resize=1229%2C1999&ssl=1)

 

 

###### 范例 2

我们建立这个邮件范例使用一栏和两栏区段。我们在「全局样式」也添加了边框背景和使用框线圆角选项，突出邮件内容。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/email-example-2.png?resize=1826%2C1395&ssl=1)

 

 

###### 范例 3

在最后一个范例，我们使用多组栏位建立邮件。我们使用分隔线间隔区段。如您所见，整封邮件我们有使用图片区块，文字区块，按键区块，社群媒体区块和视频区块。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/example-1.png?resize=1826%2C2655&ssl=1)

 

---

 

##### 词汇

「设置」选项会根据您所编辑的区块而有所不同。

**背景颜色**

透过这个选项，您可以设定背景颜色。想要使用此选项，点击颜色圆圈，从颜色工具栏选择一款颜色。如果您有 Hex 颜色代码，直接贴到方框内。完成后，点击**「保存」**。**「重新编辑」**选项会恢复到原本的外观设定。

**框线和线样式**

有些元素有提供「框线」选项。点击颜色圆圈，可以设定框线颜色，然后从颜色工具栏选择一款颜色。 您也可以使用 Hex 颜色代码。至于框线样式，从九种可使用的线型中选择，框线的厚度范围为 0 到 99。更改颜色为透明，或者线的厚度为 0。**「重新编辑」**选项会恢复到原本的外观设定。

**圆角半径**

有些元素有提供圆角半径选项。此选项可以设定区块圆角。您可以设定的圆角半径范围为 0 到 20。完成后，您可以在区块所有按键区块套用圆角半径；此设定可以让所有按钮都有同样的圆角半径。

**间距宽度**

「间距宽度」选项在有些栏位可使用，像是导览列，社群追踪，社群分享区块。此选项定义了区块间的间隔。要设定间距宽度，滑动绿色的圆点，范围为 0 到 20。

**填充和边距**

「填充和边距」选项通常在「内容」标签下方。两者都是与区块周边的间隔相关。您也可以滑动滑竿来设定填充和边距。

**对齐方式**

「对方方式」选项是与区块位置相关。点击想要的对齐方式选项，您就可以设定；居中，左对齐，右对齐，底部对齐，或顶部对齐。

**行距**

「行距」选项是只有在文字区块使用，用来定义两个内联元素之间的高度。可使用的行距选项有单行间距、1.25、 1.5和 2 倍行距。

**Hex 代码**

Hex 代码是代表颜色的值。这个代码以井号（#）开头，后面带着六个字符；例如，#CFCFDA，字符会是数字或是字母。Hex 代码用来添加品牌颜色。如果您不确定您的 Hex 代码，您可以使用设计软件或线上拾色器。

 

---

 

关于如何使用区段或特定区块，如果您有问题，请随时通过[电子邮件](mailto:support@benchmarkemail.com)，[线上客服](https://secure.livechatinc.com/licence/1067033/open_chat.cgi?groups=8)或致电联络我们支援团队。