# 微型网站编辑器详解

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

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