可自訂的片段 customizable-fragments

在電子郵件或電子郵件範本中使用片段時，依預設會因繼承而鎖定，這表示對片段所做的任何變更都會自動傳播至使用它的所有資產。 有了可自訂的片段，當片段新增到電子郵件或電子郵件範本時，片段中的特定欄位可以定義為可編輯。 例如，如果您的片段具有橫幅、某些文字和按鈕，您可以將某些欄位（例如影像或按鈕目標URL）指定為可編輯。

可自訂的片段可讓您管理和個人化內容，而不會建立全新的內容區塊或中斷片段繼承。 在片段層級進行的變更仍會傳播，同時允許在電子郵件或電子郵件範本層級自訂。

視覺效果和運算式片段都可以標示為可自訂。

在視覺片段中新增可編輯欄位 visual

若要讓視覺化片段的某些部分可編輯，請遵循下列步驟：

將片段新增到電子郵件後，使用者可以自訂片段中設定的所有可編輯欄位。

片段中的可編輯HTML元件 editable-html

在HTML元件中，下列型別的元素可以變成可編輯：

每個引數化CSS屬性值必須剛好是{{{varName}}}：沒有尾碼、沒有額外的文字、沒有多個變數，以及單一屬性內沒有串連。

若要將多側屬性（例如內距）引數化，請執行下列其中一項操作：

HTML元件中可編輯欄位的運作方式 components

HTML元件中的可編輯欄位是透過直接在元件的原始程式碼中宣告內嵌變數來建立。 每個變數都有唯一的ID和預設值。 接著會參考變數，指出可編輯值在標籤中出現的位置。

儲存並發佈片段後，在將片段新增至電子郵件時，HTML元件中宣告的每個變數都會自動顯示為可編輯的引數。

電子郵件作者接著可以覆寫電子郵件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