> 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 von Microsites anpassen

Microsites sind einer der wichtigsten Berührungspunkte für Teilnehmende Ihres Empfehlungsprogramms. Dieser Hilfeartikel erklärt, wie Sie den *Microsite-Editor* verwenden, um Ihre bestehende Microsite in einen Bereich zu verwandeln, der Ihre Marke widerspiegelt und Ihren Endnutzern ein ansprechendes Erlebnis bietet.

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

1. Wählen Sie im linken Navigationsmenü ![](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] → Inhalt**.
2. Auf der *Microsite* Karte wählen Sie **Inhalt bearbeiten**.
   * Diese Aktion öffnet den Microsite-Editor und zeigt das *Microsite* Slideout 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://4048883401-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&#x26;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 Sie Ihre Arbeit nicht verlieren.
{% endhint %}

{% stepper %}
{% step %}

## **Schritt 1: Ändern Sie das Branding Ihrer Microsite (optional)**

{% tabs %}
{% tab title="Farben und Schriftart" %}
Ihr Basislayout enthält eine Branding-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* Slideout wählen Sie das **Basislayout**.
2. Links unter *Aktuelles Layout*, wählen Sie **Ebenen**.
3. Wählen Sie den **Brand Container**.
4. rechts im *Brand Container* Menü bearbeiten Sie die **Markenfarbe** und **Markenschriftart**.

<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-f58dfdd168765b914fd22b232cabd8030450c27f%2F6f54642b7524983137442de4c4ecc2a20984c511b5e26423a5edadc0060f9a45.png?alt=media" alt="" width="223"><figcaption></figcaption></figure></div>

5. Wählen Sie **Speichern** oben rechts aus.
   {% endtab %}

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

1. Im *Microsite* Slideout wählen Sie das **Basislayout**.
2. Links unter *Aktuelles Layout* oder *Aktuelle Seite*, wählen Sie **Ebenen**.
3. rechts im *Inhalt der Microsite-Frame-Kopfzeile* Menü geben Sie ein Bild an und passen Sie Höhe und Breite nach Wunsch an.
4. Legen Sie den Weiterleitungspfad fest. Dorthin werden Ihre Teilnehmenden weitergeleitet, wenn sie auf das Bild klicken.
5. Wählen Sie **Speichern**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}

## **Schritt 2: Erstellen Sie ein Layout oder eine Seite**

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

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

{% hint style="info" %}
**Beispiel:** Wenn Sie Ihrer Website eine Landingpage hinzufügen möchten, die jeder sehen kann, unabhängig davon, ob er angemeldet ist, können Sie eine neue Seite innerhalb des Basislayouts verschachteln.
{% endhint %}

4. Geben Sie den **Seitentitel** oder den Layoutnamen ein.
5. Optional können Sie den **Seitenschlüssel** für Ihre Seite anpassen. Ein Seitenschlüssel wird automatisch basierend auf dem Seitentitel generiert, Sie können ihn jedoch bei Bedarf ändern.
6. Geben Sie den **URL** für Ihre Seite.
   * Fügen Sie vor dem Namen, den Sie verwenden möchten, einen Schrägstrich hinzu und verwenden Sie Bindestriche bei einer URL mit mehreren Wörtern, z. B. `/company-info`.
7. In der **Zugelassene Benutzer** Dropdown-Liste wählen Sie die Benutzergruppe aus, die auf die Seite zugreifen kann.
   * **Öffentlich:** Für jeden sichtbar.
   * **Verifiziert:** Nur angemeldete Teilnehmende.
   * **Nicht verifiziert:** Angemeldete Teilnehmende, die ihre E-Mail-Adressen noch nicht verifiziert 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 oben rechts auf der Seite **Speichern**.
    {% endtab %}

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

1. Im *Microsite* Slideout 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. Optional können Sie die **Vererbtes Layout** Dropdown-Liste, um das Layout auszuwählen, 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. Optional können Sie den **Layout-Schlüssel** für Ihr Layout. Ein Layout-Schlüssel wird automatisch basierend auf dem Seitentitel generiert, Sie können ihn jedoch bei Bedarf ändern.
6. Wählen Sie **Hinzufügen**.
7. Wählen Sie oben rechts auf 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* Slideout verwenden Sie die Strukturansicht, um das Layout oder die Seite auszuwählen, für das bzw. die Sie die Vorlage verwenden möchten.
2. Links 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://4048883401-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&#x26;token=6fec0d57-89af-4cbc-8e23-2fe243a13882" alt="" width="267"><figcaption></figcaption></figure></div>

4. Wählen Sie oben rechts auf der Seite **Speichern**.
   {% endstep %}

{% step %}

## **Schritt 4: Die Seitenleiste der Microsite bearbeiten**

Dies wird empfohlen, wenn sich angemeldete Teilnehmende über die Navigationsleiste der Microsite-Seitenleiste zu einer Seite begeben können 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* Slideout wählen Sie **Angemeldetes Layout** aus der Strukturansicht.
   * Wählen Sie ![](https://4048883401-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 das Slideout zu schließen und auf die Bearbeitungsfläche zuzugreifen.
2. Rechts im *Hinzufügen* Menü erweitern Sie die *Komponenten der Microsite* Kategorie und wählen Sie dann **Seitenleisten-Element**.

<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-87da46ebfa6e69752ed1c574a17d0036746d311d%2F125bfdb46d75238f2772523663950b1311a17055d85a39bca25033bc56a45d5e.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

3. Ziehen Sie innerhalb der Bearbeitungsfläche die *Seitenleisten-Element* Komponente an eine gültige Position. Verfügbare Positionen werden durch eine **Zur Seitenleisteninhalte hinzufügen** Meldung gekennzeichnet.
   * Auf kleineren Bildschirmen wählen Sie das ![](https://4048883401-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 das **Zu den Seitenleisteninhalten hinzufügen** Schaltfläche.
4. Rechts im *Bearbeiten* Menü wählen Sie ein **Symbol** und **Etikett** aus, um die Seite darzustellen.
5. In der **Navigationspfad** Dropdown-Liste wählen Sie den URL-Pfad der Seite aus, zu der Benutzer weitergeleitet werden sollen.
6. Wählen Sie oben rechts auf der Seite **Speichern**.
   {% endstep %}

{% step %}

## **Schritt 5: Vorschau und speichern**

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

1. Wechseln Sie in der oberen Menüleiste zwischen ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9a50309ee9d0e10094bf68c9b9ae1999dbec4f48%2F7cf9c6c1f6544aa358de22e77201e216647a70ab22c854c02334f51f45892424.svg?alt=media) **\[Desktop]**, ![](https://4048883401-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://4048883401-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 aussieht.
2. Um die Vorschau zu öffnen, wählen Sie ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Ansehen]** in der oberen Menüleiste aus.
3. Um zur Bearbeitungsoberfläche zurückzukehren, wählen Sie ![](https://4048883401-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 Sie Ihre Arbeit nicht verlieren.

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

Besuchen Sie unseren Artikel über [Widget- und Microsite-Komponenten erklärt](/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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
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=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
