# Inhalt für Web-Popups

**Inhalt für Web-Popups** ist das visuelle Layout, das Besucher sehen, wenn ein Web-Popup auf Ihrer Website erscheint. Erstellen Sie ihn unter **Inhalt** und fügen Sie ihn dann einer [Web-Popup-Kampagne](/de/product/messaging-channels/web-popups/create-web-popups-campaigns/) hinzu.

## Inhalt für Web-Popups erstellen

1. Gehen Sie zu **Inhalt** → **Inhalt für Web-Popups**.
2. Klicken Sie auf **Inhalt für Web-Popup erstellen**.
3. Wählen Sie eine Startvorlage aus der Galerie.

<img src="/content-web-popups-content-1.webp" alt="Galerie der Web-Popup-Vorlagen, die Startvorlagen für Modal, Bild, untere Leiste und mehrseitige Produkttour zeigt"/>
4. Sobald Sie eine Vorlage ausgewählt haben, passen Sie das Popup im Editor an.

### Das Popup benennen

Klicken Sie auf den Popup-Namen in der oberen Leiste, um ihn zu bearbeiten. Der Name identifiziert diesen Inhalt innerhalb von Pushwoosh, in der Inhaltsliste und im Kampagnen-Assistenten. Website-Besucher sehen ihn nicht.

### Popup-Einstellungen bearbeiten

Passen Sie das Erscheinungsbild und die Position des Popups im Einstellungsfenster links von der Arbeitsfläche an:

<Aside type="note">
Diese Einstellungen steuern nur das Design des Popups. Zielgruppe, Seitenausrichtung, Verzögerung, Häufigkeit und Starteinstellungen werden in der [Web-Popup-Kampagne](/de/product/messaging-channels/web-popups/create-web-popups-campaigns/#start-a-new-campaign) konfiguriert.
</Aside>

#### Bilder

Wenn das Layout ein oder mehrere Bilder enthält, erhält jedes einen eigenen Block oben im Fenster mit einer Vorschau und Steuerelementen.

Klicken Sie auf **Bild ändern**, um eine Datei aus dem [Medienspeicher](/de/product/content/media-store/) Ihres Projekts auszuwählen.

<img src="/content-web-popups-content-2.webp" alt="Abschnitt für Popup-Einstellungen mit leerer Bildvorschau und der Schaltfläche „Bild ändern“ im Web-Popup-Editor"/>

Unter der Vorschau:

- **Anpassung:** wie das Bild seinen Rahmen ausfüllt: **Natürlich**, **Abdecken** oder **Enthalten**. Wird nicht für ein Hintergrundbild angezeigt, das immer seinen Bereich abdeckt.
- **Weichzeichnen:** das Bild weichzeichnen, von 0 bis 20 px.
- **Abdunkeln:** nur für Hintergrundbilder. Fügt eine dunkle Blende über das Foto, damit der darüber platzierte Text lesbar bleibt, von 0 bis 100 %.

Einige Layouts fügen auch einen Abschnitt **Layout** mit Einstellungen zur Bildplatzierung hinzu:

- **Bildbreite:** Anteil an der Popup-Breite in Prozent.
- **Bildposition:** **Links** oder **Rechts**, für Layouts mit einem Bild neben dem Text.

Der Abschnitt **Layout** erscheint nur, wenn das aktuelle Layout solche Einstellungen hat. Bei einem Layout mit unterer Leiste bietet er stattdessen **Breite der Schaltflächen** anstelle von Bildsteuerungen.

#### Popup-Größe und -Stil

Im Abschnitt **Popup**:

- **Breite, Höhe (leer = automatisch):** lassen Sie beide Felder leer für ein Popup, das sich an seinen Inhalt anpasst, oder legen Sie eine feste Größe in Pixeln fest. In einem Popup mit mehreren Seiten hat jede Seite ihre eigene Größe.
- **Eckenradius, Schatten:** die Eckenabrundung und der Schlagschatten des Popups.
- **Animation:** wie das Popup erscheint: **Keine**, **Einblenden** oder **Hineingleiten**.

<img src="/content-web-popups-content-3.webp" alt="Popup-Abschnitt im Einstellungsfenster mit Steuerelementen für Breite, Höhe, Eckenradius, Schatten und Animation"/>

#### Farben

Klicken Sie auf **Farben**, um die Farbpalette des Popups zu erweitern:

- **Hintergrund, Akzent (Schaltflächen):** der Popup-Hintergrund und die Akzentfarbe, die auf Schaltflächen angewendet wird.
- **Text, Sekundärtext:** die Farbe des Fließtextes und des Sekundärtextes wie Bildunterschriften und Vortitel.
- **Text über Bild:** wird nur für Layouts mit Text über einem Hintergrundbild angezeigt. Legt die Farbe für diesen Text fest.

<img src="/content-web-popups-content-11.webp" alt="Erweiterter Abschnitt „Farben“, der die Farbauswahl für Hintergrund, Akzent, Text, Sekundärtext und Text über Bild zeigt"/>

#### Platzierung und Überlagerung

Im Abschnitt **PLATZIERUNG**:

- **Position:** wählen Sie mit dem 3×3-Raster aus, wo das Popup auf der Seite verankert wird.
- **Randabstand:** legen Sie den Abstand in Pixeln vom ausgewählten Rand fest.

Im Abschnitt **ÜBERLAGERUNG**:

- **Seite dahinter abdunkeln:** aktivieren, um den Rest der Seite abzudunkeln, während das Popup angezeigt wird.
- **Farbe, Deckkraft:** legen Sie die Farbe und Deckkraft der Überlagerung von 0 bis 1 fest.

<img src="/content-web-popups-content-4.webp" alt="Einstellungsfenster für Web-Popups mit den Abschnitten POPUP, PLATZIERUNG und ÜBERLAGERUNG, einschließlich Platzierungsraster und Überlagerungssteuerungen"/>

### Text bearbeiten

Klicken Sie auf einen beliebigen Textblock im Popup, um ihn direkt zu bearbeiten. Eine Symbolleiste erscheint darüber:

- Wenden Sie **fett**, *kursiv* oder unterstrichene Formatierung an.
- Fügen Sie einen Link hinzu oder entfernen Sie ihn.
- Legen Sie die Ausrichtung links, zentriert oder rechts fest.
- Wählen Sie einen Textstil: **Symbol**, **Vortitel**, **Überschrift 1–3**, **Textkörper** oder **Bildunterschrift**.

<img src="/content-web-popups-content-5.webp" alt="Ausgewählter Text auf der Web-Popup-Leinwand mit der Inline-Bearbeitungsleiste, die Formatierungs-, Ausrichtungs-, Link- und Stilsteuerungen zeigt"/>

### Schaltflächen bearbeiten

Klicken Sie auf eine Schaltfläche, um ihre Symbolleiste zu öffnen:

- Wählen Sie den Schaltflächenstil: **Primär** oder **Sekundär**.
- Wählen Sie, was die Schaltfläche tut:
  - **Einen Link öffnen:** geben Sie die Ziel-URL ein.
  - **Das Popup schließen**.
  - **Gehe zu Seite:** wählen Sie eine andere Seite des Popups aus, zu der gewechselt werden soll. Diese Option erscheint, sobald das Popup mehr als eine Seite hat. Siehe [Mit mehreren Seiten arbeiten](#mit-mehreren-seiten-arbeiten).

<img src="/content-web-popups-content-8.webp" alt="Ausgewählte Schaltfläche auf der Web-Popup-Leinwand mit geöffneter Symbolleiste zur Bearbeitung der Schaltfläche"/>

<Aside type="tip">
Wenn ein Textblock oder eine Schaltfläche ausgewählt ist, verwenden Sie **+T** oder **+B** in der Symbolleiste, um einen Textblock oder eine Schaltfläche darunter hinzuzufügen, die Auf- und Ab-Pfeile, um ihn auf der Seite zu verschieben, und das Löschsymbol, um ihn zu entfernen. Das letzte verbleibende Element einer Seite kann nicht gelöscht werden.

Klicken Sie auf **+ Hinzufügen** unter dem Popup, um einen Textblock oder eine Schaltfläche am Ende der Seite hinzuzufügen.
</Aside>

## Mit mehreren Seiten arbeiten

Ein Web-Popup kann mehr als eine Seite haben, zum Beispiel um Besucher durch ein kurzes, mehrstufiges Angebot zu führen.

### Eine Seite hinzufügen

Klicken Sie auf **+ Seite hinzufügen**, um das Menü zum Hinzufügen von Seiten zu öffnen:

- **Aktuelle Seite duplizieren:** kopiert die aktive Seite, einschließlich aller von Ihnen vorgenommenen Änderungen, als neue Seite.
- Wählen Sie eines der einseitigen Layouts, um eine neue Seite mit dem Demo-Inhalt dieses Layouts hinzuzufügen. Die neue Seite ist von den anderen unabhängig, sodass sie ein anderes Layout verwenden kann.

<img src="/content-web-popups-content-6.webp" alt="Seiten-Tabs des Web-Popup-Editors mit mehreren Seiten, Markierung für die Startseite und „Seite hinzufügen“"/>

<Aside type="note">
Beispiel-Layouts mit mehreren Seiten, wie **Produkttour (mehrseitig)**, werden immer als vollständiger Satz von Seiten geliefert, daher sind sie nur in der Startgalerie und nicht in diesem Menü verfügbar.
</Aside>


Jeder Tab ist eine Seite. Klicken Sie auf einen Tab, um zu ihm zu wechseln.

### Die Startseite festlegen

Der mit ★ markierte Tab ist die **Startseite**, die Seite, die Besucher zuerst sehen. Um sie zu ändern, öffnen Sie einen anderen Tab und klicken Sie auf ☆ auf diesem Tab.

<img src="/content-web-popups-content-7.webp" alt="Seiten-Tabs, die die Sternmarkierung für die Startseite auf einem Tab und das Löschsteuerelement auf dem aktiven Tab zeigen"/>

### Eine Seite löschen

Klicken Sie auf dem aktiven Tab auf **✕**. Ein Bestätigungsdialog öffnet sich. Klicken Sie auf **Löschen**, um die Seite zu entfernen. Dies kann nicht rückgängig gemacht werden.

<Aside type="note">
Schaltflächen mit der Aktion **Gehe zu Seite**, die auf die gelöschte Seite verweisen, fallen auf die **Startseite** zurück.
</Aside>

## Den Inhalt speichern

Überprüfen Sie den Inhalt, die Bilder und die Aktionen der Schaltflächen. Wenn Sie fertig sind, klicken Sie in der oberen Leiste auf **Speichern**.

<Aside type="note">
Das Speichern von Inhalten zeigt das Web-Popup nicht auf Ihrer Website an. Der Inhalt erscheint auf der Website erst, nachdem Sie ihn in einer Web-Popup-Kampagne ausgewählt und die Kampagne gestartet haben.
</Aside>

## Den Inhalt in einer Kampagne verwenden

Nach dem Speichern erscheint der Inhalt unter **Inhalt** → **Inhalt für Web-Popups**. Öffnen Sie ihn aus der Liste, um die Bearbeitung fortzusetzen.

Um ihn auf der Website anzuzeigen, gehen Sie zu **Kampagnen** → **Web-Popups**, erstellen oder bearbeiten Sie eine Kampagne und wählen Sie diesen Inhalt im Schritt **Inhalt** aus.

Konfigurieren Sie dann die Zielgruppe, die Anzeigeeinstellungen, die Häufigkeit und die Startoptionen. Den vollständigen Ablauf finden Sie unter [Web-Popup-Kampagnen erstellen](/de/product/messaging-channels/web-popups/create-web-popups-campaigns/).