# 自定义微型网站布局和页面

微型网站是推荐计划中参与者接触点的关键之一。此帮助文章说明如何使用 *了解有关* 将现有微型网站自定义为反映贵品牌并为最终用户提供吸引人体验的空间。

如果您尚未 [设置](https://help.impact.com/brand/zh/nin-xiang-liao-jie-shen-me/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite) 微型网站，则需要先进行设置。

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. 在 *之前不会向参与者显示。* 卡片上，选择 **\[Engage] → 内容。**.
   * 此操作会打开微型网站编辑器并显示 *之前不会向参与者显示。* 侧滑窗。
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%2Fgit-blob-b86511b064633eb26a6b404d647528e31dcb5a12%2Fb13e0c9a76f7d38a693d8072ff7115433720c38466813323241c794fda4856ca.png?alt=media" alt=""><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 请使用连字符，例如： `/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%2Fgit-blob-a0bfe48f82a572dff145227f203272771f6b739a%2F259af004a6a8f554bcfff90975d56b1ec1ec45ce65356cd232fdd4a091cf8c48.jpg?alt=media" alt="" width="310"><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 %}

查看我们关于 [小部件和微型网站组件说明](https://help.impact.com/brand/zh/nin-xiang-liao-jie-shen-me/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained) 的文章，以了解有关微型网站和小部件组件方面的更多信息。