可自定义的片段 customizable-fragments

在电子邮件或电子邮件模板中使用片段时，默认情况下会由于继承而锁定这些片段，这意味着对片段所做的任何更改都会自动传播到使用该片段的所有资源。 利用可自定义的片段，在将片段添加到电子邮件或电子邮件模板时，可以将片段中的特定字段定义为可编辑。 例如，如果片段中包含横幅、某些文本和按钮，您可以将某些字段（如图像或按钮目标URL）指定为可编辑。

通过可自定义的片段，您可以管理和个性化内容，而无需创建全新的内容块或中断片段继承。 在片段级别所做的更改仍会传播，同时允许在电子邮件或电子邮件模板级别进行自定义。

可视片段和表达式片段均可以标记为可自定义。

在可视片段中添加可编辑字段 visual

要使可视片段的某些部分可编辑，请执行以下步骤：

将片段添加到电子邮件后，用户可以自定义片段中配置的所有可编辑字段。

片段中的可编辑HTML组件 editable-html

在HTML组件中，可以将以下类型的元素设置为可编辑：

每个参数化CSS属性值必须刚好是{{{varName}}}：没有后缀、没有附加文本、没有多个变量以及单个属性内没有连接。

要参数化多侧属性（如填充），请执行以下任一操作：

可编辑字段在HTML组件中的工作方式 components

HTML组件中的可编辑字段是通过直接在组件的源代码中声明内联变量创建的。 每个变量都有一个唯一的ID和一个默认值。 然后，只要可编辑值出现在标记中，就会引用变量。

保存并发布片段后，在将片段添加到电子邮件时，在HTML组件中声明的每个变量都会自动显示为可编辑参数。

然后，电子邮件作者可以覆盖来自Email Designer的任何变量的默认值（例如，更改背景颜色、交换CTA URL或更新标题），而无需修改底层HTML。

语法参考 syntax

可使用两种模式定义和引用可编辑字段：

声明变量 declaring

使用内联声明定义具有唯一ID和默认值的变量：

{{#inline "variableID"}}default_value{{/inline}}

将variableID替换为可编辑字段的唯一标识符。 该ID在组件中必须唯一，且不得包含空格。

将default_value替换为电子邮件作者未覆盖它时应使用的值。

引用变量 referencing

使用三大括号引用变量的值，无论该变量的值出现在标记中什么位置：

{{{variableID}}}

在HTML中，可多次引用同一变量ID。 所有引用都将解析为电子邮件作者设置的任何值（如果未提供覆盖，则解析为默认值）。

可选参数 optional

内联声明支持可更改可编辑字段显示或处理方式的可选参数：

向HTML组件添加可编辑字段 adding-editable-fields

要使可视片段中HTML组件的某些部分可编辑，请执行以下步骤：

在电子邮件中使用片段 using-fragment

片段发布后，在其HTML组件中声明的所有变量将作为可编辑参数显示在电子邮件Designer中。

要在电子邮件中使用片段时自定义它们，请执行以下操作：

片段使用自定义值呈现，同时仍继承对已发布片段所做的任何未来结构更新。

示例：包含可编辑文本、颜色和URL的简单片段 example

以下示例使用四个可编辑字段创建一个小型促销横幅：

发布片段后，电子邮件作者可以在将片段添加到电子邮件时覆盖这些值中的任意值。

简单可编辑的横幅

<!-- Define editable variables -->
{{#inline "bgColor"}}#0057FF{{/inline}}
{{#inline "headlineText"}}Example Headline{{/inline}}
{{#inline "ctaText"}}Learn More{{/inline}}
{{#inline "ctaUrl" assetType="url"}}https://www.example.com{{/inline}}

<!-- Use the variables in the HTML -->
<table width="100%" cellpadding="0" cellspacing="0"
       style="background-color:{{{bgColor}}}; border-radius:8px;" >
  <tr>
    <td style="padding:30px; text-align:center; font-family:Arial,sans-serif;">
      <h2 style="color:#ffffff; font-size:24px; margin:0;">
        {{{headlineText}}}
      </h2>
      <a href="{{{ctaUrl}}}"
         style="display:inline-block; margin-top:16px; padding:12px 28px;
                background:#ffffff; color:{{{bgColor}}};
                font-weight:bold; border-radius:4px; text-decoration:none;">
        {{{ctaText}}}
      </a>
    </td>
  </tr>
</table>

在此示例中：

最佳做法 best-practices

注意事项 things-to-know