# In-App-Nachrichten im integrierten Editor erstellen
Erstellen Sie eine In-App-Nachrichtenvorlage im integrierten Editor von Pushwoosh, ohne Code zu schreiben. Sie erhalten ein wiederverwendbares Layout mit Inhaltsblöcken, Bildern, Schaltflächen und personalisiertem Text, das Sie in einer Customer Journey, als einmalige In-App oder von einer Push-Benachrichtigung aus anzeigen können.
## Eine neue In-App-Vorlage erstellen
Eine In-App-Vorlage ist ein wiederverwendbares Design, das Sie einmal erstellen und dann den Benutzern in Kampagnen anzeigen. Sie können eine im integrierten Editor erstellen, eine benutzerdefinierte HTML-ZIP-Datei hochladen oder eine native Rich-Media-Vorlage erstellen. Dieser Artikel behandelt die Erstellung einer Vorlage von Grund auf im integrierten Editor. Befolgen Sie die gleichen Schritte, um eine vorhandene Vorlage anzupassen.
1. Gehen Sie zu **Inhalt** → **In-Apps**.
2. Klicken Sie auf **Vorlage hinzufügen**.
3. Geben Sie einen Vorlagennamen ein.
4. Wählen Sie, wie die Vorlage erstellt werden soll:
* **Neue Vorlage erstellen:** Erstellen Sie eine Vorlage im integrierten Editor.
* **ZIP hochladen:** [Laden Sie eine ZIP-Datei](/de/developer/guides/content/rich-media-templates-syntax) mit Ihrer HTML-In-App-Nachricht hoch.
* **Native Rich Media erstellen:** Erstellen Sie eine vom SDK gerenderte native In-App. [Erfahren Sie mehr](/de/product/content/in-apps/create-native-in-app-messages/)
5. Wählen Sie **Neue Vorlage erstellen**.
6. Klicken Sie auf **Vorlage hinzufügen**.
## Das Editor-Layout erkunden
Der integrierte Editor hat vier Bereiche. Jeder hat eine klare Aufgabe.
### Obere Leiste
In der oberen Leiste verwalten Sie die Vorlage als Ganzes: ihren Namen, den Rückgängig-Verlauf, den Speicherstatus, wie sie auf dem Gerät aussieht (**In-App-Einstellungen**), Sprachen (**Automatisch übersetzen** und der Sprachumschalter) und die Vorschau-Breite für Mobiltelefone oder Desktops. Siehe [Konfigurieren, wie die In-App auf dem Gerät aussieht](/de/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/#configure-how-the-in-app-looks-on-device) und [Die Vorlage lokalisieren](#localize-the-template).
Öffnen Sie das **⋮**-Menü in der oberen Leiste für weitere Aktionen:
#### Vorschau
Mit der **Vorschau** können Sie die Nachricht ausprobieren, bevor Sie sie speichern: Tippen Sie auf Schaltflächen, navigieren Sie durch mehrseitige Abläufe und überprüfen Sie das Layout auf dem Mobiltelefon oder Desktop.
Was in der Vorschau funktioniert:
* Schaltflächen und mehrseitige Abläufe werden real ausgeführt.
* Links und Deep Links werden gemeldet, aber nicht geöffnet.
* SDK-Aufrufe und Öffnungs-/Klickstatistiken bleiben deaktiviert.
* Die Sprache entspricht dem Sprachumschalter. Merge-Tags bleiben als Platzhalter erhalten.
Wechseln Sie in der Kopfzeile der Vorschau zwischen Mobiltelefon und Desktop, um beide Layouts zu sehen. Klicken Sie auf **Neustart**, um die Nachricht von Anfang an erneut anzuzeigen. Um die Vorschau zu verlassen, drücken Sie Esc oder klicken Sie außerhalb des Fensters.
#### Brand Book
* **Brand Book:** Öffnen Sie das [Brand Book](/de/product/content/brand-book/) Ihres Kontos.
* **Brand-Book-Stile anwenden:** Gestalten Sie die Vorlage neu, damit sie Ihrem Brand Book entspricht (sobald Sie eines eingerichtet haben).
* **Benutzerdefinierte Stile zurücksetzen:** Entfernen Sie Stilüberschreibungen in der Vorlage und kehren Sie zu den Standardeinstellungen zurück.
### Canvas
Bearbeiten Sie die Nachricht auf dem Canvas: Klicken Sie auf Texte, Bilder und Schaltflächen, um sie zu ändern. Verwenden Sie den Umschalter für Mobiltelefon/Desktop in der oberen Leiste, um zu überprüfen, wie das Layout bei jeder Breite aussieht. Der Umschalter ändert nur die Vorschau, nicht das Layout selbst.
### Ebenen
Das Ebenen-Panel listet jeden Block in Ihrer Vorlage als Baumstruktur in der gleichen Reihenfolge wie auf dem Canvas auf. Öffnen Sie es vom linken Rand aus, um einen verschachtelten Block auszuwählen (z. B. eine Schaltfläche innerhalb einer Gruppe) oder ziehen Sie Zeilen, um den Inhalt neu anzuordnen.
### Rechtes Panel
Wechseln Sie zwischen drei Registerkarten:
* **Blöcke:** Fügen Sie der Nachricht Inhalte hinzu. Siehe [Referenz für In-App-Editor-Blöcke](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/).
* **Einstellungen:** Wenden Sie Stile auf die gesamte Vorlage gleichzeitig an. Siehe [In-App-Vorlageneinstellungen konfigurieren](/de/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/).
* **KI:** Chatten Sie mit dem KI-Assistenten, um Inhalte aus einer Eingabeaufforderung zu generieren oder zu bearbeiten.
## Inhaltsblöcke hinzufügen
1. Öffnen Sie die Registerkarte **Blöcke** im rechten Panel.
2. Ziehen Sie einen Block auf den Canvas oder klicken Sie auf einen Block, um ihn am Ende der Vorlage hinzuzufügen.
3. Fügen Sie weitere Blöcke hinzu, bis das Layout fertig ist.
Jeder Blocktyp dient einem anderen Zweck in der Nachricht:
* **[Überschrift](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** Titel und kurze Schlagzeilen
* **[Text](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** Fließtext und längere Beschreibungen
* **[Schaltfläche](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#button):** eine anklickbare Handlungsaufforderung
* **[Bild](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#image):** Bilder aus dem [Medienspeicher](/de/product/content/media-store/), Upload oder URL
* **[Video](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#video):** ein anklickbares Video-Thumbnail, das ein YouTube- oder Vimeo-Video öffnet
* **[Karte](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#card):** ein Bild mit Überschrift, Text und Schaltfläche in einem Layout
* **[Trennlinie](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#divider):** eine Linie, die Abschnitte trennt
* **[Spalten](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#columns):** nebeneinander liegende Layouts (2, 3 oder 4 gleiche Spalten oder 33/67- und 67/33-Aufteilungen)
* **[Timer](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#countdown-timer):** ein Countdown für Angebote und Fristen
* **[Menü](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#menu):** eine Zeile oder Spalte mit Navigations- oder Kontaktlinks
* **[Soziale Netzwerke](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#social):** Symbole, die zu Ihren sozialen Profilen verlinken
* **[HTML](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#html):** benutzerdefiniertes HTML, wie z. B. ein Formular, eine Umfrage oder ein eingebettetes Video
* **[Produkte](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#products):** ein Raster von Produktkarten aus Ihrem [Produktkatalog](/de/product/content/product-catalog/) oder dem verlassenen Warenkorb eines Benutzers
Siehe die [Referenz für In-App-Editor-Blöcke](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/) für die Einstellungen jedes Blocks und [wie man Blöcke speichert und wiederverwendet](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#save-and-reuse-blocks).
### Blöcke für bestimmte Benutzer anzeigen
Nicht jeder Benutzer muss dieselben Blöcke sehen. Legen Sie eine **Anzeigebedingung** für einen Block fest, damit er basierend auf den [Tags](/de/product/audience-data-and-segmentation/user-data-tags/tags/) des Benutzers angezeigt oder ausgeblendet wird. Sie senden weiterhin eine Vorlage, aber jede Person sieht nur die Teile, die für sie relevant sind.
Wählen Sie den Block auf dem Canvas aus, öffnen Sie **Anzeigebedingung** im rechten Panel und aktivieren Sie **Diesen Block bedingt anzeigen**. [Erfahren Sie mehr](/de/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)
## Die Vorlage lokalisieren
Eine mehrsprachige Vorlage speichert lokalisierte Texte für jede Sprache in einem einzigen In-App-Design. Verwenden Sie den Sprachumschalter in der oberen Leiste, um Sprachen hinzuzufügen und Inhalte pro Sprache zu bearbeiten. Klicken Sie auf **Automatisch übersetzen**, um Übersetzungen zu generieren. Wie mehrsprachige Nachrichten über verschiedene Kanäle hinweg funktionieren, erfahren Sie unter [Mehrsprachige Nachrichten](/de/product/personalization/multi-language/).
## Vorlageneinstellungen konfigurieren
Verwenden Sie zwei Stellen, um die Nachricht zu gestalten und zu platzieren:
* Registerkarte **Einstellungen** (rechtes Panel): Dokumentgröße, Farben, Typografie und Standardstile für Blöcke.
* **In-App-Einstellungen** (obere Leiste): Position auf dem Bildschirm, Animationen und die Schließen-Schaltfläche.
[Erfahren Sie mehr](/de/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)
## Die Vorlage speichern
Klicken Sie in der oberen Leiste auf **Speichern**, um Ihre Änderungen zu speichern. Verwenden Sie **Rückgängig**/**Wiederholen** in der oberen Leiste, um Ihre Bearbeitungen schrittweise zurück- und vorwärts zu verfolgen.
3. Geben Sie einen Vorlagennamen ein.
4. Wählen Sie, wie die Vorlage erstellt werden soll:
* **Neue Vorlage erstellen:** Erstellen Sie eine Vorlage im integrierten Editor.
* **ZIP hochladen:** [Laden Sie eine ZIP-Datei](/de/developer/guides/content/rich-media-templates-syntax) mit Ihrer HTML-In-App-Nachricht hoch.
* **Native Rich Media erstellen:** Erstellen Sie eine vom SDK gerenderte native In-App. [Erfahren Sie mehr](/de/product/content/in-apps/create-native-in-app-messages/)
5. Wählen Sie **Neue Vorlage erstellen**.
6. Klicken Sie auf **Vorlage hinzufügen**.
## Das Editor-Layout erkunden
Der integrierte Editor hat vier Bereiche. Jeder hat eine klare Aufgabe.
### Obere Leiste
In der oberen Leiste verwalten Sie die Vorlage als Ganzes: ihren Namen, den Rückgängig-Verlauf, den Speicherstatus, wie sie auf dem Gerät aussieht (**In-App-Einstellungen**), Sprachen (**Automatisch übersetzen** und der Sprachumschalter) und die Vorschau-Breite für Mobiltelefone oder Desktops. Siehe [Konfigurieren, wie die In-App auf dem Gerät aussieht](/de/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/#configure-how-the-in-app-looks-on-device) und [Die Vorlage lokalisieren](#localize-the-template).
Öffnen Sie das **⋮**-Menü in der oberen Leiste für weitere Aktionen:
#### Vorschau
Mit der **Vorschau** können Sie die Nachricht ausprobieren, bevor Sie sie speichern: Tippen Sie auf Schaltflächen, navigieren Sie durch mehrseitige Abläufe und überprüfen Sie das Layout auf dem Mobiltelefon oder Desktop.
Was in der Vorschau funktioniert:
* Schaltflächen und mehrseitige Abläufe werden real ausgeführt.
* Links und Deep Links werden gemeldet, aber nicht geöffnet.
* SDK-Aufrufe und Öffnungs-/Klickstatistiken bleiben deaktiviert.
* Die Sprache entspricht dem Sprachumschalter. Merge-Tags bleiben als Platzhalter erhalten.
Wechseln Sie in der Kopfzeile der Vorschau zwischen Mobiltelefon und Desktop, um beide Layouts zu sehen. Klicken Sie auf **Neustart**, um die Nachricht von Anfang an erneut anzuzeigen. Um die Vorschau zu verlassen, drücken Sie Esc oder klicken Sie außerhalb des Fensters.
#### Brand Book
* **Brand Book:** Öffnen Sie das [Brand Book](/de/product/content/brand-book/) Ihres Kontos.
* **Brand-Book-Stile anwenden:** Gestalten Sie die Vorlage neu, damit sie Ihrem Brand Book entspricht (sobald Sie eines eingerichtet haben).
* **Benutzerdefinierte Stile zurücksetzen:** Entfernen Sie Stilüberschreibungen in der Vorlage und kehren Sie zu den Standardeinstellungen zurück.
### Canvas
Bearbeiten Sie die Nachricht auf dem Canvas: Klicken Sie auf Texte, Bilder und Schaltflächen, um sie zu ändern. Verwenden Sie den Umschalter für Mobiltelefon/Desktop in der oberen Leiste, um zu überprüfen, wie das Layout bei jeder Breite aussieht. Der Umschalter ändert nur die Vorschau, nicht das Layout selbst.
### Ebenen
Das Ebenen-Panel listet jeden Block in Ihrer Vorlage als Baumstruktur in der gleichen Reihenfolge wie auf dem Canvas auf. Öffnen Sie es vom linken Rand aus, um einen verschachtelten Block auszuwählen (z. B. eine Schaltfläche innerhalb einer Gruppe) oder ziehen Sie Zeilen, um den Inhalt neu anzuordnen.
### Rechtes Panel
Wechseln Sie zwischen drei Registerkarten:
* **Blöcke:** Fügen Sie der Nachricht Inhalte hinzu. Siehe [Referenz für In-App-Editor-Blöcke](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/).
* **Einstellungen:** Wenden Sie Stile auf die gesamte Vorlage gleichzeitig an. Siehe [In-App-Vorlageneinstellungen konfigurieren](/de/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/).
* **KI:** Chatten Sie mit dem KI-Assistenten, um Inhalte aus einer Eingabeaufforderung zu generieren oder zu bearbeiten.
## Inhaltsblöcke hinzufügen
1. Öffnen Sie die Registerkarte **Blöcke** im rechten Panel.
2. Ziehen Sie einen Block auf den Canvas oder klicken Sie auf einen Block, um ihn am Ende der Vorlage hinzuzufügen.
3. Fügen Sie weitere Blöcke hinzu, bis das Layout fertig ist.
Jeder Blocktyp dient einem anderen Zweck in der Nachricht:
* **[Überschrift](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** Titel und kurze Schlagzeilen
* **[Text](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** Fließtext und längere Beschreibungen
* **[Schaltfläche](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#button):** eine anklickbare Handlungsaufforderung
* **[Bild](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#image):** Bilder aus dem [Medienspeicher](/de/product/content/media-store/), Upload oder URL
* **[Video](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#video):** ein anklickbares Video-Thumbnail, das ein YouTube- oder Vimeo-Video öffnet
* **[Karte](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#card):** ein Bild mit Überschrift, Text und Schaltfläche in einem Layout
* **[Trennlinie](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#divider):** eine Linie, die Abschnitte trennt
* **[Spalten](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#columns):** nebeneinander liegende Layouts (2, 3 oder 4 gleiche Spalten oder 33/67- und 67/33-Aufteilungen)
* **[Timer](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#countdown-timer):** ein Countdown für Angebote und Fristen
* **[Menü](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#menu):** eine Zeile oder Spalte mit Navigations- oder Kontaktlinks
* **[Soziale Netzwerke](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#social):** Symbole, die zu Ihren sozialen Profilen verlinken
* **[HTML](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#html):** benutzerdefiniertes HTML, wie z. B. ein Formular, eine Umfrage oder ein eingebettetes Video
* **[Produkte](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#products):** ein Raster von Produktkarten aus Ihrem [Produktkatalog](/de/product/content/product-catalog/) oder dem verlassenen Warenkorb eines Benutzers
Siehe die [Referenz für In-App-Editor-Blöcke](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/) für die Einstellungen jedes Blocks und [wie man Blöcke speichert und wiederverwendet](/de/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#save-and-reuse-blocks).
### Blöcke für bestimmte Benutzer anzeigen
Nicht jeder Benutzer muss dieselben Blöcke sehen. Legen Sie eine **Anzeigebedingung** für einen Block fest, damit er basierend auf den [Tags](/de/product/audience-data-and-segmentation/user-data-tags/tags/) des Benutzers angezeigt oder ausgeblendet wird. Sie senden weiterhin eine Vorlage, aber jede Person sieht nur die Teile, die für sie relevant sind.
Wählen Sie den Block auf dem Canvas aus, öffnen Sie **Anzeigebedingung** im rechten Panel und aktivieren Sie **Diesen Block bedingt anzeigen**. [Erfahren Sie mehr](/de/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)
## Die Vorlage lokalisieren
Eine mehrsprachige Vorlage speichert lokalisierte Texte für jede Sprache in einem einzigen In-App-Design. Verwenden Sie den Sprachumschalter in der oberen Leiste, um Sprachen hinzuzufügen und Inhalte pro Sprache zu bearbeiten. Klicken Sie auf **Automatisch übersetzen**, um Übersetzungen zu generieren. Wie mehrsprachige Nachrichten über verschiedene Kanäle hinweg funktionieren, erfahren Sie unter [Mehrsprachige Nachrichten](/de/product/personalization/multi-language/).
## Vorlageneinstellungen konfigurieren
Verwenden Sie zwei Stellen, um die Nachricht zu gestalten und zu platzieren:
* Registerkarte **Einstellungen** (rechtes Panel): Dokumentgröße, Farben, Typografie und Standardstile für Blöcke.
* **In-App-Einstellungen** (obere Leiste): Position auf dem Bildschirm, Animationen und die Schließen-Schaltfläche.
[Erfahren Sie mehr](/de/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)
## Die Vorlage speichern
Klicken Sie in der oberen Leiste auf **Speichern**, um Ihre Änderungen zu speichern. Verwenden Sie **Rückgängig**/**Wiederholen** in der oberen Leiste, um Ihre Bearbeitungen schrittweise zurück- und vorwärts zu verfolgen.