为 Advocate 编辑你的组件或微站 HTML 和 CSS

您可以使用额外的 HTML 和 CSS 自定义您的 Advocate 组件和 microsite，以更好地与您的品牌外观和风格保持一致。借助 Advocate 内置的 HTML 编辑器，您可以添加结构、样式，甚至覆盖某些默认组件，以实现更深入的自定义。

注意：自定义 HTML/CSS 编辑仅适用于特定的 Advocate 版本。请联系 支持 以升级您的账户并访问此功能。

为什么要使用自定义 HTML 或 CSS？

自定义 HTML 和内联 CSS 可让您：

• 更贴近您公司的品牌规范
• 重新调整布局和间距
• 应用默认编辑器中无法提供的样式
• 覆盖选定的组件或 microsite 组件样式

重要：我们的支持团队对由自定义代码引入的问题仅提供有限协助。如果您不确定，建议与您的 Advocate 实施团队或上线后团队合作。

编辑 HTML 或 CSS

编辑您的 microsite

您可以使用内置 HTML 编辑器编辑 HTML 或 CSS，以对您的 microsite 进行进一步自定义。虽然 HTML 编辑器为 microsite 设计提供了更多灵活性，但请注意，对于使用自定义 HTML 或 CSS 所做的任何调整，我们无法进行故障排查。

1. 在左侧导航菜单中，选择 [Engage] → 内容.
2. 在 microsite 卡片上，选择 编辑内容.
3. 在 Microsite 选项卡中，选择您要编辑代码的布局或页面。
4. 选择 [代码视图] 位于顶部菜单栏中。
5. 根据需要添加或修改 HTML 和 CSS。
6. CSS 可通过三种方式添加：

   • 通过导入外部 CSS 样式表
   • 在页面顶部的 <style> 标签中：

   <style>
     p {
       color: blue;
     }
   
     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }
   
     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 

   • 以内联方式，将样式应用于特定的 HTML 元素：

   <h3 style="font-size:30px;color:blue;">当您的朋友使用我们的产品时，您将获得奖励</h3> 

7. 选择 [画笔] 以预览您的更新。
8. 选择 保存草稿 以保存，或者 发布 以使更改上线。

编辑您的组件

您可以使用内置 HTML 编辑器编辑 HTML 或 CSS，以对您的组件进行进一步自定义。虽然 HTML 编辑器为组件设计提供了更多灵活性，但请注意，对于使用自定义 HTML 或 CSS 所做的任何调整，我们无法进行故障排查。

1. 在左侧导航菜单中，选择 [Engage] → 内容.
2. 在……上 小部件 卡片中，选择 编辑组件.
3. 在……下 项目小组件，选择您要编辑的组件。

1. 在顶部菜单栏中，选择 [括号].
2. 在页面主体中添加或编辑您的 HTML。
3. CSS 可通过三种方式添加：

   • 通过导入外部 CSS 样式表
   • 在页面顶部的 <style> 标签中：

   <style>
     p {
       color: blue;
     }
   
     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }
   
     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 

   • 以内联方式，将样式应用于特定的 HTML 元素：

   <h3 style="font-size:30px;color:blue;">当您的朋友使用我们的产品时，您将获得奖励</h3> 

4. 选择 [画笔] 以预览您的更新。
5. 选择 保存草稿 以保存，或者 发布 以使更改上线。

使用 CSS Parts 编辑组件

组件或 microsite 中的一些内置组件无法通过可视化编辑器进行完全样式设置。在某些情况下，您可以使用 CSS parts 覆盖其外观，从而实现更细粒度的控制。

如果您希望进行高级样式更新，impact.com 团队可以就哪些内容可行提供建议，并分享任何相关的 CSS part 选择器。如果您有兴趣使用 CSS parts 编辑组件，请联系您的 Advocate 实施团队或上线后支持团队。