在此頁面上:瞭解如何在電子郵件Designer中建立、套用及重複使用主題,以在電子郵件內容和片段之上新增品牌一致的樣式。
透過主題,非技術使用者能藉由在標準範本上新增自訂樣式,建立符合特定品牌和設計語言的可重複使用內容。
此功能可讓行銷人員更快且更輕鬆地運用視覺上吸引人、品牌一致的電子郵件,同時提供進階自訂選項以滿足獨特的設計需求。
護欄與限制 themes-guardrails
-
從頭開始建立電子郵件時,您可以選擇使用主題開始建立內容,以快速套用符合您的品牌和設計的特定樣式。
如果您選擇「手動樣式化」模式,除非重設電子郵件,否則您將無法套用任何主題。
-
片段在使用主題和手動樣式模式之間不相容。
-
如果使用在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
若要定義您可在未來電子郵件內容中運用的主題,請遵循下列步驟。
-
若要開始,請建立新的內容範本。
-
選取 建立或編輯主題 選項。
-
選取Adobe主題。 在此範例中,選取 預設主題 並按一下建立。
-
您也可以從 我的佈景主題 標籤中選取自訂範本,然後按一下 編輯 進行更新。
-
在 一般設定 標籤中,透過提供適合您品牌的特定名稱來開始定義您的主題。 您可以調整電子郵件的預設檢視區寬度,也可以將目前主題匯出為在沙箱間共用。
-
使用右側的邊欄瀏覽不同的標籤並更新您的設計設定。
-
從 色彩 索引標籤:
-
使用 編輯 按鈕,為您的品牌設定預設顏色的調色盤。 選取 預設集 以快速建立色彩配置,或個別調整佈景主題的每種顏色。 您也可以使用兩者的組合。
-
按一下 新增變體 以建立多種顏色變體,例如淺色和深色模式,其中您主題的每種變體都有自己的調色盤和細微控制項。
-
對於每個變體,按一下 編輯 圖示以編輯任何個別元素。 您可以使用已建立的預設調色盤或任何自訂顏色。
-
-
在 文字設定 中,您可以設定要用於整個佈景主題的全域字型。 如需更細微的控制項,您也可以編輯每個標題和段落型別,以調整字型、大小、樣式等。
note NOTE 選取自訂網頁字型時,請注意許多電子郵件使用者端,例如Gmail和Yahoo! 不支援外部網頁字型,將回覆為系統字型。 請考慮納入遞補字型,以確保您的內容在所有電子郵件使用者端皆正確顯示。 了解更多 -
在 間距 索引標籤中,從清單中選取個別元素,以便在不同元件之間適當地間隔該元素。
-
使用右側的其他索引標籤,您可以分別管理此主題的每個按鈕元素、分隔線、其他影像格式和格線版面間距。
-
按一下[儲存]儲存此佈景主題以供日後使用。 它現在顯示在 我的主題 標籤中。
將主題套用至電子郵件內容 apply-themes-email
若要將預設或自訂樣式主題套用至內容範本或電子郵件,請遵循下列步驟。
-
在Journey Optimizer中,將電子郵件動作新增至歷程或行銷活動,或建立電子郵件內容範本,並編輯電子郵件內文。
-
您可以選取下列其中一個動作:
-
在電子郵件Designer中,按一下右側邊欄上的 主題 按鈕。 預設主題或範本主題隨即顯示。 您可以在此佈景主題的兩個顏色變體之間切換。
-
按一下目前使用之主題旁的箭頭。 可用的自訂和Adobe主題清單隨即顯示。
-
按一下我的佈景主題,然後選取您建立的主題。
-
按一下下拉式清單外部。 新選取的自訂主題會自動將其樣式套用至所有電子郵件元件。 您可以切換顏色變體(如果有的話)。
-
在內容範本中選取佈景主題時,您可以按一下 編輯佈景主題 按鈕進行更新。 了解更多
{width="40%"}
note NOTE 在電子郵件內容中使用主題時,此選項無法使用。 -
如果您使用數個顏色變體來利用主題,則可針對指定結構元件選擇特定變體。 這可讓您為整個內容定義顏色變體,並針對一個特定結構使用不同的變體。
note NOTE 您無法在內容元件上執行此動作。 若要這麼做,請選取結構元件,從右側的 樣式 索引標籤按一下使用特定主題的變體選項,然後將所需的變體套用至該結構。
在此範例中,目前主題的第一個顏色變體會套用至整個電子郵件內容,但第三個顏色變體則套用至所選結構。 您可以看到該特定結構的內文和檢視區背景顏色與其餘內容不同。
您可以隨時切換主題。 電子郵件內容保持不變,但樣式會更新以反映新主題。
解除鎖定樣式 unlocking-styles
選取元件時,您可以使用 樣式 索引標籤中的專用圖示來解除鎖定其樣式。
選取的主題仍會套用到該元件,但您可以覆寫其樣式元素。 如果您變更主題,新主題只會套用至未覆寫的樣式元素。
例如,如果您解除鎖定文字元件,您就可以將字型顏色從黑色變更為紅色:
如果您變更主題,該元件的字型顏色仍為紅色,但此元件的背景顏色會隨著新主題而變更:
在片段中善用主題 leverage-themes-fragment
若要在套用佈景主題的範本或電子郵件中善用片段,必須使用佈景主題自行建立此片段。 否則,您將無法在您的主題內容中使用此片段。
若要建立與主題相容的片段,請遵循下列步驟。
-
在Journey Optimizer中建立視覺化片段,然後按一下 建立 來設計片段的內容。 了解作法
-
選取 使用佈景主題 以預先定義的樣式佈景主題開始。
{width="100%"}
note caution CAUTION 如果您選擇「手動樣式化」模式,除非您重設片段設計,否則無法套用任何主題。 -
在電子郵件Designer中,您可以開始建立片段。
-
按一下右側邊欄上的 主題 按鈕。 預設主題隨即顯示。 您可以在此佈景主題的不同顏色變體之間切換。
{align="center" width="100%" modal="regular"}
-
您可以選取其他主題來預覽片段內容。 若要這麼做,請選取預設主題旁的箭頭,然後按一下選取主題。
{width="40%"}
-
您可以在 Adobe主題 和 我的主題 標籤之間導覽,並為您的片段選取最多5個相容的主題(從這兩個標籤)。
note NOTE 基於相容性和效能原因而強制執行此限制。 無法移除Adobe預設主題,因此您最多可以選取四個其他自訂主題。 {width="70%"}
note caution CAUTION 在電子郵件內容中使用此片段時,電子郵件主題必須是與片段關聯的其中一個主題。 如果主題不符,則會封鎖片段插入。 -
按一下 關閉。
-
再次選取 預設佈景主題 旁的箭頭。 您現在可以在您剛選取的不同主題之間切換,以預覽每個樣式演算。
{width="90%"}
-
再按一下 選取主題 以新增更多主題或變更您的選擇。
讓範本與主題相容 theme-convertor
Journey Optimizer可讓您將使用手動樣式建立的範本轉換為與主題相容的內容。 如果您是在將主題引入Journey Optimizer之前建立內容範本,或您正在匯入外部內容,這會特別有用。
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.