文档Marketo EngageMarketo 指南

为电子邮件内容添加自定义 CSS custom-css

Last update: Thu Mar 19 2026 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • 中级

直接在Marketo Engage Email Designer中添加您自己的自定义CSS，以进行高级特定样式。

定义自定义CSS define-custom-css

  1. 通过添加至少一个组件，确保在Email Designer中定义了一些内容。

  2. 从左侧的​ Body ​或右侧窗格中选择​Navigation tree。 CSS styles​显示在右侧。

    {width="800" modal="regular"}

    note note
    NOTE
    CSS styles​部分仅在编辑器中存在内容时可用。

  3. 单击​ + Add custom CSS ​按钮。

    note note
    NOTE
    Add custom CSS​按钮仅在选择​ Body ​时可用。 但是，您可以将自定义CSS样式应用于内容中的所有组件。

  4. 在弹出的专用文本区域中输入CSS代码。 确保自定义CSS 有效并且遵循正确的语法。 完成后单击​保存。

    note note
    NOTE
    使用包含锁定内容的模板时，无法向内容添加自定义CSS。 按钮标签更改为​View custom CSS，并且显示的所有自定义CSS均为只读。

  5. 确保CSS适用于您的内容。 如果不适用，请查看疑难解答部分。

    note note
    NOTE
    如果删除所有内容，则该部分将消失，并且之前定义的自定义CSS将不再应用。 添加回内容以使​ CSS styles ​部分重新显示。 再次应用自定义CSS。

使用有效的CSS using-valid-css

您可以在​ Add custom 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>部分的末尾，作为具有<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>

电子邮件Designer的​ Settings ​窗格不会解释或验证自定义CSS。 它是完全独立的，只能通过​ Add Custom CSS ​选项进行修改。

护栏 — 导入的内容 guardrails

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

  • 如果正在导入包括CSS的外部HTML内容，除非您转换该内容，否则它将在​ Compatibility mode ​中，其中​ CSS styles ​部分不可用。

  • 如果导入使用电子邮件Designer创建的内容时包含通过​ Add custom CSS ​选项应用的CSS，则之前应用的CSS将可通过同一选项显示和编辑。

故障排除 troubleshooting

如果未应用您的自定义CSS，请尝试以下建议。

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

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

  • 检查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;
}
NOTE
未设置Marketo Engage支持以帮助对自定义CSS进行故障诊断。 有关CSS的帮助，请咨询Web开发人员。
recommendation-more-help
94ec3174-1d6c-4f51-822d-5424bedeecac