[有限可用性]{class="badge informative"}

對您的電子郵件內容套用主題 apply-email-themes

在此頁面上:​瞭解如何在電子郵件Designer中建立、套用及重複使用主題,以在電子郵件內容和片段之上新增品牌一致的樣式。

AVAILABILITY
此功能限量提供。 請聯絡您的 Adobe 代表以取得存取權。

透過主題,非技術使用者能藉由在標準範本上新增自訂樣式,建立符合特定品牌和設計語言的可重複使用內容。

此功能可讓行銷人員更快且更輕鬆地運用視覺上吸引人、品牌一致的電子郵件,同時提供進階自訂選項以滿足獨特的設計需求。

護欄與限制 themes-guardrails

  • 從頭開始建立電子郵件時,您可以選擇使用主題開始建立內容,以快速套用符合您的品牌和設計的特定樣式。

    如果您選擇「手動樣式化」模式,除非重設電子郵件,否則您將無法套用任何主題。

  • 片段在使用主題和手動樣式模式之間不相容。

    • 主題片段無法在未使用主題建立的電子郵件內容中使用。

    • 若要在主題內容中利用片段,此片段必須已使用主題自行建立。 了解更多

    • 在電子郵件內容中使用片段時,請務必套用您為此片段定義的主題。 若未這麼做,可能會導致顯示問題,尤其是在Outlook 2021和舊版中。 了解更多

  • 如果使用在HTML中建立的內容,您將處於相容性模式,而且您無法直接將主題套用至此內容。

    • 若要套用主題,您必須先將匯入的內容儲存為新範本,然後將此範本轉換為主題相容的內容。 然後,您可以使用此範本建立您的電子郵件內容。 在本節中瞭解如何轉換使用手動樣式建立的範本。

    • 您仍然可以轉換匯入的HTML內容。 了解更多

  • 在主題中使用自訂網頁字型(包括Google字型)時,請注意,許多電子郵件使用者端並不支援這些字型。 請一律在您的主題中定義適當的遞補字型,以確保所有電子郵件使用者端的可讀性。

    • Gmail和Yahoo! 不載入外部網頁字型,且會回覆成系統字型,無論HTML/CSS中指定的字型系列為何。
    • Gmail唯一支援的Google字型是Roboto和Google Sans。
    • 做​支援Web字型的電子郵件使用者端包括Apple Mail、iOS Mail、Android Mail、Thunderbird和Outlook for macOS。

建立主題 create-and-edit-themes

若要定義您可在未來電子郵件內容中運用的主題,請遵循下列步驟。

  1. 若要開始,請建立新的內容範本。

  2. 選取​ 建立或編輯主題 ​選項。

    在範本建立中建立或編輯佈景主題選項

  3. 選取Adobe主題。 在此範例中,選取​ 預設主題 ​並按一下​建立。

    已選取預設主題的 主題選取畫面

  4. 您也可以從​ 我的佈景主題 ​標籤中選取自訂範本,然後按一下​ 編輯 ​進行更新。

    我的主題標籤,包含自訂主題的「編輯」動作

  5. 在​ 一般設定 ​標籤中,透過提供適合您品牌的特定名稱來開始定義您的主題。 您可以調整電子郵件的預設檢視區寬度,也可以將目前主題匯出為在沙箱間共用。

  6. 使用右側的邊欄瀏覽不同的標籤並更新您的設計設定。

    主題設計設定的右側邊欄標籤

  7. 從​ 色彩 ​索引標籤:

    • 使用​ 編輯 ​按鈕,為您的品牌設定預設顏色的​調色盤。 選取​ 預設集 ​以快速建立色彩配置,或個別調整佈景主題的每種顏色。 您也可以使用兩者的組合。

      主題色彩的調色盤編輯器

    • 按一下​新增變體,為您的主題建立多個顏色變體,每個變體都有自己的調色盤和細微控制項。

      在佈景主題色彩設定中新增變體動作

    • 對於每個變體,按一下​ 編輯 ​圖示以編輯任何個別元素。 您可以使用已建立的預設調色盤或任何自訂顏色。

      編輯每個元素的顏色變體設定的圖示

  8. 選擇性,透過中央畫布右上角的切換,開啟​ 啟用深色模式 ​選項,讓深色模式檢視可用於所有佈景主題的顏色變體。 深入瞭解深色模式

    在佈景主題設定中啟用深色模式切換

    使用該切換開關切換到深色模式檢視。 調色盤會自動變更為每個變體的預設深色版本。

    畫布中佈景主題的深色模式預覽

    您可以使用不同的調色盤或自訂顏色,進一步自訂每個深色模式變體。

    佈景主題變體 🔗 的深色模式色彩自訂

    note caution
    CAUTION
    深色模式預覽是模擬,可能不會完全符合最終結果。 傳送校樣以確認在支援自訂深色模式的電子郵件使用者端中的確切轉譯。 了解更多

    深色模式色彩變數與淺色模式色彩無關,因此深色模式預覽中的色彩編輯僅適用於深色模式版本。 但是,非顏色設定(例如間距、內距、字型大小等) 會以光源模式共用,也會套用至該處。

    note
    NOTE
    若要刪除顏色變體,您必須處於淺色模式。 在深色模式檢視中無法刪除變體。
  9. 在​ 文字設定 ​中,您可以設定要用於整個佈景主題的全域字型。 如需更細微的控制,您也可以編輯每個標題和段落型別,以調整字型、大小、樣式等。

    字型和印刷樣式的 文字設定面板

    note
    NOTE
    選取自訂網頁字型時,請注意許多電子郵件使用者端,例如Gmail和Yahoo! 不支援外部網頁字型,將回覆為系統字型。 請考慮納入遞補字型,以確保您的內容在所有電子郵件使用者端皆正確顯示。 了解更多
  10. 在​ 間距 ​索引標籤中,從清單中選取個別元素,以便在不同元件之間適當地間隔該元素。

  11. 使用右側的其他索引標籤,您可以分別管理此主題的每個按鈕元素、分隔線、其他影像格式和格線版面間距。

    主題編輯器中的 按鈕和元件樣式設定

  12. 按一下[儲存]儲存此佈景主題以供日後使用。 ​​它現在顯示在​ 我的主題 ​標籤中。

將主題套用至電子郵件內容 apply-themes-email

若要將預設或自訂樣式主題套用至內容範本或電子郵件,請遵循下列步驟。

  1. 在Journey Optimizer中,將電子郵件動作新增至歷程或行銷活動,或建立電子郵件內容範本,並編輯電子郵件內文。

  2. 您可以選取下列其中一個動作:

    • 選取內建的電子郵件範本,以開啟電子郵件Designer。 系統會自動套用每個範本專屬的預設主題。

    • 從頭開始設計新內容,並選取​ 使用主題 ​以預先定義的樣式主題開始。

      從草稿開始內容時 使用佈景主題選項

      note caution
      CAUTION
      如果您選擇「手動樣式化」模式,除非您重設設計,否則無法套用任何主題。
      若要在主題內容中利用片段,此片段必須已使用主題自行建立。 了解更多
  3. 在電子郵件Designer中,按一下右側邊欄上的​ 主題 ​按鈕。 預設主題或範本主題隨即顯示。 您可以在此佈景主題的兩個顏色變體之間切換。

    電子郵件Designer並套用預設主題

  4. 按一下目前使用之主題旁的箭頭。 可用的自訂和Adobe主題清單隨即顯示。

    顯示可用主題的主題下拉式清單

  5. 按一下​我的佈景主題,然後選取您建立的主題。

    已選取自訂主題的「我的主題」下拉式清單

  6. 按一下下拉式清單外部。 新選取的自訂主題會自動將其樣式套用至所有電子郵件元件。 您可以切換顏色變體(如果有的話)。

  7. 將選取的佈景主題切換至​深色模式。 該主題的深色模式版本會套用至電子郵件內容。 視需要更新 — 任何後續的顏色編輯和預覽都會反映深色模式樣式。

    主題電子郵件的淺色模式預覽 {width="45%"} 主題電子郵件的深色模式預覽 {width="45%"}

    當訊息在支援的深色模式電子郵件使用者端中顯示時,會使用深色模式版本。 深入瞭解深色模式

    note
    NOTE
    當您在深色模式預覽時,色彩變更只會套用至深色模式版本。 但是,非顏色設定(例如間距、內距、字型大小等) 也會套用至光源模式。
  8. 在內容範本中選取佈景主題時,您可以按一下​ 編輯佈景主題 ​按鈕進行更新。 了解更多

    主題內容範本中的編輯主題按鈕 {width="40%"}

    note
    NOTE
    在電子郵件內容中使用主題時,此選項無法使用。
  9. 如果您使用數個顏色變體來利用主題,則可針對指定結構元件選擇特定變體。 這可讓您為整個內容定義顏色變體,並針對一個特定結構使用不同的變體。

    note
    NOTE
    您無法在內容元件上執行此動作。

    若要這麼做,請選取結構元件,從右側的​ 樣式 ​索引標籤按一下​使用特定主題的變體選項,然後將所需的變體套用至該結構。

    結構層級特定主題變體選項

    在此範例中,目前主題的第一個顏色變體會套用至整個電子郵件內容,但第三個顏色變體則套用至所選結構。 您可以看到該特定結構的內文和檢視區背景顏色與其餘內容不同。

您可以隨時切換主題。 電子郵件內容保持不變,但樣式會更新以反映新主題。

解除鎖定樣式 unlocking-styles

選取元件時,您可以使用​ 樣式 ​索引標籤中的專用圖示來解除鎖定其樣式。

{width="90%"}

選取的主題仍會套用到該元件,但您可以覆寫其樣式元素。 如果您變更主題,新主題只會套用至未覆寫的樣式元素。

例如,如果您解除鎖定文字元件,可以將字型顏色從黑色變更為紅色:

{align="center" width="80%" modal="regular"}

如果您變更主題,則該元件的字型顏色仍為紅色,但此元件的背景顏色會隨著新主題而變更:

{width="80%"}

在片段中善用主題 leverage-themes-fragment

若要在套用佈景主題的範本或電子郵件中善用片段,必須使用佈景主題自行建立此片段。 否則,您將無法在您的主題內容中使用此片段。

若要建立與主題相容的片段,請遵循下列步驟。

  1. 在Journey Optimizer中建立視覺化片段,然後按一下​ 建立 ​來設計片段的內容。 了解作法

  2. 選取​ 使用佈景主題 ​以預先定義的樣式佈景主題開始。

    建立視覺化片段時 使用佈景主題選項 {width="100%"}

    note caution
    CAUTION
    如果您選擇「手動樣式化」模式,除非您重設片段設計,否則無法套用任何主題。
  3. 在電子郵件Designer中,您可以開始建立片段。

  4. 按一下右側邊欄上的​ 主題 ​按鈕。 預設主題隨即顯示。 您可以在此佈景主題的不同顏色變體之間切換。

    已套用預設主題的 片段編輯器 {align="center" width="100%" modal="regular"}

  5. 您可以選取其他主題來預覽片段內容。 若要這麼做,請選取預設主題旁的箭頭,然後按一下​選取主題。

    在片段主題功能表中選取主題動作 {width="40%"}

  6. 您可以在​ Adobe主題 ​和​ 我的主題 ​標籤之間導覽,並為您的片段選取最多5個相容的主題(從這兩個標籤)。

    note
    NOTE
    基於相容性和效能原因而強制執行此限制。 無法移除​Adobe預設主題,因此您最多可以選取四個其他自訂主題。

    片段相容的主題選擇對話方塊 {width="70%"}

    note caution
    CAUTION
    在電子郵件內容中使用此片段時,電子郵件主題必須是與片段關聯的其中一個主題。 如果主題不符,則會封鎖片段插入。
  7. 按一下 關閉。

  8. 再次選取​ 預設佈景主題 ​旁的箭頭。 您現在可以在您剛選取的不同主題之間切換,以預覽每個樣式演算。

    片段預覽在選取的主題間切換 {width="90%"}

  9. 再按一下​ 選取主題 ​以新增更多主題或變更您的選擇。

讓範本與主題相容 theme-convertor

Journey Optimizer可讓您將使用手動樣式建立的範本轉換為與主題相容的內容。 如果您是在將主題引入Journey Optimizer之前建立內容範本,或您正在匯入外部內容,這會特別有用。

NOTE
只有​ 電子郵件範本 ​可以轉換為與主題相容。 個別電子郵件無法轉換;您必須先將內容儲存為範本。
  1. 開啟電子郵件內容範本,並使用電子郵件Designer編輯其內容。

  2. 選取右側邊欄上的​ 主題 ​圖示,然後按一下​ 從內容產生主題 ​按鈕。

    從主題面板中的內容按鈕產生主題 {width="100%"}

  3. 建立佈景主題​視窗隨即開啟。 Journey Optimizer會自動偵測樣式元素並將其合併為新主題。

    在樣式偵測後建立主題對話方塊 {width="90%"}

  4. 提供主題的名稱。

  5. 視需要自行調整,就像從頭開始建立主題時一樣,例如新增顏色變體、編輯字型等。瞭解如何進行

    已產生可調整的主題設定 {width="90%"}

  6. 按一下[儲存]​ ​ ​儲存此新主題以供重複使用。 您現在可以將此主題套用至您的內容,例如任何其他主題。 了解作法

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: This page explains how to create, apply, and reuse themes in the Email Designer to add brand-consistent styling on top of email content and fragments, including converting manual-styling templates into theme-compatible content.

Intents:

  • Create a theme with a color palette, variants, text settings, spacing, buttons, dividers, and grid layout
  • Apply a default or custom theme to an email or content template
  • Switch themes and apply a specific color variant to an individual structure component
  • Unlock a component’s style to override individual styling elements
  • Create fragments compatible with themes and associate up to five themes with a fragment
  • Convert a manual-styling email template into theme-compatible content using Generate theme from content

Glossary:

  • Theme: Reusable custom styling added on top of standard templates to fit a specific brand and design language (product-specific)
  • Use Themes mode: The mode selected when creating content from scratch to start with a predefined styling theme (product-specific)
  • Manual Styling mode: The alternative mode; if chosen, themes cannot be applied unless you reset your email/design/fragment (product-specific)
  • Compatibility mode: The mode you are in when using content created in HTML, where themes cannot be applied directly (product-specific)
  • Color variant: A distinct color palette and nuance control set within a theme, such as light and dark mode (product-specific)
  • Generate theme from content: A Themes action that automatically detects styling elements in a template and consolidates them into a new theme (product-specific)

Guardrails:

  • This capability is in Limited Availability; contact your Adobe representative to gain access.
  • If you choose Manual Styling mode, you cannot apply themes unless you reset your email, design, or fragment.
  • Fragments are not cross-compatible between the Use Themes and Manual Styling modes; a fragment used in themed content must itself have been created using themes.
  • When using a fragment in email content, the email theme must be one of the themes associated with the fragment; if the theme does not match, the fragment insertion is blocked.
  • A fragment can have up to five compatible themes selected (from both the Adobe themes and My themes tabs); this limit is enforced for compatibility and performance reasons. The Adobe default theme cannot be removed, so you can select up to four additional custom themes.
  • Content created in HTML is in compatibility mode; to apply themes you must first save it as a new template, then convert the template into theme-compatible content.
  • Only email templates can be converted to be theme-compatible; individual emails cannot be converted—you must save content as a template first.
  • Gmail and Yahoo! do not load external web fonts and fall back to system fonts; the only Google fonts supported by Gmail are Roboto and Google Sans. Always define fallback fonts.
  • Mismatched fragment themes may cause display issues, especially in Outlook 2021 and previous versions.
  • The Edit theme button (available in a content template) is not available when using themes in email contents; the specific-variant option cannot be applied to content components (only structure components).

Terminology:

  • Canonical name: Theme — Acronym: n/a — variants: email theme, Adobe theme, custom theme
  • Synonyms: “Use Themes mode” = “Use Themes”
  • Do not confuse: “Use Themes mode” (themes can be applied) ≠ “Manual Styling mode” (themes cannot be applied unless reset)
  • Do not confuse: “Adobe themes” (built-in themes) ≠ “My themes” (themes you created)

FAQ:

  • Q: Is the themes capability generally available? — No, it is in Limited Availability; contact your Adobe representative to gain access.
  • Q: Can I use any fragment in themed content? — Only if the fragment was itself created using themes and the email theme matches one of the themes associated with the fragment; otherwise fragment insertion is blocked.
  • Q: How many themes can I associate with a fragment? — Up to five compatible themes across the Adobe themes and My themes tabs; the Adobe default theme cannot be removed, leaving up to four additional custom themes.
  • Q: Can I convert an existing manually styled asset to use themes? — Only email templates can be converted (via Generate theme from content); individual emails cannot, so save your content as a template first.
  • Q: What happens to my content when I switch themes? — The email content remains unchanged, but the styles update to reflect the new theme; overridden (unlocked) styling elements are not changed by the new theme.
  • Q: Why might web fonts not render? — Gmail and Yahoo! do not load external web fonts and fall back to system fonts; only Roboto and Google Sans are supported by Gmail, so define fallback fonts.
recommendation-more-help
journey-optimizer-help