# Microsite-Editor erklärt

Der Microsite-Editor gibt Ihnen die Kontrolle darüber, was die Teilnehmer Ihres Advocate-Programms sehen werden, indem Sie Layouts, Seiten, Inhalte und Branding-Elemente wie Schriftarten und Farben anpassen können.

Dieser Hilfeartikel erklärt die Benutzeroberfläche des Editors und bietet allgemeine Informationen darüber, wie Microsites strukturiert sind, einschließlich Layouts, Seiten und Komponenten. Erfahren Sie mehr über [das Einrichten einer Microsite](https://help.impact.com/brand/de/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite) und [das Anpassen von Branding und Inhalt](https://help.impact.com/brand/de/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages) ihrer Layouts und Seiten.

#### Den Microsite-Editor öffnen

1. Wählen Sie im linken Navigationsmenü ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Inhalte**.
2. Auf der *Microsite* Karte wählen Sie **Inhalte bearbeiten**.

#### Editor-Benutzeroberfläche

Der Microsite-Editor besteht aus einer oberen Menüleiste, der Bearbeitungsfläche (Canvas), dem Microsite-Ausklappbereich und dem Komponentenmenü.

<div data-with-frame="true"><figure><img src="https://1698965099-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="Obere Menüleiste" %}
In der Menüleiste oben auf der Seite können Sie Aktionen rückgängig machen, den HTML-Code anzeigen und die fertige Microsite in der Vorschau betrachten. Verwenden Sie die Symbole für Desktop, Tablet oder Mobilgerät, um zu sehen, wie Ihre Microsite auf Geräten mit verschiedenen Bildschirmgrößen dargestellt wird.
{% endtab %}

{% tab title="Canvas" %}
Die Canvas zeigt den aktuellen Inhalt Ihrer Microsite an. Sie können einzelne Komponenten auswählen, um sie zu bearbeiten, oder neue hinzufügen und auf einen Blick sehen, wie sie Ihren Teilnehmern angezeigt werden. Diese Komponenten sind links im Microsite-Ausklappbereich aufgelistet.

* Wählen Sie **Ebenen** um eine detaillierte Ansicht aller Komponenten auf Ihrer Seite oder Ihrem Layout zu sehen
* Wählen Sie **Vorlagen** um die verfügbaren Vorlagen für die Seiten Ihrer Microsite anzuzeigen.
* Sie sehen ein kontextabhängiges drittes Menü basierend auf der ausgewählten Seite, dem Layout, dem Widget oder der E-Mail

  <div data-with-frame="true"><figure><img src="https://1698965099-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-Ausklappbereich" %}
Der Microsite-Ausklappbereich ist ein einklappbares Bedienfeld links von der Canvas. Er visualisiert die Vererbungsstruktur Ihrer Layouts und Seiten als Baum. Wählen Sie einzelne Layouts oder Seiten aus, um den Inhalt anzuzeigen und Anpassungen vorzunehmen. Hier können Sie auch weitere Seiten und Layouts hinzufügen.

Für noch umfangreichere Stiloptionen auf Branding-Ebene wählen Sie die Option Microsite-Stil. Sehen Sie [Widgets und Microsites mit dem Inhaltseditor anpassen](https://help.impact.com/brand/de/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor) für weitere Informationen zu den Ihnen verfügbaren Styling-Optionen.
{% endtab %}

{% tab title="Komponentenmenü" %}
Das Komponentenmenü ist ein Bedienfeld rechts von der Canvas. Verwenden Sie die *Hinzufügen* Registerkarte, um neue Komponenten in die Canvas einzufügen, und die *Bearbeiten* Registerkarte, um Anpassungen an bereits vorhandenem Inhalt vorzunehmen.
{% endtab %}
{% endtabs %}

#### Microsite-Struktur

Es gibt einige Bausteine, die wichtig sind, um sie zu verstehen, während Sie Ihre Microsite anpassen: Layouts, Seiten und Komponenten.

<details>

<summary>Layouts</summary>

Layouts fungieren als „Rahmen“ für Ihre Microsite. Dort können Sie Komponenten platzieren, die durchgängig auf der Microsite erscheinen sollen, wie z. B. Kopfzeilen und Bannerbilder.

Layouts und Seiten sind durch eine Vererbungsstruktur miteinander verknüpft. Sowohl Seiten als auch Layouts können ein Layout erben. Seiten und Layouts, die ein geerbtes Layout haben, werden ihren Inhalt vom Inhalt des geerbten Layouts umschließen lassen.

{% hint style="info" %}
**Beispiel:** Wenn Ihr Basis-Layout ein Header-Bild enthält, zeigen alle Seiten, die das Basis-Layout erben, dasselbe Header-Bild an derselben Stelle an.
{% endhint %}

Wenn Sie die automatische Einrichtung verwendet haben, um Ihre Microsite zu erstellen, dann verfügt Ihre Website standardmäßig über drei Layouts.

**Basis-Layout**

Im Basis-Layout können Sie Inhalte platzieren, die unabhängig davon erscheinen sollen, auf welcher Seite sich ein Teilnehmer befindet und ob er auf Ihrer Website authentifiziert ist. Hier können Sie z. B. eine Kopf- oder Fußzeile hinzufügen, die auf der gesamten Website erscheinen soll. Das Basis-Layout enthält außerdem den Marken-Container, der Farben und Schriftarten siteweit verwaltet.

Sowohl das *Angemeldet-Layout* als auch das *Abgemeldet-Layout* erben das *Basis-Layout*.

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

**Angemeldet-Layout**

Dort können Sie Komponenten hinzufügen, die alle angemeldeten Teilnehmer sehen werden, unabhängig davon, auf welcher Seite sie sich befinden. Zum Beispiel wird das Seitenleisten-Navigationsmenü Ihrer Microsite durch eine Komponente im Layout erstellt. Da es dem Layout hinzugefügt wird, enthält jede Seite, die dieses Layout erbt, diese Seitenleiste. *Angemeldet-Layout* ist der Bereich, in dem Sie Komponenten hinzufügen können, die alle Ihre angemeldeten Teilnehmer sehen werden, unabhängig davon, auf welcher Seite sie sich befinden. Zum Beispiel wird das Seitenleisten-Navigationsmenü Ihrer Microsite durch eine Komponente im Layout erstellt. Da es dem Layout hinzugefügt wird, enthält jede Seite, die dieses Layout erbt, diese Seitenleiste.

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

**Abgemeldet-Layout**

Dort können Sie Komponenten hinzufügen, die alle angemeldeten Teilnehmer sehen werden, unabhängig davon, auf welcher Seite sie sich befinden. Zum Beispiel wird das Seitenleisten-Navigationsmenü Ihrer Microsite durch eine Komponente im Layout erstellt. Da es dem Layout hinzugefügt wird, enthält jede Seite, die dieses Layout erbt, diese Seitenleiste. *Abgemeldet-Layout* ist der Bereich, in dem Sie anpassen können, was jeder Teilnehmer sieht, der derzeit nicht authentifiziert ist.

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

Seiten sind der Ort, an dem Sie den Inhalt Ihrer Website erstellen, wie Programm-Erklärungen, Informationen zu Empfehlungen und Teilen sowie Text/Bilder. Wählen Sie eine einzelne Seite innerhalb eines Ihrer Layouts aus, um ihren Inhalt zu öffnen und zu bearbeiten.

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

Die Sichtbarkeit kann auch auf Seitenebene festgelegt werden, sodass Sie den Seitenzugriff auf eine der folgenden Optionen beschränken können:

* <mark style="color:$success;">**Verifiziert**</mark>: Nur angemeldete Teilnehmer.
* <mark style="color:$danger;">**Unverifiziert**</mark>: Angemeldete Teilnehmer, die ihre E-Mail-Adresse nicht verifiziert haben.
* **Öffentlich**: Für jeden sichtbar.

Wenn Sie die automatische Einrichtung verwendet haben, um Ihre Microsite zu erstellen, dann ist Ihre Site mit mehreren Seiten ausgestattet, die das *Angemeldet-Layout* als auch das *Angemeldet-Layout*.

**Seiten des angemeldet-Layouts:**

* Aktivität
* Dashboard
* Profil bearbeiten
* Lead-Einreichung
* Steuern und Auszahlung

**Seiten des abgemeldet-Layouts:**

* E-Mail-Verifizierung
* Passwort vergessen
* Einloggen
* Ausloggen
* Seite nicht gefunden
* Registrieren
* Passwort zurücksetzen
* E-Mail verifizieren

</details>

<details>

<summary>Komponenten</summary>

Komponenten sind einzelne Elemente, die Sie zu Ihren Seiten und Layouts hinzufügen können, um die Microsite-Erfahrung Ihrer Teilnehmer weiter zu personalisieren, wie z. B. Hero-Bilder oder einen Empfehlungs-Feed.

Komponenten sind im Komponentenmenü gruppiert. Siehe [Widgets- und Microsite-Komponenten erklärt](https://help.impact.com/brand/de/advocate-program/manage-advocate-participant-experiences) für eine vollständige Liste der Komponentengruppierungen und einzelnen Komponenten.

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