> 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. 从左侧导航菜单中，选择 ![](/files/209022bdb234289211a24a980f6227a8684cc439) **\[Engage] → 内容**.
2. 在 *Microsite* 卡片中，选择 **编辑内容**.
   * 此操作会打开微型站点编辑器并显示 *Microsite* 侧边滑出面板。
3. 使用微型站点编辑器更新您的品牌设置或添加新内容，例如布局和页面。

   <div data-with-frame="true"><figure><img src="/files/12482e7e9fa7cf38f8d1fb6479b5af0c5c4bf657" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

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

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

   <div data-with-frame="true"><figure><img src="/files/363049f23b619b72d4bc69207cc9132f550a3d7c" alt="" width="223"><figcaption></figcaption></figure></div>
5. 选择 **保存** 位于右上角。
   {% endtab %}

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

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

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

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

1. 在 *Microsite* 滑出面板中，选择 **Microsite**.
   * 此操作会打开微型站点的结构视图，显示所有布局和页面。
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. 在 *Microsite* 滑出面板中，选择 **Microsite**.
   * 此操作会打开微型站点的结构视图，显示所有布局和页面。
2. 选择 **添加布局**.
3. 可选地，使用 **继承布局** 下拉列表选择您希望作为父布局的布局。这主要有助于站点组织。
4. 输入 **布局名称** 为您的布局。
5. 可选地，调整 **布局键** 为您的布局。布局键会根据页面标题自动生成，但如果需要，您可以进行更改。
6. 选择 **添加**.
7. 在页面右上角，选择 **保存**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

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

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

1. 从 *Microsite* 侧边滑出面板，使用结构视图选择您要使用模板的布局或页面。
2. 在左侧，位于 *当前布局* 或 *当前页面*下方，选择 **模板**.
3. 浏览可用模板，然后在您要使用的模板卡片上选择 **应用模板** 。

   <div data-with-frame="true"><figure><img src="/files/670547740c012ed006ae8f8226484d6f70ac5df8" alt="" width="267"><figcaption></figcaption></figure></div>
4. 在页面右上角，选择 **保存**.
   {% endstep %}

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

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

1. 从 *Microsite* 滑出面板中，选择 **已登录布局** 从结构视图中。
   * 选择 ![](/files/30670f561191241034f90fa3652a4d3f66c7134d) **\[退出图标]** 以关闭侧边滑出面板并访问编辑画布。
2. 在右侧，位于 *添加* 菜单中，展开 *Microsite 组件* 类别，然后选择 **侧边栏项目**.

   <div data-with-frame="true"><figure><img src="/files/2636a62f151838fb3e37b127b9b3e4d24a72af4d" alt=""><figcaption></figcaption></figure></div>
3. 在编辑画布中，选择一个有效位置以添加 *侧边栏项目* 组件。可用位置由 **添加到侧边栏内容** 消息标示。
   * 在较小屏幕上，选择 ![](/files/0b4f0a10c9232a4c190179bde6c2110d45d0c57b) **\[汉堡菜单]** 以访问 **添加到侧边栏内容** 按钮。
4. 在右侧，位于 *编辑* 菜单，选择一个 **图标** 和 **标签** 来代表该页面。
5. 从 **导航路径** 下拉列表中，选择应将用户引导到的页面 URL 路径。
6. 在页面右上角，选择 **保存**.
   {% endstep %}

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

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

1. 在顶部菜单栏中，在 ![](/files/a96a6e3f4182513ece4ed444c57a60f4e948da89) **\[桌面]**, ![](/files/640e767eadc4aae53752bb3e3318215385fca5ee) **\[平板]** 或 ![](/files/3af67c3435acf8238580bb722891c519b8f8040f) **\[移动设备]** 之间切换，以查看微型站点在各设备上的显示方式。
2. 要进入预览，请选择 ![](/files/e0f08c784d874503337007c4f391feb2cc3590a0) **\[查看]** 从顶部菜单栏预览小组件在参与者中的显示效果。
3. 要返回编辑界面，请选择 ![](/files/e959996412072bc9cd3d674ffbb46e371fa9cea4) **\[编辑]** 从顶部菜单栏预览小组件在参与者中的显示效果。
   {% 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:

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

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.