Benchmark Email 协助中心

知识库首页 aero-right 拖拉式编辑器 aero-right 邮件区段和区块

邮件区段和区块

拖拉式编辑器 更新日期 三月 16, 2023

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

本篇文章涵盖的主题:


 
区段

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

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

  1. 加号选项提供五种不同类型的栏位,可以添加到邮件排版;电子邮件里面添加区段数量没有限制。

     

    • 一栏
    • 两栏
    • 三栏
    • 两栏式,左侧边栏
    • 两栏式,右侧边栏
  2. 铅笔打开特定区段的样式设定。您可以选定整个区段的背景颜色以及框线>如果您使用的是多栏位区段,可以设定每个栏位。

     

    • 点击区段区域内的任何地方,可以打开区段设置。
    • 请注意内容可单独在区块设定设置样式。
  3. 上下箭头可以重新排定整封邮件的区段顺序。
    • 除了引文区段和页尾区段,每个都可以上移和下移,其他区段不能放在引文区段的上方或页尾区段的下方。
    • 页尾区块保管您的订阅链接,也能在整封中移动;但是,我们建议您保留页尾区块在页尾区段。保留页尾区块在邮件底部,能够让订阅用户轻松取消订阅或管理邮件偏好。
  4. 垃圾桶用途是删除区段。任何时候删除区段,先前添加的内容(比如区块或样式)都会被删除;删除选项不能还原。为了协助您避免丢失先前的内容,系统会要求您确认删除选项。

返回页首


 
全局样式

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

布景颜色

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

背景颜色

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

邮件边界

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

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

  • 框线
  • 框线颜色 
  • 框线尺寸
  • 圆角
    • 套用圆角半径到邮件引文和邮件页尾。
显示区段

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

返回页首


 
区块

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

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

以下是在邮件编辑器中可使用的区块。


 
 
单图区块和图卡区块

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

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

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

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

应该使用哪一个?

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

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

想了解更多关于单图区块,并如何新增图卡区块,请点击此处

您可能感兴趣的主题:

返回区块选单


 
图文区块

编辑器提供三种图文区块:

  • 右栏文字
  • 左栏文字
  • 底端文字

想了解如何新增图文区块点击此处

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

返回区块选单


 
文字区块

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

可用的文本块

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

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

带有图片的文字。如果您需要新增图片且带有文字,可以使用图卡区块或者图文区块

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

 
轻松粘贴新内容

使用「轻松粘贴」功能可以从其他来源复制和粘贴内容。「轻松粘贴」功能让您从其他来源复制和粘贴内容既快速又轻松,比如您的网站,Google 和微软文档,您可以移除原本格式,或者保留格式搭配您的其他页面。

要使用「轻松粘贴」功能,按照以下步骤。

  1. 从起其中一个来源复制内容。
  2. 然后粘贴内容到其中一个邮件文字区块。
  3. 在弹出的窗口,选择「保留」「移除」格式。
    • 移除格式,移除内样式,并保留一些格式,如粗体、斜体、缩进、编号列表和 URL 链接。
    • 保留格式,保留原始内容的样式和架构。「轻松粘贴」功能仅保留邮件安全的 HTML 代码,并删除内容代码中不安全且无效的代码、专属样式、属性和标签。
  1. 完成内容后,点击「保存」

重要

  • 不符合邮件安全的字体默认改成 Arial 字体。
  • 「轻松粘贴」功能不支援图片。
  • 如果需要更多样式,您可以使用文字区块工具栏,或区块的代码编辑器。

要贴上纯文字:

  1. 点击文字区块。
  2. 在上方工具栏,点击粘贴图标(取决于您的屏幕尺寸,此图标可能会在「了解更多」选项下面)。
  1. 在弹出的窗口贴上文字,然后点击「插入」
  2. 点击左侧的「保存并关闭」选项。
 
Source Code

原始码 要新增原始码,点击代码 图标,贴上您的代码。

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

 文字区块格式

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

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

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

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

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

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

您可以在邮件内的文字区块内添加个性化问候语了解如何操作。

点击此处了解电子邮件中可使用的字体。针对登陆页,您可以使用谷歌字体,点击此处,了解更多。

您也可以在文字区块添加链接点击此处,了解更多。

关于登陆页文字,如果您需要更多资讯,点击此处

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

Back to blocks menu


 
视频区块

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

如果您想了解如何新增视频到您的邮件,点击此处

返回区块选单


 
分段区块

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

了解所有分段区块的信息

返回区块选单


 
按键区块

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

要新增按键,将区块拖曳到您想要的位置。在左侧面板,您会看到自定义按键的选项。要了解更多关于按钮编辑选项,请浏览词汇。继续阅读,了解如何设定按键内容。

  1. 在按钮新增按钮文字。使用易记的文字吸引收件人的注意。
  2. 首先,选择「链接类型」,然后在「网站 URL」输入网址。注意,这个页面可能是外部 URL,或是您同一封邮件的某个地方。有两种方式添加链接:
    • 您可以点击位于上方的文字编辑工具栏添加链接。
    • 或是直接在按键区块内容选择「链接类型」。注意:要新增锚点,您需要先建立锚点
  3. 在画面上方的文字编辑工具栏自定义文字或添加链接。
  4. 如果邮件里有多个按键,您不需要逐一设定。设定其中一个按键,然后勾选左侧面板「内容」标先底下的「套用所有按键区块」。邮件的所有按键就会套用相同的内容设定。

返回区块选单


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

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

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

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

使用哪一个区块?

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

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

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

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

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

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

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

返回区块选单


 
导览列区块

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

如何添加导览列区块

  1. 拖曳导览列图标到您的排版。大部分用户喜欢将导览列显示在邮件标头。
  2. 系统默认您的导览列如下图所示:
  1. 现在,点击导览列的一个链接。链接选项会出现在左侧。
  2. 新增您需要的链接类型并自定义。您可以点击「移除链接」选项来移除链接。
  3. 点击一个链接,您也可以修改分隔边界的颜色和外观。分隔边界是非强制性的,如果您不想要,可以更改颜色为透明,或者线的厚度为 0。

如何自定义导览列

要了解「设置」标签,请前往词汇

  1. 新增链接,只要点击「加号」图标。要自定义链接,点击导览列区块的「链接」,点击它,设定链接的选项会显示在左边。您可以新增最多六组链接。链接类型有两种可以选择:文字或图片;您可以选择任何选项。要了解更多关于不同类型的链接,点击此处
  2. 导览列有三种排版供您选择。您可以结合图片和文字。点击并选择符合您设计风格的选项。
  1. 使用水平对齐和垂直对齐选项设定导览列的排列方式。「间距宽度」决定每个链接之间的距离。
  2. 「移动设备样式」可以选择预设、垂直叠加以及垂直叠加并居中。您可以选择浏览设计在移动设备上呈现的样子。

返回区块选单


电子商务区块

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

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

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

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

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

  1. 先添加一张产品图片。
  2. 添加产品描述;内容应该简短且带有描述文字。
  3. 更新您的产品价格。
  4. 然后,自定义产品按钮:
    • 按钮文字
    • 按钮链接,新增一组链接,让联络人能够进到网站完成购买。
    • 最后,设置搭配您品牌特性的按钮样式。要省去重复操作,您可以设定样式套用到邮件里所有按钮。要了解更多关于按钮样式,点击此处

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

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

以下是使用电子商务区块和设置样式的范例

范例 1
范例 2
范例 3

返回区块选单


Shopify 产品区块

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

要使用 Shopify 产品区块,您应该有一组已启用的付费 Shopify 账户。首次使用这个区块,您需整合Shopify 到  Benchmark 账户。要了解如何整合 Shopify 商店到 Benchmark,点击此处

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

drag shopify block

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

Shopify 产品区块包含以下资讯:

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

重要

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

下面是一些 Shopify 产品区块使用和样式示例:

范例 1
范例 2
范例 3

返回区块选单


已保存的区块

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

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

要使用「已保存的区块」

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

删除「已保存的区块」

  1. 拖曳已保存的区块到任何区段。您会在左边看到先前已保存的区块清单。
  1. 点击垃圾桶图标,选择「删除」选项确认操作。

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

返回区块选单


 

邮件范例

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

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

范例 1

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

范例 2

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

范例 3

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

返回页首


 

词汇

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

背景颜色

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

框线和线样式

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

圆角半径

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

间距宽度

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

填充和边距

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

对齐方式

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

行距

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

Hex 代码

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

返回页首


如果您有任何问题,请联系我们的支持团队。