文件 Journey Optimizer Journey Optimizer 指南

將自訂 CSS 新增至您的電子郵件內容 email-metadata

最後更新： 2026年9月5日

建立對象：

中繼
使用者

在此頁面上：瞭解如何在電子郵件Designer中為您的電子郵件內容新增自訂CSS以取得進階樣式、如何保持CSS有效以及如何疑難排解未套用的樣式。

style

shade-box

在設計電子郵件時，您可以直接在Journey Optimizer 電子郵件Designer中新增您自己的自訂CSS。此功能可讓您套用進階和特定的樣式，從而獲得更大的靈活性並控制內容的外觀。

定義自訂CSS define-custom-css

若要將自訂CSS新增至您的電子郵件內容，請遵循下列步驟。

新增至少一個元件，確定電子郵件Designer中已定義某些內容。

從左側的 導覽樹狀結構 或右窗格頂端選取內文。 CSS樣式區段會顯示在右側。

選取新增自訂CSS按鈕 {width="85%"}

note
NOTE
CSS樣式區段僅在內容已存在於編輯器中時才能使用。

按一下 新增自訂CSS 按鈕。

note
NOTE
新增自訂CSS按鈕僅在選取內文時可用。不過，您可以將自訂CSS樣式套用至內容內的所有元件。

在彈出的專用文字區域中輸入您的CSS代碼。請確定自訂CSS有效並遵循正確語法。了解更多

在專用文字區域中輸入自訂CSS {width="65%"}

note
NOTE
使用具有鎖定內容🔗的範本時，您無法新增自訂CSS至您的內容。按鈕標籤變更為檢視自訂CSS，而且內容中已存在的任何自訂CSS都是唯讀的。

儲存自訂CSS並確認自訂CSS已正確套用至您的內容。如果不是這種情況，請檢視疑難排解區段。

{width="85%"}
如果您移除所有內容，該區段會消失，並且先前定義的自訂CSS將不再套用。
將內容新增回編輯器，以使 CSS樣式 區段重新出現。再次套用自訂CSS。

確保使用有效的CSS use-valid-css

您可以在 新增自訂CSS 文字區域中輸入任何有效的CSS字串。格式正確的CSS會立即套用至內容。

CAUTION

使用者須負責其自訂CSS的安全性。確保您的CSS不會引進漏洞或與現有內容衝突。

避免使用可能無意中破壞內容版面或功能的CSS。

CSS範例

以下是有效CSS的範例。

code language-css

.acr-component[data-component-id="form"] {
  display: flex;
  justify-content: center;
  background: none;
}

.acr-Form {
  width: 100%;
  padding: 20px 100px;
  border-spacing: 0px 8px;
  box-sizing: border-box;
  margin: 0;
}

.acr-Form .spectrum-FieldLabel {
  width: 20%;
}

.acr-Form.spectrum-Form--labelsAbove .spectrum-FieldLabel,
.acr-Form [data-form-item="checkbox"] .spectrum-FieldLabel {
  width: auto;
}

.acr-Form .spectrum-Textfield {
  width: 100%;
}

#acr-form-error,
#acr-form-confirmation {
  width: 100%;
  padding: var(--spectrum-global-dimension-static-size-500);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: var(--spectrum-global-dimension-static-size-200);
}

.spectrum-Form-item.is-required .spectrum-FieldLabel:after{
  content: '*';
  font-size: 1.25rem;
  margin-left: 5px;
  position: absolute;
}

/* Error field placeholder */
.spectrum-HelpText {
  display: none !important;
}

.spectrum-HelpText.is-invalid,
.is-invalid ~ .spectrum-HelpText {
  display: flex !important;
}

code language-css
`@media only screen and (min-width: 600px) { .acr-paragraph-1 { width: 100% !important; } }`

無效CSS的範例

如果輸入的CSS無效，則會顯示錯誤訊息，指出CSS無法儲存。以下是無效的CSS範例。

不接受使用<style>標籤：

code language-html
`<style type="text/css"> .acr-Form { width: 100%; padding: 20px 100px; border-spacing: 0px 8px; box-sizing: border-box; margin: 0; } </style>`

不接受無效語法，例如缺少大括弧：

code language-css
`body { background: red;`

技術實作 implementation

您的自訂CSS已新增到<head>區段的結尾，做為具有data-name="global-custom"屬性的<style>標籤的一部分，如下面的範例所示。這可確保自訂樣式可全域套用至內容。

請參閱範例

code language-html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="content-version" content="3.3.31">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style data-name="default" type="text/css">
      td { padding: 0; }
      th { font-weight: normal; }
    </style>
    <style data-name="grid" type="text/css">
      .acr-grid-table { width: 100%; }
    </style>
    <style data-name="acr-theme" type="text/css" data-theme="default" data-variant="0">
      body { margin: 0; font-family: Arial; }
    </style>
    <style data-name="media-default-max-width-500px" type="text/css">
      @media screen and (max-width: 500px) {
        body { width: 100% !important; }
      }
    </style>
    <style data-name="global-custom" type="text/css">
      /* Add you custom CSS here */
    </style>
  </head>
  <body>
    <!-- Minimal content -->
  </body>
</html>

電子郵件Designer的設定窗格不會解譯或驗證自訂CSS。它是完全獨立的，而且只能透過 新增自訂CSS 選項進行修改。

護欄 — 匯入內容

如果您想要搭配匯入電子郵件Designer的內容使用自訂CSS，請考慮下列事項：

如果匯入包含CSS的外部HTML內容，除非轉換該內容，否則將會在 相容性模式 中，其中 CSS樣式 區段無法使用。進一步瞭解匯入現有內容
如果匯入使用電子郵件Designer建立的內容，包括透過 新增自訂CSS 選項套用的CSS，則先前套用的CSS將可透過相同選項顯示和編輯。

疑難排解 troubleshooting

如果未套用您的自訂CSS，請考慮下列選項。

請確定您的CSS有效，且沒有語法錯誤（例如缺少大括弧、屬性名稱不正確）。了解作法
確定您的CSS已新增至具有data-name="global-custom"屬性的<style>標籤。

檢查global-custom樣式標籤是否已將屬性data-disabled設定為true。若是如此，則不會套用自訂CSS。

accordion

例如：

code language-html
`<style data-name="global-custom" type="text/css" data-disabled="true"> body: { color: red; } </style>`

確保您的CSS不會被其他CSS規則覆寫，包括任何套用至您內容的主題。

使用您的瀏覽器開發人員工具來檢查內容，並確認您的CSS是否鎖定正確的選取器。

請考慮將!important加入宣告中，以確保它們優先。

accordion

例如：

code language-css
`.acr-Form { background: red !important; }`

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 add custom CSS to email content in the Email Designer for advanced styling, how to keep the CSS valid, how it is implemented in the HTML, and how to troubleshoot styles that are not applied.

Intents:

Add custom CSS to email content for advanced and specific styling
Ensure the entered CSS is valid so it is applied and can be saved
Understand where custom CSS is injected in the generated HTML
Troubleshoot custom CSS that is not applied
Understand custom CSS behavior with imported content

Glossary:

Add Custom CSS: The Email Designer option (available when Body is selected) to enter custom CSS in a dedicated text area (product-specific)
CSS styles section: The section, shown when Body is selected and content is present, from which custom CSS is added (product-specific)
global-custom: The data-name="global-custom" <style> tag added to the end of the <head> where custom CSS is placed (product-specific)
Compatibility mode: The mode for imported external HTML content (unless converted) in which the CSS styles section is not available (product-specific)

Guardrails:

The CSS styles section is only available when content is already present in the editor; the Add custom CSS button is only available when Body is selected.
Custom CSS must be valid and follow proper syntax; invalid CSS (for example using <style> tags, or syntax errors such as missing braces) triggers an error message and cannot be saved.
When using a template with locked content, you cannot add custom CSS; the button changes to View custom CSS and existing custom CSS is read-only.
If you remove all content, the CSS styles section disappears and the previously defined custom CSS is no longer applied; adding content back reapplies it.
For imported external HTML content in Compatibility mode (unless converted), the CSS styles section is not available.
Users are responsible for the security of their custom CSS and should ensure it does not introduce vulnerabilities or break the layout.
Custom CSS is not interpreted or validated by the Settings pane; it is independent and can only be modified through the Add Custom CSS option.

Terminology:

Canonical name: Custom CSS — Acronym: CSS — variants: Add Custom CSS, custom CSS styles
Synonyms: “Add custom CSS” = “Add Custom CSS” (button); becomes “View custom CSS” for locked content
Do not confuse: “custom CSS” (global-custom style tag) ≠ default/system-generated CSS styles (other data-name style tags such as default, grid, acr-theme)
Do not confuse: “Compatibility mode” (imported external HTML, no CSS styles section) ≠ content created with the Email Designer (custom CSS visible and editable)

FAQ:

Q: Why is the Add custom CSS button missing? — The CSS styles section requires content in the editor, and the button is only available when Body is selected.
Q: What happens if my CSS is invalid? — An error message is displayed indicating the CSS cannot be saved; <style> tags and syntax errors such as missing braces are not accepted.
Q: Where is my custom CSS added in the HTML? — To the end of the <head> section as a <style data-name="global-custom"> tag.
Q: My custom CSS is not applied — what should I check? — Verify the CSS is valid, that it is in the global-custom style tag, that data-disabled is not set to true, and that it is not overridden by other rules including an applied theme; consider adding !important.
Q: Can I add custom CSS to a template with locked content? — No; the button becomes View custom CSS and any existing custom CSS is read-only.

recommendation-more-help

journey-optimizer-help