为拥护者编辑您的小部件或微站 HTML 与 CSS

您可以使用额外的 HTML 和 CSS 自定义您的 Advocate 小部件和微网站，以更好地与您品牌的外观和感觉保持一致。使用 Advocate 内置的 HTML 编辑器，您可以添加结构、样式，甚至覆盖某些默认组件以进行更深层次的自定义。

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

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

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

• 更紧密地匹配贵公司的品牌指南

• 重新格式化布局和间距

• 应用超出默认编辑器可用范围的样式

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

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

编辑 HTML 或 CSS

编辑您的微网站

您可以使用内置的 HTML 编辑器编辑 HTML 或 CSS，以对微网站进行进一步自定义。虽然 HTML 编辑器在微网站设计上提供了更大的灵活性，但请记住，我们无法排查由自定义 HTML 或 CSS 所做调整引起的问题。

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

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 实施团队或上线后支持团队联系。