> 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/microsite-experiences/customize-microsite-layouts-and-pages.md).

# 自定义微站布局和页面

微站点是你的推荐计划中参与者的关键接触点之一。这篇帮助文章说明如何使用 *微站点编辑器* 将你现有的微站点自定义为一个能体现你的品牌并为最终用户提供引人入胜体验的空间。

如果你还没有 [设置](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite.md) 微站点，则需要先进行设置。

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. 使用微站点编辑器更新你的品牌，或添加新内容，例如布局和页面。

   <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%2Fu8WZu3QIIhdEbGgIEptB%2FScreenshot%202026-05-18%20at%2010.44.26.png?alt=media&amp;token=45c65550-6e83-4e79-8372-ec2793c4c913" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="warning" %}
**警告：** 微站点编辑器不会自动保存你的更改。请经常保存，以确保不会丢失你的工作。
{% endhint %}

{% stepper %}
{% step %}
**步骤 1：更改你的微站点品牌（可选）**

{% tabs %}
{% tab title="颜色和字体" %}
你的基础布局包含一个品牌容器组件，用于控制微站点的字体和品牌颜色。品牌颜色会应用于微站点的各个部分，包括高亮颜色和按钮颜色。

1. 在……中 *微站点* 侧边弹出面板中，选择 **基础布局**.
2. 在左侧，位于 *当前布局*下，选择 **图层**.
3. 选择 **品牌容器**.
4. 在右侧，位于 *品牌容器* 菜单中，编辑 **品牌颜色** 和 **品牌字体**.

   <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-f58dfdd168765b914fd22b232cabd8030450c27f%2F6f54642b7524983137442de4c4ecc2a20984c511b5e26423a5edadc0060f9a45.png?alt=media" alt="" width="223"><figcaption></figcaption></figure></div>
5. 选择 **保存** ，位于右上角。
   {% endtab %}

{% tab title="站点页眉" %}
你可以添加一个可点击的页眉图片，将参与者重定向到你指定的页面。在基础布局中进行设置。

1. 在……中 *微站点* 侧边弹出面板中，选择 **基础布局**.
2. 在左侧，位于 *当前布局* 或 *当前页面*下，选择 **图层**.
3. 在右侧，位于 *微站点框架页眉内容* 菜单中，提供一张图片，并按需调整其高度和宽度。
4. 设置重定向路径。这是参与者点击图片后将被重定向到的位置。
5. 选择 **保存**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}
**步骤 2：创建布局或页面**

{% tabs %}
{% tab title="添加页面" %}

1. 在……中 *微站点* 侧边弹出面板中，选择 **微站点**.
   * 此操作会打开微站点的结构视图，显示所有布局和页面。
2. 选择 **添加页面** 按钮。
3. 可选地，使用 **继承布局** 下拉列表选择你要作为父布局的布局。

   <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><strong>示例：</strong> 如果你想向站点添加一个任何人都能看到的落地页，不论他们是否为已登录参与者，你可以在基础布局中嵌套一个新页面。</p></div>
4. 输入 **页面标题** 或布局名称。
5. 可选地，调整 **页面键** 。页面键会根据页面标题自动生成，但你也可以按需更改。
6. 输入 **URL** 。
   * 在你想使用的名称前加上一个正斜杠，并在多词 URL 中使用连字符，例如 `/company-info`.
7. 在 **允许用户** 下拉列表中，选择可以访问该页面的用户组。
   * **公开：** 任何人均可查看。
   * **已验证：** 仅已登录参与者。
   * **未验证：** 已登录但尚未验证其电子邮件地址的参与者。
8. 在 **不允许用户的重定向** 下拉列表中，选择你希望将不允许访问的参与者发送到的页面。
9. 选择 **添加**.
10. 在页面右上角，选择 **保存**.
    {% endtab %}

{% tab title="添加布局" %}

1. 在……中 *微站点* 侧边弹出面板中，选择 **微站点**.
   * 此操作会打开微站点的结构视图，显示所有布局和页面。
2. 选择 **添加布局**.
3. 可选地，使用 **继承布局** 下拉列表，选择你要作为父布局的布局。这主要有助于站点组织。
4. 输入 **布局名称** 用于你的布局。
5. 可选地，调整 **布局键** 用于你的布局。布局键会根据页面标题自动生成，但你也可以按需更改。
6. 选择 **添加**.
7. 在页面右上角，选择 **保存**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}
**步骤 3：应用模板**

如果你不想从头开始，可以将模板应用到新的布局或页面。

1. 在 *微站点* 侧边弹出面板中，使用结构视图选择你要应用模板的布局或页面。
2. 在左侧，位于 *当前布局* 或 *当前页面*下，选择 **模板**.
3. 浏览可用模板，然后选择 **应用模板** 在你要使用的模板卡片上。

   <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%2FmANLKNh0KRWXP8G7Abj6%2FScreenshot%202026-05-18%20at%2010.40.44.png?alt=media&amp;token=6fec0d57-89af-4cbc-8e23-2fe243a13882" alt="" width="267"><figcaption></figcaption></figure></div>
4. 在页面右上角，选择 **保存**.
   {% endstep %}

{% step %}
**步骤 4：编辑微站点的侧边栏**

如果你希望已登录参与者能够通过微站点侧边栏导航菜单访问某个页面，建议这样做。以下步骤将向你展示如何操作，但如果你想向另一个布局添加侧边栏项目，也可以进行调整。

1. 在 *微站点* 侧边弹出面板中，选择 **已登录布局** 在结构视图中。
   * 选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-90673bb8db696bdefe7b207cfc07c46caf1d43f1%2Fce7a994978f06dd84cc6a31b890071502b4831990afd8fdd73f73c6d2e203660.png?alt=media) **\[退出图标]** 关闭侧边弹出面板并访问编辑画布。
2. 在右侧，位于 *添加* 菜单中，展开 *微站点组件* 类别，然后选择 **侧边栏项目**.

   <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-87da46ebfa6e69752ed1c574a17d0036746d311d%2F125bfdb46d75238f2772523663950b1311a17055d85a39bca25033bc56a45d5e.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>
3. 在编辑画布中，选择一个有效位置以添加 *侧边栏项目* 组件。可用位置由 **添加到侧边栏内容** 消息标示。
   * 在较小的屏幕上，选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-71ccc0ed9e3023e12691656e4a063341060fe3bd%2F69bc484dc36b22c013f4fde7e0360a7ae9b8d39164beff2b6fabc9ea6d0efb1d.svg?alt=media) **\[汉堡菜单]** 以访问 **添加到侧边栏内容** 按钮。
4. 在右侧，位于 *编辑* 菜单，选择一个 **图标** 和 **标签** 来表示该页面。
5. 在 **导航路径** 下拉列表中，选择应将用户引导至的页面 URL 路径。
6. 在页面右上角，选择 **保存**.
   {% endstep %}

{% step %}
**步骤 5：预览并保存**

{% tabs %}
{% tab title="预览你的微站点" %}
你可以预览微站点在参与者眼中的显示效果。

1. 在顶部菜单栏中，在 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9a50309ee9d0e10094bf68c9b9ae1999dbec4f48%2F7cf9c6c1f6544aa358de22e77201e216647a70ab22c854c02334f51f45892424.svg?alt=media) **\[桌面端]**, ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-02123f07d293035e9e37f19e086187c0e90e7dd0%2F1b889798dd233ebb71c2adcc44be0e2887772538ce7c6357d7ef1ea246c0e564.svg?alt=media) **\[平板端]** 或 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-04b329f4eb244c77b35e32d9988afc78f428a88f%2Fe05ee6fbf869c562df0a7fbc8a38b177082975c06ddf6adcda9d4c00bd0e43ac.svg?alt=media) **\[移动端]** 之间切换，查看微站点在每种设备上的显示方式。
2. 要进入预览，请选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[查看]** 位于顶部菜单栏。
3. 要返回编辑界面，请选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[编辑]** 位于顶部菜单栏。
   {% endtab %}

{% tab title="保存你的微站点" %}
微站点编辑器不会自动保存你的更改。请经常保存，以确保不会丢失你的工作。

1. 完成所有相关更改后，选择 **保存** 位于右上角。
2. 保存后，更改将立即显示在微站点的线上版本中。
   {% endtab %}
   {% endtabs %}
   {% endstep %}
   {% endstepper %}

访问我们关于 [小部件和微站点组件说明](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) 的文章，了解更多关于微站点和小部件组件方面的信息。


---

# 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/microsite-experiences/customize-microsite-layouts-and-pages.md?ask=<question>&goal=<endgoal>
```

`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.