> 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/widget-experiences/widget-editor-overview.md).
# 组件编辑器概览
您的 Advocate 项目提供了一款拖放式编辑器，允许您自定义展示给客户倡导者的组件的外观和内容。
#### 组件编辑器界面
自助式组件编辑器有四个主要区域：
{% tabs %}
{% tab title="顶部菜单栏" %}
页面顶部的菜单栏可用于撤销操作、查看 HTML 代码以及预览完成后的组件。使用桌面、平板或移动设备图标，查看您的组件在不同屏幕尺寸的设备上的显示效果。
{% endtab %}
{% tab title="画布" %}
画布显示构成您组件的所有元素。您可以选择单个元素进行编辑，也可以添加新元素，一目了然地查看它们在参与者端的显示效果。
{% endtab %}
{% tab title="左侧滑出面板" %}
左侧滑出设置菜单是画布左侧的可折叠面板。在这里，您可以选择 **图层** 以查看组件中所有元素的详细视图，或者选择 **模板** 使用我们预制的组件之一。 **设置** 按钮会带您进入包安装子菜单。
如果要在品牌层面进行更进一步的样式设置，请选择“组件样式”选项。查看 [使用内容编辑器自定义组件和微站点](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md) 以了解可用的样式选项。
{% endtab %}
{% tab title="组件" %}
组件菜单是画布右侧的一个面板。使用 **添加** 选项卡将新组件插入画布，并使用 **编辑** 选项卡对现有内容进行调整。
{% endtab %}
{% endtabs %}
#### 故障排除
组件具有两层验证，用于检查元素放置和属性中的错误。收到错误消息的常见原因包括：
* 缺少必填字段
* 选择了无效的颜色
* 输入了无效的 URL
当存在未解决的错误时，画布右上角会显示一条警告消息，通知您发现了多少个错误。
了解更多关于 [自定义项目组件](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets.md).
**查看未解决的错误详情**
1. 选择 **详情** ，可简要说明出错原因。
2. 通过以下任一方式转到有错误的元素：
* 选择 **打开图层**
* 选择错误说明消息
3. 找到有错误的元素。它会以红色感叹号图标标记。
4. 选择该元素以在 **编辑** 栏中打开属性。
5. 进行所需的更改。
---
# 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 dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://help.impact.com/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.
.png?alt=media&token=b8ae9b78-8cea-425e-8cd8-e35a0b97535a)
