编辑您用于 Advocate 的组件或微站点 HTML 和 CSS

您可以使用额外的 HTML 和 CSS 自定义您的 Advocate 小部件和微型网站，使其更贴合您品牌的整体外观和风格。借助 Advocate 内置的 HTML 编辑器，您可以添加结构、样式，甚至覆盖某些默认组件，以实现更深度的自定义。

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

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

自定义 HTML 和内联 CSS 允许您：

• 更贴近地匹配您公司的品牌规范

• 重新调整布局和间距

• 应用默认编辑器中无法提供的样式

• 覆盖选定的小部件或微型网站组件样式

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

编辑 HTML 或 CSS

编辑您的微型网站

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

1. 在左侧导航菜单中，选择 [Engage] → 内容.

2. 在微型网站卡片上，选择 编辑内容.

3. 在微型网站选项卡中，选择您想要编辑其代码的布局或页面。

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. 选择 保存草稿 以保存，或 发布 以上线更改。

编辑您的小部件

使用 CSS Parts 编辑组件

您小部件或微型网站中的某些内置组件无法通过可视化编辑器完全设置样式。在某些情况下，您可以使用 CSS parts 覆盖其外观，从而实现更精细的控制。

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