# 微型网站编辑器说明

微型站点编辑器让您通过自定义布局、页面、内容以及诸如字体和颜色之类的品牌元素来控制推广者计划参与者将看到的内容。

本帮助文章介绍编辑器的界面，并提供有关微型站点结构的一般信息，包括布局、页面和组件。了解更多关于 [设置微型站点](https://help.impact.com/brand/zh/ni-xiang-liao-jie-shen-me/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite) 和 [自定义品牌和内容](https://help.impact.com/brand/zh/ni-xiang-liao-jie-shen-me/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages) 的布局和页面。

#### 打开微型站点编辑器

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) **\[参与] → 内容**.
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-6147ebf2ae47ca4606bdd34277af56999a671280%2Fc61b460557871deb1aecbb27a3518982408cf45b72156fca43f3e46dbc54f913.png?alt=media" alt=""><figcaption></figcaption></figure></div>

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

{% tab title="画布" %}
画布显示微型站点的当前内容。您可以选择单独的组件进行编辑，或添加新组件，并一目了然地查看它们将如何向参与者呈现。这些组件在微型站点侧栏部分的左侧列出。

* 选择 **图层** 以查看页面或布局上所有组件的详细视图
* 选择 **模板** 以查看可用于微型站点页面的可用模板。
* 您将根据所选的页面、布局、小部件或电子邮件看到一个基于上下文的第三个菜单

  <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-3de3488148e89adc893ddbf2940d67dedea36a75%2F6564954dd5c2ac36c28fe92e6602750c13ebe01d18f84f6781593d1ec66448f5.jpg?alt=media" alt="" width="122"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="微型站点侧栏" %}
微型站点侧栏是画布左侧的可折叠面板。它以树状结构可视化布局和页面的继承结构。选择单个布局或页面以查看内容并进行调整。这也是添加更多页面和布局的地方。

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

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

#### 微型站点结构

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

<details>

<summary>布局</summary>

布局充当微型站点的“框架”。您可以在其中放置希望在整个微型站点中普遍出现的组件，例如页眉和横幅图像。

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

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

如果您使用自动设置创建微型站点，则默认情况下您的站点具有三个布局。

**基础布局**

基础布局是您可以放置希望无论参与者处于哪个页面以及他们是否已在您的站点验证身份都要显示的内容的地方。您可以在此添加希望在站点各处显示的页眉或页脚。基础布局还包含品牌容器，用于管理全站的颜色和字体。

两者 *登录后布局* 和 *未登录布局* 继承自 *基础布局*.

<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%2F3NHdmPGgjMudnsCGd1Yy%2Fimage.png?alt=media&#x26;token=54feac69-8c46-48be-9f14-32209f3c2539" alt="" width="312"><figcaption></figcaption></figure></div>

**已登录布局**

该 *登录后布局* 用于添加所有已登录参与者都会看到的组件，无论他们处于哪个页面。例如，微型站点的侧边栏导航菜单是通过布局中的一个组件创建的。由于它被添加到布局中，任何继承该布局的页面都将包含该侧边栏。

<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%2FRFRn1J9JxD4iYpmKIAv0%2Flogged-in-layout.jpg?alt=media&#x26;token=4815b054-264d-46e5-bcc8-88ed3ea5a624" alt="" width="310"><figcaption></figcaption></figure></div>

**未登录布局**

该 *未登录布局* 用于自定义任何当前未验证身份的参与者将看到的内容。

<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%2Fzmg9mkIeow7cpu0katqi%2Flogged-out-layout.jpg?alt=media&#x26;token=9bbd561b-237e-43f1-833b-d1076bf9e857" alt="" width="291"><figcaption></figcaption></figure></div>

</details>

<details>

<summary>页面</summary>

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

<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-0a6c026b6fbf6429ea9a8ff3ee2db4f6acfc84fd%2F87f7c50502733db94119262cc22612ef67923c5fc190d8c29938be0f4fd5a34f.jpg?alt=media" alt="" width="318"><figcaption></figcaption></figure></div>

可见性也可以在页面级别进行设置，允许您将页面访问限制为以下选项之一：

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

如果您使用自动设置创建微型站点，则您的站点会自带多个继承 *登录后布局* 和 *登录后布局*.

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

* 活动
* 仪表板
* 编辑资料
* 线索提交
* 税务与费用

**未登录布局页面：**

* 电子邮件验证
* 忘记密码
* 登录
* 退出登录
* 页面未找到
* 登录
* 重置密码
* 验证电子邮件

</details>

<details>

<summary>组件</summary>

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

组件在组件菜单中按组归类。请参阅 [小部件和微型站点组件详解](https://help.impact.com/brand/zh/ni-xiang-liao-jie-shen-me/advocate-program/manage-advocate-participant-experiences) 以获取组件分组和各个组件的完整列表。

<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-75004e7777739ce86600fd0a716eedbd7aa6c52d%2Ff413cd8a60e0c449e8d8a0e0ea0821173134ae92203976190fe299ac2ac079c6.jpg?alt=media" alt="" width="229"><figcaption></figcaption></figure></div>

</details>
