> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages.md).

# Layouts und Seiten der Microsite anpassen

Microsites sind einer der wichtigsten Berührungspunkte für Teilnehmende in Ihrem Empfehlungsprogramm. Dieser Hilfeartikel erklärt, wie Sie den *Microsite-Editor* um Ihre bestehende Microsite so anzupassen, dass sie Ihre Marke widerspiegelt und Ihren Endnutzern ein ansprechendes Erlebnis bietet.

Wenn Sie noch keine [eingerichtet](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite.md) eine Microsite eingerichtet haben, müssen Sie das zuerst tun.

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] → Inhalt**.
2. Auf der *Microsite* Karte, wählen Sie **Inhalt bearbeiten**.
   * Diese Aktion öffnet den Microsite-Editor und zeigt den *Microsite* Einblendbereich an.
3. Verwenden Sie den Microsite-Editor, um Ihr Branding zu aktualisieren oder neue Inhalte wie Layouts und Seiten hinzuzufügen.

   <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%2Fu8WZu3QIIhdEbGgIEptB%2FScreenshot%202026-05-18%20at%2010.44.26.png?alt=media&amp;token=45c65550-6e83-4e79-8372-ec2793c4c913" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="warning" %}
**Warnung:** Der Microsite-Editor speichert Ihre Änderungen nicht automatisch. Speichern Sie häufig, damit Ihre Arbeit nicht verloren geht.
{% endhint %}

{% stepper %}
{% step %}
**Schritt 1: Das Branding Ihrer Microsite ändern (optional)**

{% tabs %}
{% tab title="Farben und Schriftart" %}
Ihr Basis-Layout enthält eine Brand-Container-Komponente, die die Schriftart und Markenfarben Ihrer Microsite steuert. Markenfarben werden auf verschiedene Bereiche der Microsite angewendet, einschließlich Hervorhebungsfarben und Schaltflächenfarben.

1. Im *Microsite* wählen Sie im Einblendbereich die **Basislayout**.
2. Links unter *Aktuelles Layout*, wählen Sie **Ebenen**.
3. Wählen Sie das **Brand-Container**.
4. Rechts, im *Brand-Container* Menü, bearbeiten Sie die **Markenfarbe** und **Markenschriftart**.

   <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-f58dfdd168765b914fd22b232cabd8030450c27f%2F6f54642b7524983137442de4c4ecc2a20984c511b5e26423a5edadc0060f9a45.png?alt=media" alt="" width="223"><figcaption></figcaption></figure></div>
5. Wählen Sie **Speichern** in der oberen rechten Ecke.
   {% endtab %}

{% tab title="Site-Header" %}
Sie können ein anklickbares Header-Bild hinzufügen, das Ihre Teilnehmenden zu einer von Ihnen festgelegten Seite weiterleitet. Richten Sie es im Basis-Layout ein.

1. Im *Microsite* wählen Sie im Einblendbereich die **Basislayout**.
2. Links unter *Aktuelles Layout* oder *Aktuelle Seite*, wählen Sie **Ebenen**.
3. Rechts, im *Microsite-Frame-Header-Inhalt* Menü, stellen Sie ein Bild bereit und passen Sie Höhe und Breite nach Bedarf an.
4. Legen Sie den Weiterleitungspfad fest. Dorthin werden Ihre Teilnehmenden beim Klicken auf das Bild weitergeleitet.
5. Wählen Sie **Speichern**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}
**Schritt 2: Ein Layout oder eine Seite erstellen**

{% tabs %}
{% tab title="Eine Seite hinzufügen" %}

1. Im *Microsite* Ausklappbereich, wählen Sie **Microsite**.
   * Diese Aktion öffnet die Strukturansicht Ihrer Microsite, in der alle Layouts und Seiten angezeigt werden.
2. Wählen Sie das **Seite hinzufügen** Schaltfläche auswählen.
3. Verwenden Sie optional die **Vererbtes Layout** Dropdown-Liste, um das Layout auszuwählen, das als übergeordnetes Layout dienen soll.

   <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><strong>Beispiel:</strong> Wenn Sie Ihrer Website eine Landingpage hinzufügen möchten, die jeder sehen kann, unabhängig davon, ob er angemeldet ist oder teilnimmt, können Sie eine neue Seite im Basis-Layout verschachteln.</p></div>
4. Geben Sie den **Seitentitel** oder Layoutnamen.
5. Passen Sie optional den **Seitenschlüssel** für Ihre Seite an. Ein Seitenschlüssel wird automatisch basierend auf dem Seitentitel generiert, kann aber bei Bedarf geändert werden.
6. Geben Sie den **URL** für Ihre Seite an.
   * Fügen Sie vor dem gewünschten Namen einen Schrägstrich hinzu und verwenden Sie bei einer URL mit mehreren Wörtern Bindestriche, z. B. `/company-info`.
7. In der **Zugelassene Nutzer** Dropdown-Liste die Benutzergruppe aus, die auf die Seite zugreifen kann.
   * **Öffentlich:** Für alle sichtbar.
   * **Verifiziert:** Nur angemeldete Teilnehmende.
   * **Unverifiziert:** Angemeldete Teilnehmende, die ihre E-Mail-Adressen noch nicht bestätigt haben.
8. In der **Weiterleitung für nicht zugelassene Benutzer** Dropdown-Liste wählen Sie die Seite aus, zu der nicht zugelassene Teilnehmende weitergeleitet werden sollen.
9. Wählen Sie **Hinzufügen**.
10. Wählen Sie in der oberen rechten Ecke der Seite **Speichern**.
    {% endtab %}

{% tab title="Ein Layout hinzufügen" %}

1. Im *Microsite* Ausklappbereich, wählen Sie **Microsite**.
   * Diese Aktion öffnet die Strukturansicht Ihrer Microsite, in der alle Layouts und Seiten angezeigt werden.
2. Wählen Sie **Layout hinzufügen**.
3. Verwenden Sie optional die **Vererbtes Layout** Dropdown-Liste das Layout aus, das als übergeordnetes Layout dienen soll. Dies ist vor allem für die Organisation der Website hilfreich.
4. Geben Sie den **Layoutname** für Ihr Layout.
5. Passen Sie optional den **Layoutschlüssel** für Ihr Layout an. Ein Layoutschlüssel wird automatisch basierend auf dem Seitentitel generiert, kann aber bei Bedarf geändert werden.
6. Wählen Sie **Hinzufügen**.
7. Wählen Sie in der oberen rechten Ecke der Seite **Speichern**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}
**Schritt 3: Eine Vorlage anwenden**

Sie können auf Ihr neues Layout oder Ihre neue Seite eine Vorlage anwenden, wenn Sie nicht von Grund auf neu beginnen möchten.

1. In der *Microsite* Verwenden Sie im Einblendbereich die Strukturansicht, um das Layout oder die Seite auszuwählen, für das bzw. die Sie die Vorlage verwenden möchten.
2. Links unten unter *Aktuelles Layout* oder *Aktuelle Seite*, wählen Sie **Vorlagen**.
3. Durchsuchen Sie die verfügbaren Vorlagen und wählen Sie dann **Vorlage anwenden** auf der Karte der Vorlage aus, die Sie verwenden möchten.

   <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%2FmANLKNh0KRWXP8G7Abj6%2FScreenshot%202026-05-18%20at%2010.40.44.png?alt=media&amp;token=6fec0d57-89af-4cbc-8e23-2fe243a13882" alt="" width="267"><figcaption></figcaption></figure></div>
4. Wählen Sie in der oberen rechten Ecke der Seite **Speichern**.
   {% endstep %}

{% step %}
**Schritt 4: Die Seitenleiste der Microsite bearbeiten**

Dies wird empfohlen, wenn angemeldete Teilnehmende über das Navigationsmenü in der Seitenleiste der Microsite auf eine Seite zugreifen sollen. Diese Schritte zeigen Ihnen, wie das geht, aber Sie können sie anpassen, wenn Sie einem anderen Layout ein Seitenleisten-Element hinzufügen möchten.

1. In der *Microsite* Ausklappbereich, wählen Sie **Layout für angemeldete Teilnehmende** aus der Strukturansicht.
   * Wählen Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-90673bb8db696bdefe7b207cfc07c46caf1d43f1%2Fce7a994978f06dd84cc6a31b890071502b4831990afd8fdd73f73c6d2e203660.png?alt=media) **\[Schließen-Symbol]** um den Einblendbereich zu schließen und auf die Bearbeitungsfläche zuzugreifen.
2. Rechts, im *Hinzufügen* Menü, erweitern Sie die *Microsite-Komponenten* Kategorie und wählen Sie dann **Seitenleisten-Element**.

   <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-87da46ebfa6e69752ed1c574a17d0036746d311d%2F125bfdb46d75238f2772523663950b1311a17055d85a39bca25033bc56a45d5e.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>
3. Wählen Sie auf der Bearbeitungsfläche eine gültige Position aus, um das *Seitenleisten-Element* hinzuzufügen. Verfügbare Positionen werden durch eine **Zum Seitenleisteninhalt hinzufügen** Meldung gekennzeichnet.
   * Auf kleineren Bildschirmen wählen Sie das ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-71ccc0ed9e3023e12691656e4a063341060fe3bd%2F69bc484dc36b22c013f4fde7e0360a7ae9b8d39164beff2b6fabc9ea6d0efb1d.svg?alt=media) **\[Hamburger-Menü]** um auf die **Zum Seitenleisteninhalt hinzufügen** Schaltfläche auswählen.
4. Rechts, im *Bearbeiten* Menü, wählen Sie ein **Symbol** und **Bezeichnung** zur Darstellung der Seite aus.
5. In der **Navigationspfad** Dropdown-Liste den URL-Pfad der Seite aus, auf die Benutzer weitergeleitet werden sollen.
6. Wählen Sie in der oberen rechten Ecke der Seite **Speichern**.
   {% endstep %}

{% step %}
**Schritt 5: Vorschau anzeigen und speichern**

{% tabs %}
{% tab title="Zeigen Sie eine Vorschau Ihrer Microsite an" %}
Sie können in der Vorschau sehen, wie die Microsite für Ihre Teilnehmenden aussehen wird.

1. Wechseln Sie in der oberen Menüleiste zwischen ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9a50309ee9d0e10094bf68c9b9ae1999dbec4f48%2F7cf9c6c1f6544aa358de22e77201e216647a70ab22c854c02334f51f45892424.svg?alt=media) **\[Desktop]**, ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-02123f07d293035e9e37f19e086187c0e90e7dd0%2F1b889798dd233ebb71c2adcc44be0e2887772538ce7c6357d7ef1ea246c0e564.svg?alt=media) **\[Tablet]** oder ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-04b329f4eb244c77b35e32d9988afc78f428a88f%2Fe05ee6fbf869c562df0a7fbc8a38b177082975c06ddf6adcda9d4c00bd0e43ac.svg?alt=media) **\[Mobil]** um zu sehen, wie die Microsite auf jedem Gerät angezeigt wird.
2. Um die Vorschau zu öffnen, wählen Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Ansicht]** in der oberen Menüleiste aus.
3. Um zur Bearbeitungsoberfläche zurückzukehren, wählen Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[Bearbeiten]** in der oberen Menüleiste aus.
   {% endtab %}

{% tab title="Speichern Sie Ihre Microsite" %}
Der Microsite-Editor speichert Ihre Änderungen nicht automatisch. Speichern Sie häufig, damit Ihre Arbeit nicht verloren geht.

1. Nachdem Sie alle relevanten Änderungen vorgenommen haben, wählen Sie **Speichern** oben rechts aus.
2. Sobald sie gespeichert wurden, werden die Änderungen sofort in der Live-Version Ihrer Microsite angezeigt.
   {% endtab %}
   {% endtabs %}
   {% endstep %}
   {% endstepper %}

Lesen Sie unseren Artikel über [Erklärung der Widget- und Microsite-Komponenten](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) für weitere Informationen zu den Komponenten-Aspekten von Microsites und Widgets.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.impact.com/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.