你将会学到 #

了解 Klaviyo 的拖放电子邮件模板编辑器，包括如何使用模板样式和配置每种块类型。 

关于块和布局 #

当您打开 Klaviyo 电子邮件模板编辑器时，侧边栏将显示一系列可供选择的块和部分选项。在基本块（用于从头开始构建电子邮件的空白板）和通用内容（即您在其他模板中构建并保存以供以后使用的内容）之间进行选择。在基本部分中，您将找到块和布局的选择。使用块添加内容，例如文本、图像或按钮。使用布局（即部分和列）对块进行分组并配置它们。可以使用将鼠标悬停在块或部分上时出现的图标来克隆、删除或保存块和部分。 !克隆、保存和删除选项

要移动块或部分，请单击并拖动它。 !移动一个块

模板样式 #

主样式选项卡包含多个将应用于整个模板的样式选项。要访问模板的主要样式设置，请使用*完成按钮导航出您正在处理的任何块或部分，然后单击样式*。 !样式选项卡

您可以在此处设置电子邮件的外观。如果您已完成设置向导，该区域将已经包含您的一些品牌样式。要调整新模板中填充的品牌样式，请导航至*品牌库 > 品牌*。在这里，您可以编辑以下设置：

• *电子邮件*
• *模板背景*

为您的模板选择背景颜色

• *背景图片*

可以选择添加背景图片

• *内容背景*

为电子邮件内容设置背景颜色；此颜色可以与模板背景不同，并且仅跨越电子邮件内容的宽度

• *宽度*

电子邮件内容的宽度（建议 600 像素）

• *圆角半径、边距、填充和边框*

向模板添加间距和边框

• *文本和标题*

设置普通文本和四种标题样式的样式，然后从任何文本块的下拉菜单中选择一种文本样式以应用它

• *字体*

选择文本样式的字体、字体间距、大小、粗细和颜色

• *字母间距*

每个字母之间的水平间距

• *行间距*

文本行之间的垂直间距

• *文本对齐*

选择左对齐、居中或右对齐

• *手机*

选择是否启用移动优化（推荐）或在桌面和移动设备上显示相同的样式和内容

• *其他*
• *货币*

如果与您的帐户设置不同，请为模板选择默认货币

模板样式如何与块和部分样式交互 #

在应用任何块或部分特定的设置之前，您的模板样式设置将首先应用于您的模板。如果块或部分的样式与模板样式冲突，则将使用块和部分样式。例如，如果您在主样式部分中设置内容背景颜色，然后设置特定于块的背景颜色，则该块的背景颜色将用于该块的区域。 ## 部分和部分样式

模板编辑器中的所有内容都组织成多个部分。当您创建新模板时，默认情况下它将包含一个或多个部分，您可以根据需要添加或删除部分。要打开某个部分的设置，请单击该部分内容右侧或左侧的区域。请注意，单击某个块将打开该块的设置，而不是包含该块的部分。每个部分都有一个样式选项卡和一个显示选项选项卡。使用该部分的样式向该部分添加背景图像、填充和其他样式。使用该部分的显示选项来选择哪些设备类型和收件人应该看到这些部分。 了解有关部分的更多信息。

部分样式设置将在模板样式之后、任何特定于块的样式之前应用到模板。 如果模板样式与您的部分样式冲突，则将使用部分样式。如果块的设置与您的部分样式冲突，则将使用块的样式。 ## 块和块样式

在部分中，添加块以用内容填充您的电子邮件。大多数内容块都有一个样式选项卡（您可以在其中配置块的外观）和一个显示选项选项卡（您可以在其中选择谁应该看到该块以及它应该显示在哪些设备类型上）。对于每种块类型，可用的特定样式设置有所不同，但所有块都可以使用相同的显示选项。任何带有颜色选项的样式部分都包含颜色选择器工具，它提供了多种选择颜色的方法：

• 使用渐变字段选择阴影和色调。 – 复制并粘贴 HEX 或 RGB 代码。 – 从您最近使用的颜色或此模板中已有的颜色中进行选择。 – 使用吸管工具从电子邮件画布中的任何位置选择颜色（当前不适用于文本、拆分或表格块）。 !电子邮件模板编辑器中块的颜色选择器。

了解显示选项 或继续阅读以了解块类型以及如何使用它们。 ### 文字

使用文本块将文本添加到电子邮件中。选择文本样式（普通或标题 1 – 4）以应用主模板样式中的样式设置，或使用文本编辑器的设置自定义文本内容。 Klaviyo 的电子邮件编辑器使用 UTF-8 编码标准，这意味着它支持拉丁字符、表情符号、双字节字符等。您可以将动态内容添加到文本块中，为每个收件人个性化消息。详细了解消息个性化。要添加使用从右到左 (RTL) 脚本的语言（例如希伯来语）的副本，请将以下代码片段添加到模板顶部文本块的源代码中：

<样式类型=“文本/css”>
    p, h1, h2, h3, h4, ol, li, ul { 方向：rtl; }
</风格>

折叠内容部分或滚动过去以调整块的样式。为块或文本内容区域选择背景颜色并添加填充。如果您在 Klaviyo 编辑器之外编写副本（例如，在 Google Docs 或 Microsoft Word 中），请确保在将文本粘贴到编辑器中时粘贴为纯文本。使用 *Command+Shift+V 或 Ctrl+Shift+V* 以纯文本形式粘贴。否则，某些样式标签将与文本一起粘贴，这可能会导致设计问题。 ### 图片

使用图像块将图像插入到您的电子邮件中。您可以从以下来源添加图像：

• *图片库*

通过搜索图像库添加您过去上传的图像

• *上传图片*

从您的设备上传 JPEG、PNG 或 GIF

• *导入图像*

使用图像 URL 导入图像

• *动态图像*

使用动态图像变量为每个收件人显示自定义图像（例如，通过引用存储在收件人事件数据中或作为配置文件属性的图像 URL）

选择图像后，调整图像设置，包括替代文本（图像的描述）、图像可点击的链接地址、图像宽度、对齐方式和其他样式。详细了解将图像插入模板。 ### 分裂

使用分割块以任意宽度的两列显示内容。分割块两侧的内容必须是图像或文本内容。默认情况下，您的分割块将使用 50/50 分割；导航至*分割设置*选项卡以调整此比例。或者，您可以使用“列”布局将内容拆分为两列或更多列。 ### 按钮

按钮块创建比常规文本链接更明显的大链接，非常适合强调重要的号召性用语 (CTA)。由于它们用于 CTA，因此您可能只想在每封电子邮件中使用其中几个。至少填写 Text 和 URL 字段。文本是收件人在按钮中看到的内容，URL 是访问者单击按钮时将到达的位置。使用颜色、角半径和填充选项调整按钮的外观、形状和大小。 您还可以在下面调整块的字体和其他样式。 ### 标题/链接栏

使用标题/链接栏块添加徽标和导航链接，以重定向到网站上的不同内容。当您在块中拖动时，您将看到一些常见的标题/链接栏布局可供选择。您可以为桌面和移动设备选择不同的布局，以更好地适应每种设备的尺寸。由于 Outlook 独特的 HTML 渲染引擎，对于使用 Outlook 作为收件箱的收件人，可能会在标题/链接栏元素中添加边框。为了避免这种情况，请使用徽标的图像块和链接的表格创建标题。将您想要的任何链接添加到链接栏。您可以为每个链接设置设备显示设置，我们建议仅在移动设备中显示关键链接，因为设备尺寸较小。添加链接和徽标后，请使用下面的样式选项进行最后的修饰。您可以更改块的字体、颜色和间距。准备就绪后，在桌面和移动设备上预览以查看最终产品。 ### 阴影

使用阴影可以增加信息的深度或强调某个区域。阴影的颜色选项包括浅色、深色和较深，并且您可以设置块的背景颜色和填充。 ### 分隔线

在其他内容块之间添加一条简单的线。在实线、虚线或虚线之间进行选择。颜色、尺寸和填充是完全可定制的。以前称为水平规则。 ### 社交链接

社交链接块是为 Instagram、Pinterest、Facebook、X (Twitter) 等添加社交图标的简单方法。 Klaviyo 为各种网站提供标准的全彩图标，以及简化的黑色、白色或灰色选项。如果您希望使用完全自定义的社交图标，请使用自定义选项并上传您自己的图像文件。如果您选择此路线，我们建议使用 96 像素正方形的图像。要保持 Klaviyo 的社交图标和自定义图像之间的间距和对齐，请使用 50 像素宽的图标，并且在图像文件中垂直和水平居中。拖动侧栏中的图标标签以重新排序图标。您可以使用*添加间隔*按钮来更精细地控制每个图标之间的空间。 ### 垫片

间隔块在垂直堆叠的块之间添加可定制的空间量。要自定义并排块之间的空间（例如，在一列中），请使用左/右填充。 ### 产品

使用产品块添加商店目录中的推荐商品。添加产品块时，您将有两个选项：动态或静态。动态源会自动更新，并通过产品源进行配置。要了解有关设置产品 Feed 的更多信息，请阅读我们的文章如何使用产品 Feed 和建议。静态产品块仅显示您在模板编辑器中手动选择的目录项，并且不会自动更新或针对单个收件人。使用任一选项，一旦选择了提要或项目，您就可以自定义块的外观。产品块可以仅显示图像，或包含每个商品的名称和价格。滚动浏览产品块样式选项卡中的所有选项以完全自定义该块。 ### 表

表格块可以帮助您在电子邮件模板中构建图像和文本。表格块使您可以灵活地添加任意数量的列或行（这将自动调整间距，或者您可以在 Columns 选项卡的 Width 设置中设置宽度）。当表格块首次拖入模板时，它具有一行两列。使用*表格设置选项卡添加其他行和列，然后导航回内容选项卡以配置表格的内容。使用单元格选择器部分打开特定单元格的内容。使用单元格内容部分在文本或图像内容之间进行选择，然后添加您的内容。请注意，如果您在文本和图像内容类型之间来回切换，则可能会丢失该单元格中之前的内容；使用撤消按钮恢复您的更改。要编辑表格的颜色、字体、边框和布局，请打开表格设置*选项卡。表格块还用于显示动态内容，例如收件人购物车中商品列表的详细信息。 了解有关动态表块的更多信息。 ### HTML

使用 HTML 块将自定义代码添加到您的模板中。添加自定义编码元素、第三方功能（例如倒计时器）(https://help.klaviyo.com/hc/en-us/articles/115000780232) 或自定义 CSS 时，请使用此块类型。如果您在使用电子邮件中的自定义代码时遇到问题，请了解如何对模板中的自定义代码进行故障排除。 ### 评论报价

如果您使用 Klaviyo 评论，请提供真实的客户评论，以提供品牌价值的社交证明并提高转化率。评论引用块提供了一系列评论供您在消息中使用。如果您还无法选择评论，可能是因为：

• 您的帐户中没有足够的高质量评论可供选择。稍后回来查看精选评论。 – 您的评论尚未处理。如果您想发表全新的评论，请等待几个小时，然后再重试。 – 您帐户中的评论未经验证。要进行验证，评论必须通过 Klaviyo 评论请求流程 中的个性化链接提交，或在 [从其他人上传的评论 CSV 中标记为已验证]平台](https://klaviyo.zendesk.com/hc/en-us/articles/16318811222555)。未经验证的评论（包括直接提交到您网站的评论）不符合包含在评论报价块中的资格。 ### 栏目

您可以使用两个不同的块将列拖到电子邮件模板中：拆分块和列布局。使用分割块，您只能在两列中显示文本和图像内容，但可以精确调整每列的宽度。使用列布局，您可以向每列添加任何类型的内容，但仅限于少数预先选择的列宽度选项。但是，列布局允许一到四列。将列添加到模板后，将内容块放入每列中以填充它。您不仅限于每列只有一个内容块：可以根据需要添加任意数量的内容块，并相互堆叠。 ### 视频

视频块创建嵌入到电子邮件中的视频的外观。当收件人单击播放按钮时，将打开一个新选项卡并播放视频。要添加视频块，请从 Youtube、Vimeo、TikTok 或您选择的视频托管平台复制视频的 URL。如果您的视频来自 Youtube，Klaviyo 会自动选择缩略图。如果您使用任何其他来源的视频，您还需要上传视频缩略图。播放按钮将叠加在视频缩略图上，您可以在块设置中将其关闭。 #### 为什么视频不能直接在电子邮件中播放？大多数主要电子邮件客户端（例如 Gmail）将视频等嵌入内容视为安全威胁。这些电子邮件客户端通常会完全删除此嵌入代码，并且您的收件人在打开您的电子邮件时将看不到呈现的内容。 Klaviyo 致力于帮助我们的客户取得成功。由于我们的测试表明视频无法在所有主要电子邮件客户端上可靠地呈现，因此我们不支持直接嵌入视频。 ## 通用内容

您可以使用星号图标保存模板中的块或部分，以便在任何其他模板中使用。如果您保存块或部分，它将显示在电子邮件模板块的*通用*选项卡中。当您对通用块或部分进行编辑时，您可以选择将这些编辑应用到已保存内容的所有实例。了解有关使用通用保存内容的更多信息。 ## 撤消和重做

如果您在编辑模板时犯了错误，请使用撤消按钮将其恢复。您还可以使用“重做”按钮来撤消该更改。您的模板将在整个编辑会话期间自动保存，并且只要您正在编辑模板，撤消/重做按钮就会记录您的更改。但是，过去的更改只会在您的编辑会话期间存储。如果您退出模板并稍后返回，“撤消”按钮将被禁用，直到您进行未来的更改。 ## 预览您的电子邮件

使用*预览和测试*按钮预览您的电子邮件在收件人收件箱中的显示方式。如果您在“电子邮件模板”选项卡中构建电子邮件，请确保根据电子邮件的发送方式预览电子邮件。使用下表确定预览的最佳方式。 | | |