> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md). # 使用内容编辑器自定义组件和微站内容编辑器使您能够创建与品牌形象无缝匹配的小部件和微站点，确保为客户提供一致且值得信赖的体验。良好的品牌触点对于提升高参与度和项目采用率至关重要。 {% embed url="" %} ## 集中式品牌控制您可以使用小部件或微站点样式选项轻松查找并更新品牌的核心设计元素。所有品牌设置都位于专门的品牌部分。小部件或微站点会因用户所处的上下文而看起来不同，例如用户是否已登录、是否遇到错误，或是否在移动设备上查看。我们的编辑器预览可让您轻松在小部件或微站点的所有可能状态之间切换。 {% hint style="success" %} **注意**：预览更适用于小部件（例如即时访问小部件）和组件（例如现金、奖励兑换）。要预览微站点，您需要导航到不同的微站点页面以查看各个状态。 {% endhint %} 这消除了手动完成操作以查看组件外观的需要。现在，您可以自信地编辑用户旅程每一步的文本和设计，包括： * 已登录与未登录视图 * 错误和成功消息 * 多步骤流程中的不同步骤（如现金提现验证）要自定义您的品牌样式： 1. 在左侧导航菜单中，选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → 内容**. * 对于小部件，请选择 **编辑小部件** 对于微站点，请选择 **编辑内容**. 2. 在左侧菜单中，选择您要在微站点还是小部件上进行编辑。 3. 选择您要编辑的页面模板，然后选择 **小部件样式**/**微站点样式**. 4. 选择您的品牌颜色，以更改小部件或微站点中的主色。 5. 接下来，选择您想使用的字体样式。 6. **\[可选]** 继续完成其余样式选项，以在小部件或微站点中全面自定义您的品牌形象。

样式编辑器元素参考

| 样式元素 | 说明 | | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | 主品牌色 |

此颜色将用于小部件或微站点中的不同元素，因此完成此步骤非常重要。请选择您的主品牌颜色。

此颜色也会用于编辑选项下方的“主按钮”和“次按钮”部分。

| | 字体 |

选择您希望在小部件或微站点中显示的字体样式。

| | 颜色 |

请选择您希望在小部件或微站点中显示的各种颜色和强调色：

• 背景

请选择您希望小部件或微站点的背景颜色。

• 文本

您可以更改小部件或微站点中主文本和弱化文本的字体颜色。

• 强调色

更改强调元素的颜色。这些包括小部件或微站点中的标签页或图标等元素。

• 附加颜色

您可以根据小部件或微站点类型进一步调整每个元素的颜色和强调样式。

| | 主按钮 |

请选择您希望主按钮采用的配色方案。您还可以调整按钮圆角的像素值。

展开 悬停状态 部分，以进一步选择或更改按钮在用户悬停或与按钮交互后变为的颜色。

| | 次按钮 |

请选择您希望次按钮采用的配色方案。您还可以调整按钮圆角的像素值。

展开 悬停状态 部分，以进一步选择或更改按钮在用户悬停或与按钮交互后变为的颜色。

| | 边框 |

更改小部件或微站点中组件（如表格或卡片）的颜色和边框轮廓。

• 颜色

请选择边框颜色。

• 粗细

请输入以像素为单位的数值，以确定边框粗细。

• 边框半径

请输入以像素为单位的数值，以确定边框圆角半径。

| | 表单字段 |

请选择您希望小部件或微站点中各类表单字段使用的颜色。这些包括用户填写的任何输入字段。您还可以输入以像素为单位的数值来更改圆角半径大小。

展开 高级选项 部分，以进一步自定义所选状态或悬停状态下表单字段的颜色。

| | 小部件大小 |

更改模板中小部件的大小。您可以调整嵌入式和弹出式小部件的尺寸。请选择最小和最大尺寸，并从下拉选项中选择单位量度。可选择按像素或按百分比设置尺寸。

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://help.impact.com/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.