# 组件编辑器概览

您的 Advocate 计划提供一个拖放编辑器，可让您自定义呈现给客户拥护者的小部件的外观和内容。

#### 小部件编辑器界面

自助小部件编辑器有四个主要区域：

<div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-f343272a45c0ebe8a90036c489173dbdc96cb155%2F692288b3de9942b25196de77402f176c0b491974bcb06f24239e69499e3dca88.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="顶部菜单栏" %}
页面顶部的菜单栏是您可以撤销操作、查看 HTML 代码和预览完成小部件的地方。使用桌面、平板或移动图标查看您的小部件在不同屏幕尺寸的设备上的显示效果。
{% endtab %}

{% tab title="画布" %}
画布显示构成您小部件的所有组件。您可以选择单个组件进行编辑，或添加新组件，并一目了然地查看它们将如何显示给您的参与者。
{% endtab %}

{% tab title="左侧滑出栏" %}
左侧滑出设置菜单是画布左侧的可折叠面板。在此，您可以选择 **图层** 以查看小部件中所有组件的详细视图，或选择 **模板** 以使用我们预制的小部件之一。该 **设置** 按钮会将您带到包安装子菜单。

如需在品牌层面进行更多样式设置，请选择小部件样式选项。查看 [使用内容编辑器自定义小部件和微站点](https://help.impact.com/brand/zh/nin-xiang-liao-jie-shen-me/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor) 以获取有关可用样式选项的更多信息。
{% endtab %}

{% tab title="组件" %}
组件菜单是位于画布右侧的面板。使用 **添加** 选项卡可将新组件插入画布，使用 **编辑** 选项卡可对已有内容进行调整。
{% endtab %}
{% endtabs %}

#### 故障排除

该小部件有两层验证来检查组件放置和组件属性中的错误。收到错误消息的常见原因包括：

* 缺少必填字段
* 选择了无效的颜色
* 输入了无效的 URL

当存在未解决的错误时，画布右上角会显示一条警告消息，通知您发现了多少个错误。

<div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-511216419b1ffaa7cf19cda9c94f06eedbbdaabc%2Fb0790ca38faffb4d36e8ed5d551995d0231df77a9958ffb98e857740cd207626.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

了解更多关于 [自定义计划小部件](https://help.impact.com/brand/zh/nin-xiang-liao-jie-shen-me/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets).

**查看未解决的错误详情**

1. 选择 **详细信息** 在警告信息上以简要说明发生了什么错误。
2. 通过以下任一方式转到带有错误的组件：
   * 系统中工作： **打开图层**
   * 选择错误说明消息
3. 找到有错误的组件。它将标记有红色感叹号图标。
4. 选择该组件以在 **编辑** 栏中打开属性。
5. 进行所需更改。