# 微站点编辑器说明

微站编辑器让你可以控制推荐人计划的参与者将看到的内容，你可以自定义布局、页面、内容，以及字体和颜色等品牌元素。

本文帮助文章介绍编辑器的界面，并提供有关微站结构的一般信息，包括布局、页面和组件。了解更多关于 [设置微站](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite.md) 和 [自定义品牌和内容](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages.md) 及其布局和页面。

#### 打开微站编辑器

1. 从左侧导航菜单中，选择 ![](/files/209022bdb234289211a24a980f6227a8684cc439) **\[Engage] → 内容**.
2. 在 *微站点* 卡片中，选择 **编辑内容**.

#### 编辑器界面

微站编辑器由顶部菜单栏、编辑画布、微站侧边弹出面板和组件菜单组成。

<div data-with-frame="true"><figure><img src="/files/adacd2e22f86e365e1d2c9d92fb8a90546874a94" alt=""><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="顶部菜单栏" %}
页面顶部的菜单栏可用于撤销操作、查看 HTML 代码，以及预览完成后的微站。使用桌面、平板或手机图标查看微站在不同屏幕尺寸设备上的显示效果。
{% endtab %}

{% tab title="画布" %}
画布会显示微站的当前内容。你可以选择单个组件进行编辑，或添加新的组件，并一目了然地查看它们将如何呈现给参与者。这些组件列在微站侧边弹出面板左侧。

* 选择 **图层** 查看页面或布局上所有组件的详细视图
* 选择 **模板** 查看微站页面可用的模板。
* 根据你选择的页面、布局、小部件或电子邮件，你还会看到一个依上下文而定的第三个菜单

  <div data-with-frame="true"><figure><img src="/files/036d044044aa14faccdf18bafceab9af055e7f7b" alt="" width="122"><figcaption></figcaption></figure></div>

{% 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 %}

#### 微站结构

在自定义微站时，有几个重要的构建块需要了解：布局、页面和组件。

<details>

<summary>布局</summary>

布局可充当微站的“框架”。你可以在其中放置希望在整个微站中普遍显示的组件，例如页眉和横幅图片。

布局和页面通过继承结构相互关联。页面和布局都可以继承某个布局。继承布局的页面和布局，其内容会被所继承布局的内容包裹。

{% hint style="info" %}
**示例：** 如果你的基础布局包含页眉图片，那么任何继承该基础布局的页面都会在相同位置显示相同的页眉图片。
{% endhint %}

如果你使用自动设置创建了微站，那么你的网站默认会有三个布局。

**基础布局**

基础布局是你可以放置希望无论参与者位于哪个页面、以及他们是否已在你的网站上完成身份验证时都显示的内容的地方。你可以在这里添加希望在整个网站中显示的页眉或页脚。基础布局还包含品牌容器，用于管理全站范围内的颜色和字体。

“ *已登录布局* 和 *已登出布局* 继承 *基础布局*.

<div data-with-frame="true"><figure><img src="/files/ed0e2e7e5b1b5e74778260c4f06df3948efbfd34" alt="" width="312"><figcaption></figcaption></figure></div>

**已登录布局**

该 *已登录布局* 是你可以添加所有已登录参与者都能看到的组件的地方，无论他们位于哪个页面。例如，你的微站侧边导航菜单就是通过布局中的一个组件创建的。由于它被添加到了布局中，因此任何继承该布局的页面都会包含该侧边栏。

<div data-with-frame="true"><figure><img src="/files/df9b04495574026d272891f1d07a61e5b07ac9ca" alt="" width="310"><figcaption></figcaption></figure></div>

**已登出布局**

该 *已登出布局* 是你可以自定义当前未完成身份验证的任何参与者将看到内容的地方。

<div data-with-frame="true"><figure><img src="/files/aaf97d8c6124756862993f1b19a728e5d2e3f3be" alt="" width="291"><figcaption></figcaption></figure></div>

</details>

<details>

<summary>页面</summary>

页面是你构建网站内容的地方，例如计划说明、推荐和分享信息，以及文本/图片。选择布局中的某个页面即可打开并编辑其内容。

<div data-with-frame="true"><figure><img src="/files/b8a8b09eeceac7bb8abba81643f8b96135d05022" alt="" width="318"><figcaption></figcaption></figure></div>

可见性也可以在页面级别进行设置，使你能够将页面访问权限限制为以下选项之一：

* <mark style="color:$success;">**已验证**</mark>：仅已登录参与者。
* <mark style="color:$danger;">**未验证**</mark>：已登录但尚未验证电子邮件地址的参与者。
* **公开**：任何人都可查看。

如果你使用自动设置创建了微站，那么你的网站会附带多个继承 *已登录布局* 和 *已登录布局*.

**已登录布局的页面：**

* 活动
* 仪表板
* 编辑个人资料
* 线索提交
* 税务和现金

**已登出布局的页面：**

* 邮箱验证
* 忘记密码
* 登录
* 注销
* 页面未找到
* 注册
* 重置密码
* 验证邮箱

</details>

<details>

<summary>组件</summary>

组件是你可以添加到页面和布局中的单个元素，用于进一步个性化参与者的微站体验，例如主视觉图片或推荐动态。

组件在组件菜单中分组显示。请参阅 [小部件和微站组件说明](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences.md) 以获取组件分组和各个组件的完整列表。

<div data-with-frame="true"><figure><img src="/files/456049d471d5bd27f1d98ea975445748a98e6669" alt="" width="229"><figcaption></figcaption></figure></div>

</details>


---

# Agent Instructions: 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:

```
GET https://help.impact.com/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsite-editor-explained.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.