# Microsite Editor Explained

The microsite editor gives you control over what your Advocate program's participants will see by letting you customize layouts, pages, content, and branding elements like fonts and colors.

This help article explains the editor’s interface and provides general information about how microsites are structured, including layouts, pages and components. Learn more about [setting up a microsite](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite) and [customizing the branding and content](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages) of its layouts and pages.

#### Open the microsite editor

1. From the left navigation menu, select ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Content**.
2. On the *Microsite* card, select **Edit content**.

#### Editor interface

The microsite editor consists of a top menu bar, the editing canvas, the microsite slideout, and the component menu.

<div data-with-frame="true"><figure><img src="https://4048883401-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="Top menu bar" %}
The menu bar at the top of the page is where you can undo actions, view the HTML code, and preview the finished microsite. Use the desktop, tablet, or mobile icons to see how your microsite will appear on devices with different screen sizes.
{% endtab %}

{% tab title="Canvas" %}
The canvas displays the current content of your microsite. You can select individual components to edit them, or add new ones and see at a glance how they'll show up for your participants. These components are listed to the left within the microsite slideout section.

* Select **Layers** to see a detailed view of all of the components on your page or layout
* Select **Templates** to view the available templates for your microsite's pages.
* You’ll see a context-dependent third menu based on your selected page, layout, widget, or email

  <div data-with-frame="true"><figure><img src="https://4048883401-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="Microsite slideout" %}
The microsite slideout is a collapsible panel to the left of the canvas. It visualizes the inheritance structure of your layouts and pages as a tree. Select individual layouts or pages to view the content and make adjustments. This is also where you can add more pages and layouts.

For even further styling on a branding level, select the Microsite Style option. View [Customize Widgets and Microsites with the Content Editor](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor) for more information on the styling options available to you.
{% endtab %}

{% tab title="Component menu" %}
The component menu is a panel to the right of the canvas. Use the *Add* tab to insert new components into the canvas and the *Edit* tab to make adjustments to what's already there.
{% endtab %}
{% endtabs %}

#### Microsite structure

There are a few building blocks that are important to understand as you customize your microsite: layouts, pages, and components.

<details>

<summary>Layouts</summary>

Layouts act as “frames” for your microsite. They’re where you can place components that you want to appear pervasively across the microsite, like headers and banner images.

Layouts and pages are linked through an inheritance structure. Both pages and layouts can inherit a layout. Pages and layouts that have an inherited layout will have their content wrapped by their inherited layout’s content.

{% hint style="info" %}
**Example:** If your base layout contains a header image, any pages that inherits the base layout will display the same header image in the same location.
{% endhint %}

If you used auto setup to create your microsite, then your site has three layouts by default.

**Base layout**

The base layout is where you can place content that you want to appear regardless of which page a participant is on and whether they’re authenticated on your site. It's where you can add a header or footer that you want to appear across the site. The base layout also contains the brand container, which manages colors and fonts sitewide.

Both the *Logged In Layout* and the *Logged Out Layout* inherit the *Base Layout*.

<div data-with-frame="true"><figure><img src="https://4048883401-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>

**Logged in layout**

The *Logged In Layout* is where you can add components that all your logged in participants will see, regardless of which page they are on. For example, your microsite’s sidebar navigation menu is created through a component in the layout. Because it’s added to the layout, any page that inherits that layout will include that sidebar.

<div data-with-frame="true"><figure><img src="https://4048883401-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>

**Logged out layout**

The *Logged Out Layout* is where you can customize what any participant who is not currently authenticated will see.

<div data-with-frame="true"><figure><img src="https://4048883401-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>Pages</summary>

Pages are where you build the content of your site, like program explainers, referral and sharing information, and text/images. Select an individual page within one of your layouts to open and edit its content.

<div data-with-frame="true"><figure><img src="https://4048883401-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>

Visibility can also be set at the page level, allowing you to restrict page access to one of the following options:

* <mark style="color:$success;">**Verified**</mark>: Logged in participants only.
* <mark style="color:$danger;">**Unverified**</mark>: Logged in participants who have not verified their email address.
* **Public**: Viewable by anyone.

If you used auto setup to create your microsite, then your site comes equipped with several pages that inherit the *Logged In Layout* and the *Logged In Layout*.

**Logged in layout pages:**

* Activity
* Dashboard
* Edit Profile
* Lead Submit
* Tax and Cash

**Logged out layout pages:**

* Email Verification
* Forgot Password
* Login
* Logout
* Page Not Found
* Register
* Reset Password
* Verify Email

</details>

<details>

<summary>Components</summary>

{% hint style="warning" %}
Components are only available to certain editions or add-ons. [Contact support](https://app.impact.com/support/portal.ihtml?createTicket=true&) to upgrade your program.
{% endhint %}

Components are individual elements that you can add to your pages and layouts to further personalize your participants’ microsite experience, like hero images or a referral feed.

Components are grouped together in the component menu. Refer to [Widget and Microsite Components Explained](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences) for a full list of the component groupings and individual components.

<div data-with-frame="true"><figure><img src="https://4048883401-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>