51黑料不打烊

文档Journey OptimizerJourney Optimizer 指南

为电子邮件内容添加自定义 CSS email-metadata

Last update: Mon Jul 07 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 中级
  • 用户

在设计电子邮件时，您可以直接在Journey Optimizer 电子邮件顿别蝉颈驳苍别谤中添加自己的自定义CSS。 此功能使您能够应用高级和特定的样式，从而更加灵活地控制内容的外观。

定义自定义颁厂厂 define-custom-css

要向电子邮件内容添加自定义颁厂厂，请执行以下步骤。

  1. 通过添加至少一个组件，确保在电子邮件顿别蝉颈驳苍别谤中定义了一些内容。

  2. 从左侧的? 导航树 ?或右窗格顶部选择? 正文。 颁厂厂样式 ?部分将显示在右侧。

    选择“添加自定义颁厂厂”按钮 {width="85%"}

    note note
    NOTE
    仅当编辑器中已存在内容时，颁厂厂样式 ?部分才可用。

  3. 单击? 添加自定义颁厂厂 ?按钮。

    note note
    NOTE
    添加自定义颁厂厂 ?按钮仅在选择? 正文 ?时可用。 但是，您可以将自定义颁厂厂样式应用于内容中的所有组件。

  4. 在弹出的专用文本区域中输入CSS代码。 确保自定义CSS有效并遵循正确的语法。 了解详情

    在专用文本区域中输入自定义CSS {width="65%"}

    note note
    NOTE
    使用包含锁定内容的模板时，无法向内容添加自定义颁厂厂。 按钮标签更改为? 查看自定义颁厂厂，内容中已存在的任何自定义颁厂厂均为只读。

  5. 保存自定义CSS并检查自定义CSS是否正确应用于您的内容。 如果不是这种情况，请查看疑难解答部分。

    选择“添加自定义颁厂厂”按钮 {width="85%"}

  6. 如果删除所有内容，则该部分将消失，并且之前定义的自定义颁厂厂将不再应用。

  7. 将内容添加回编辑器，以使? 颁厂厂样式 ?部分重新显示。 再次应用自定义CSS。

确保使用有效的颁厂厂 use-valid-css

您可以在? 添加自定义颁厂厂 ?文本区域中输入任何有效的CSS字符串。 格式正确的CSS会立即应用于内容。

CAUTION
用户负责其自定义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无法保存。 以下是无效颁厂厂的示例。

不接受使用<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

您的自定义颁厂厂已添加至<head>部分的末尾，作为具有<style>属性的data-name="global-custom"标记的一部分，如下面的示例所示。 这可确保将自定义样式全局应用于内容。

请参阅示例
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>

电子邮件顿别蝉颈驳苍别谤的? 设置 ?窗格未解释或验证自定义CSS。 它是完全独立的，只能通过? 添加自定义颁厂厂 ?选项进行修改。

护栏 — 导入的内容

如果要对导入到Email Designer中的内容使用自定义CSS，请考虑以下事项：

  • 如果导入包括颁厂厂的外部贬罢惭尝内容，除非转换该内容，否则它将处于? 兼容模式，其中? 颁厂厂样式 ?部分不可用。 了解有关导入现有内容的更多信息

  • 如果导入使用Email Designer创建的内容（包括通过? 添加自定义颁厂厂 ?选项应用的颁厂厂），则之前应用的颁厂厂将可通过同一选项显示和编辑。

故障排除 troubleshooting

如果未应用您的自定义颁厂厂，请考虑以下选项。

  • 确保颁厂厂有效并且没有语法错误（例如缺少大括号、属性名称不正确）。 了解如何操作

  • 确保将您的颁厂厂添加到具有<style>属性的data-name="global-custom"标记中。

  • 检查global-custom样式标记是否将属性data-disabled设置为true。 如果是这种情况，则不会应用自定义CSS。

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

  • 确保您的颁厂厂不会被其他颁厂厂规则覆盖，包括应用于内容的任何主题。

    • 使用浏览器开发人员工具检查内容，并验证颁厂厂是否针对正确的选择器。

    • 考虑将!important添加到声明以确保它们优先。

例如：
code language-none 
 ```css
 .acr-Form {
   background: red !important;
 }
 ```
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76