# 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.

<Aside type="note">
Bevor Sie beginnen, integrieren Sie das Pushwoosh SDK, damit In-App-Nachrichten in Ihrer App angezeigt werden können. [Mehr erfahren](/de/product/messaging-channels/in-apps/)
</Aside>

## 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 erstellen, indem Sie eine benutzerdefinierte HTML-ZIP-Datei hochladen oder sie im integrierten Editor erstellen. Dieser Artikel behandelt die Erstellung einer Vorlage von Grund auf im integrierten Editor. Befolgen Sie die gleichen Schritte, um eine bestehende Vorlage anzupassen.

1. Gehen Sie zu **Inhalt** → **In-apps**.
2. Klicken Sie auf **Vorlage hinzufügen**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-1.webp" alt="Seite 'Inhalt > In-Apps' mit der Schaltfläche 'Vorlage hinzufügen' oben rechts in der Vorlagenliste"/>

3. Geben Sie einen Vorlagennamen ein.
4. Wählen Sie, wie Sie die Vorlage erstellen möchten:
   * **ZIP hochladen:** [laden Sie eine ZIP-Datei hoch](/de/developer/guides/content/rich-media-templates-syntax) mit Ihrer HTML-In-App-Nachricht.
   * **Neue Vorlage erstellen:** erstellen Sie eine Vorlage im integrierten Editor.
5. Wählen Sie **Neue Vorlage erstellen**.
6. Klicken Sie auf **Vorlage hinzufügen**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-2.webp" alt="Formular für neue Vorlage mit Namensfeld, Option 'ZIP hochladen' und ausgewählter Option 'Neue Vorlage erstellen'"/>


### Die Editor-Oberfläche erkunden

Der integrierte Editor hat vier Bereiche. Jeder hat eine klare Aufgabe.

**Obere Leiste**

Verwenden Sie die obere Leiste, um die Vorlage umzubenennen, Fehler rückgängig zu machen, Ihre Arbeit zu speichern oder die **In-App-Einstellungen** zu öffnen, wenn Sie ändern müssen, wie die Nachricht auf dem Gerät erscheint. Siehe [Konfigurieren, wie die In-App auf dem Gerät aussieht](#configure-how-the-in-app-looks-on-device).

<img src="/rich-media-create-rich-media-in-the-built-in-editor-3.webp" alt="Obere Leiste des In-App-Editors mit Vorlagennamen, Rückgängig, Wiederholen, In-App-Einstellungen und Speichern"/>

**Canvas**

Verwenden Sie den Canvas, um die Nachricht so zu sehen, wie die Benutzer sie sehen werden, und um Text, Bilder und Schaltflächen direkt im Layout zu bearbeiten. Eine leere Vorlage zeigt **Mit einem Block beginnen**. Über dem Canvas schaltet ein Telefon/Tablet-Umschalter die Vorschau-Breite um – er ändert nicht Ihr Layout, sondern nur, auf wie breitem Bildschirm Sie es in der Vorschau betrachten.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-4.webp" alt="Leerer Canvas im In-App-Editor mit der Aufforderung 'Mit einem Block beginnen' in der Mitte" width="480"/>

**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, wenn Sie einen verschachtelten Block auswählen möchten (z. B. eine Schaltfläche innerhalb einer Gruppe) oder ziehen Sie Zeilen, um die Reihenfolge der Inhalte zu ändern.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-5.webp" alt="Ebenen-Panel, das Karte, Bild, Überschrift, Text, Timer, Schaltflächen und Fußzeile in einer Baumstruktur auflistet"/>

**Rechtes Panel**

Verwenden Sie **Blöcke** im rechten Panel, um Inhalte zur Nachricht hinzuzufügen, und **Einstellungen**, wenn Sie ein Styling wünschen, das auf die gesamte Vorlage gleichzeitig angewendet wird. Siehe [Vorlagenweites Styling konfigurieren](#configure-template-wide-styling).

<img src="/rich-media-create-rich-media-in-the-built-in-editor-6.webp" alt="Registerkarte 'Blöcke' im rechten Panel mit Überschrift, Text, Schaltfläche, Bild und anderen Inhaltsblöcken" width="320"/>

### Mit dem Erstellen der Vorlage beginnen

Nachdem Sie eine Vorlage erstellt haben, öffnet sich der Editor mit einem leeren Canvas und der Registerkarte **Blöcke** auf der rechten Seite.

1. Ziehen Sie einen Block aus dem **Blöcke**-Panel auf den Canvas oder klicken Sie auf einen Block im Panel, um ihn hinzuzufügen.
2. Fügen Sie auf die gleiche Weise weitere Blöcke hinzu, bis das Layout fertig ist.
3. Öffnen Sie die Registerkarte **Einstellungen**, wenn Sie ein vorlagenweites Styling benötigen.


<img src="/rich-media-create-rich-media-in-the-built-in-editor-7.webp" alt="Leerer In-App-Editor mit 'Mit einem Block beginnen' auf dem Canvas und geöffnetem Blöcke-Panel"/>

### Inhaltsblöcke hinzufügen

Inhaltsblöcke sind die Bausteine einer In-App-Vorlage im integrierten Editor. Sie kombinieren Überschriften, Text, Bilder, Schaltflächen und andere Blöcke zu einem Layout.

Öffnen Sie die Registerkarte **Blöcke** und ziehen Sie einen Block auf den Canvas oder klicken Sie auf einen Block, um ihn hinzuzufügen. Verfügbare Blöcke:

* **[Überschrift](#heading-and-text):** Titel und kurze Schlagzeilen in der Nachricht
* **[Text](#heading-and-text):** Fließtext und längere Beschreibungen
* **[Schaltfläche](#button):** eine anklickbare Handlungsaufforderung
* **[Bild](#image):** Bilder aus dem [Medienspeicher](/de/product/content/media-store/), per Upload oder URL
* **[Trennlinie](#divider):** eine Linie, die Abschnitte visuell trennt
* **[2 Spalten](#columns):** zwei gleich große Spalten nebeneinander
* **[3 Spalten](#columns):** drei gleich große Spalten nebeneinander
* **[4 Spalten](#columns):** vier gleich große Spalten nebeneinander
* **[33 / 67](#columns):** zwei Spalten, bei denen die linke etwa 33 % der Breite und die rechte etwa 67 % einnimmt
* **[67 / 33](#columns):** zwei Spalten, bei denen die linke etwa 67 % der Breite und die rechte etwa 33 % einnimmt
* **[Timer](#countdown-timer):** ein Countdown für Angebote und Fristen
* **[Menü](#menu):** eine Reihe oder Spalte von Links, wie z. B. Navigation oder Kontakte
* **[Soziale Netzwerke](#social):** Symbole, die auf Ihre sozialen Profile verlinken
* **[HTML](#html):** benutzerdefiniertes HTML, wie z. B. ein Formular oder eingebettetes Video

### Überschrift und Text

**Überschrift**- und **Text**-Blöcke enthalten den Text, den Benutzer in der In-App-Nachricht lesen. Bearbeiten Sie den Text auf dem Canvas und formatieren Sie ihn mit der Symbolleiste.

Klicken Sie auf einen **Überschrift**- oder **Text**-Block, um dessen Text auf dem Canvas zu bearbeiten. Wählen Sie einen Text aus, um die Formatierungs-Symbolleiste aufzurufen: Fett, Kursiv, Unterstrichen, Ausrichtung, eine Link-Schaltfläche und ein **Textstil**-Dropdown-Menü.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-8.webp" alt="Überschriftenblock auf dem Canvas ausgewählt, mit der Textformatierungs-Symbolleiste, die Stil- und Formatierungsoptionen anzeigt"/>

Merge-Tags sind Platzhalter, die einen [Tag](/de/product/audience-data-and-segmentation/user-data-tags/tags/)-Wert aus dem Profil des Benutzers in die Nachricht einfügen, sodass jeder Abonnent personalisierten Text sieht. Um einen hinzuzufügen, wählen Sie den Text aus, klicken Sie in der Symbolleiste auf **Merge-Tags** und wählen Sie einen Tag aus Ihrem Konto. [Erfahren Sie mehr über personalisierte In-App-Nachrichten](/de/product/how-to-guides/how-to-send-a-personalized-message/how-to-send-a-personalized-in-app-message/)


### Bild

Ein **Bild**-Block zeigt ein Bild in der In-App-Vorlage an. Wählen Sie ihn auf dem Canvas aus, um die **Bild**-Einstellungen im rechten Panel zu öffnen.

* **Bild hinzufügen** / **Bild ersetzen:** klicken Sie auf **Bild hinzufügen**, wenn der Block leer ist, oder auf **Bild ersetzen**, wenn bereits ein Bild festgelegt ist. Sie können eine Datei hochladen oder eine aus Ihrem [Medienspeicher](/de/product/content/media-store/) auswählen.
* **Bild-URL:** fügen Sie einen gehosteten Link zum Bild ein.
* **Alt-Text:** beschreiben Sie das Bild für die Barrierefreiheit.
* **Link-URL:** öffnet eine Webseite, wenn auf das Bild getippt wird.
* **Link-Ziel:** öffnet den Link im selben oder einem neuen Tab.
* **Datei:** nachdem Sie ein Bild hinzugefügt haben, wird der Pfad der verwendeten Datei angezeigt.

Aktivieren Sie unter **Abstand** die Option **Innenabstand**, um Platz um das Bild herum hinzuzufügen. Verwenden Sie **Alle Seiten** für den gleichen Abstand auf jeder Seite oder aktivieren Sie **Weitere Optionen**, um jede Seite separat einzustellen.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-9.webp" alt="Leerer Bildblock auf dem Canvas mit Bildeinstellungen, die Bild hinzufügen, Bild-URL, Alt-Text, Link-URL und Abstand anzeigen" width="600"/>

### Schaltfläche

Eine **Schaltfläche** ist eine anklickbare Handlungsaufforderung (Call-to-Action) in der In-App-Nachricht. Verwenden Sie sie, um eine URL zu öffnen, benutzerdefiniertes JavaScript auszuführen oder die Nachricht zu schließen.

Klicken Sie auf einen **Schaltflächen**-Block, um dessen Beschriftung auf dem Canvas zu bearbeiten. Verwenden Sie die Symbolleiste, um Schriftgröße, Textfarbe, Fett, Kursiv, Unterstrichen und Ausrichtung zu ändern.

Um festzulegen, was passiert, wenn der Benutzer auf die Schaltfläche tippt:

1. Klicken Sie auf das Link-Symbol in der Symbolleiste, um **Link einfügen/bearbeiten** zu öffnen.
2. Wählen Sie einen **Aktionstyp**.
3. Füllen Sie die Felder für diese Aktion aus (siehe unten).
4. Klicken Sie auf **Speichern**.

#### Eine Webseite öffnen

**Webseite öffnen** öffnet einen Link, wenn der Benutzer auf die Schaltfläche tippt. Geben Sie die Adresse in **URL** ein. Was Sie eingeben können:

* Eine Webseite: `https://example.com`
* Ein App-Link, der einen Bildschirm in Ihrer App öffnet: `myapp://promo`
* Die In-App ohne JavaScript schließen: `pushwoosh://close`

<img src="/rich-media-create-rich-media-in-the-built-in-editor-10.webp" alt="Dialog 'Link einfügen/bearbeiten' für eine Schaltfläche mit Aktionstyp 'Webseite öffnen' und einem URL-Feld"/>

#### Benutzerdefiniertes JavaScript ausführen

**Benutzerdefiniertes Javascript** führt Code aus, wenn der Benutzer auf die Schaltfläche tippt. Geben Sie den Code in das Feld **onClick** ein.

Verwenden Sie dies, wenn ein Tippen etwas in Pushwoosh bewirken soll, nicht nur einen Link öffnen. Die Person in der App sieht immer noch eine normale Schaltfläche. Sie sieht keine Tags oder Events. Sie entscheiden, was als Nächstes auf dem Bildschirm passiert: die Nachricht offen lassen oder sie im selben **onClick** schließen.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-11.webp" alt="Dialog 'Link einfügen/bearbeiten' für eine Schaltfläche mit Aktionstyp 'Benutzerdefiniertes JavaScript' und onClick auf closeInApp gesetzt"/>

**Verfügbare Methoden in onClick**

* `pushwoosh.closeInApp()`: schließt die In-App-Nachricht. Lassen Sie es weg, um die Nachricht nach dem Tippen geöffnet zu lassen.
* `pushwoosh.sendTags({...})`: speichert Werte als [Geräte-Tags](/de/product/audience-data-and-segmentation/user-data-tags/tags/) für spätere Kampagnen.
* `pushwoosh.postEvent(...)`: sendet ein [benutzerdefiniertes Event](/de/product/audience-data-and-segmentation/events/custom-events/), zum Beispiel um eine Customer Journey zu starten.
* `pushwoosh.getTags(...)`: liest aktuelle Tags. Nützlich in benutzerdefiniertem HTML, um zu ändern, was die Nachricht anzeigt.
* `pushwoosh.getCustomData()`: liest benutzerdefinierte Daten, die von der Push-Benachrichtigung übergeben wurden, die diese In-App geöffnet hat.

##### Beispiel: Benutzer ein Interesse auswählen und für spätere Kampagnen speichern lassen

1. Fügen Sie eine Frage in einem **Text**- oder **Überschrift**-Block hinzu, zum Beispiel: "Welchen Sport mögen Sie?"
2. Fügen Sie eine **Schaltfläche** pro Option hinzu, zum Beispiel: **Yoga** und **Fitnessstudio**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-12.webp" alt="In-App-Vorlage mit Yoga- und Fitnessstudio-Schaltflächen und benutzerdefiniertem JavaScript onClick für die Yoga-Schaltfläche"/>

3. Setzen Sie den **Aktionstyp** für jede Schaltfläche auf **Benutzerdefiniertes Javascript**.
4. Fügen Sie für die **Yoga**-Schaltfläche Folgendes in **onClick** ein:

```js
pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();
```

5. Fügen Sie für die **Fitnessstudio**-Schaltfläche Folgendes in **onClick** ein:

```js
pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();
```


Wenn der Benutzer auf **Yoga** tippt, schreibt Pushwoosh den `interest`-Tag auf sein Gerät und schließt die In-App. Sie können diesen Benutzer dann in einem [Segment](/de/product/audience-data-and-segmentation/segmentation/) oder einer [Customer Journey](/de/product/customer-journey/journey-elements/#in-app) ansprechen.

<LinkCard title="Erfahren Sie mehr darüber, wie man In-Apps mit JavaScript erstellt" href="/developer/guides/messaging-channels/inapp-with-javascript/" />

### Trennlinie

Eine **Trennlinie** ist eine horizontale Linie zwischen Inhaltsblöcken. Verwenden Sie sie, um Abschnitte in der Vorlage visuell zu trennen.

Konfigurieren Sie **Linienstil** (Durchgezogen, Gestrichelt, Gepunktet), **Farbe**, **Dicke** und **Breite** im Einstellungs-Panel.

### HTML

Der **HTML**-Block ermöglicht es Ihnen, benutzerdefinierten HTML-Code in eine In-App-Vorlage einzufügen. Verwenden Sie ihn für ein benutzerdefiniertes Formular, eine Umfrage oder ein eingebettetes Video, wenn es keinen dedizierten Formular-Block für In-App-Nachrichten gibt.


##### Beispiele

Die folgenden Beispiele zeigen gängige Anwendungsfälle für den HTML-Block in einer In-App-Vorlage: ein Lead-Formular, eine Umfrage und ein eingebettetes Video.

<Aside type="note">
Die Formular- und Umfragebeispiele speichern Geräte-Tags und senden Events über Pushwoosh. Erstellen Sie die benutzerdefinierten Events in Ihrem Konto, bevor Sie sie in Kampagnen verwenden.
</Aside>

<Tabs>
<TabItem label="Lead-Formular">

Dieses Lead-Formular schreibt Name und E-Mail als Tags, sendet ein `promo_requested`-Event, zeigt eine Dankesnachricht an und schließt dann die In-App.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-13.webp" alt="HTML-Lead-Formular im In-App-Editor mit Namens- und E-Mail-Feldern und einer Schaltfläche 'Code an mich senden'" width="360"/>

<details>
<summary>HTML-Code</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>Get your 20% discount</h2>
<p>Leave your name and email — we'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>
```


</details>

</TabItem>
<TabItem label="Umfrage">

Diese Umfrage speichert die ausgewählte Trainingszeit als Tag, sendet ein `schedule_survey_completed`-Event, zeigt eine Dankesnachricht an und schließt dann die In-App.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-14.webp" alt="HTML-Umfrage im In-App-Editor, die fragt, wann der Benutzer am liebsten trainiert, mit vier Zeitoptionen" width="360"/>

<details>
<summary>HTML-Code</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>
```


</details>

</TabItem>
<TabItem label="Video">

Dieses Beispiel bettet ein YouTube-Video in die In-App-Nachricht ein.

<details>
<summary>HTML-Code</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>
```


</details>

</TabItem>
</Tabs>



### Menü

Der **Menü**-Block platziert mehrere klickbare Elemente in einer Reihe oder Spalte. Verwenden Sie ihn für eine Navigationsleiste oder eine Liste von Unternehmenskontakten.

Für jedes Menüelement legen Sie fest:

* **Beschriftung:** der Text, den die Benutzer sehen
* **URL:** wohin das Element führt
* **Ziel:** gleicher Tab oder ein neuer Tab

In den Blockeinstellungen können Sie auch Folgendes festlegen:

* **Richtung:** Horizontal oder Vertikal
* **Ausrichtung:** Links, Zentriert oder Rechts
* **Trennzeichen:** ein optionales Trennzeichen zwischen den Elementen
* Schriftart, Größe, Gewicht, Buchstabenabstand und Link-/Textfarben

### Soziale Netzwerke

Der **Social**-Block zeigt eine Reihe von Social-Media-Symbolen an, die auf Ihre Profile verlinken. Verwenden Sie ihn, um Benutzer von der In-App-Nachricht aus zu Facebook, Instagram, X und anderen Plattformen zu leiten.

Fügen Sie Plattform-Einträge hinzu und legen Sie dann die Ausrichtung, die Symbolgröße und den Abstand zwischen den Symbolen fest.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-15.webp" alt="Einstellungen des Social-Blocks mit TikTok-, Instagram- und Facebook-Links sowie Ausrichtung, Symbolgröße und Abstand" width="320"/>

### Countdown-Timer

Der **Timer**-Block ist ein Countdown in der In-App-Nachricht. Verwenden Sie ihn für zeitlich begrenzte Angebote, Blitzverkäufe und Event-Erinnerungen.

So richten Sie ihn ein:

1. Legen Sie unter **Countdown** das **Enddatum** und die **Endzeit** fest, und wählen Sie dann die **Zeitzone** und die **Sprache** für die Timer-Beschriftungen.
2. Schalten Sie **Beschriftungen** ein, um "Tage / Stunden / Minuten / Sekunden"-Untertitel unter den Ziffern anzuzeigen, oder aus für nur Zahlen.
3. Legen Sie unter **Erscheinungsbild** den **Hintergrund**, die **Ziffernfarbe**, die **Beschriftungsfarbe** und die Schriftgröße für Ziffern (Standard 40px) und Beschriftungen (Standard 16px) fest.
4. Passen Sie den **Abstand** (Innenabstand) nach Bedarf an.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-16.webp" alt="Einstellungen des Timer-Blocks mit Enddatum und -uhrzeit des Countdowns, Beschriftungen, Erscheinungsbild und Abstandsoptionen"/>

### Spalten

**Spalten** teilen den Canvas in nebeneinander liegende Abschnitte auf, sodass Sie Inhalte in einer Reihe nebeneinander platzieren können.

Ziehen Sie einen dieser Blöcke auf den Canvas:

* **2 Spalten:** zwei gleich große Spalten
* **3 Spalten:** drei gleich große Spalten
* **4 Spalten:** vier gleich große Spalten
* **33 / 67:** linke Spalte etwa 33 % breit, rechte etwa 67 %
* **67 / 33:** linke Spalte etwa 67 % breit, rechte etwa 33 %

Fügen Sie dann Inhalte zu jeder Spalte hinzu. Um den Abstand für alle Spalten in der Vorlage zu ändern, öffnen Sie **Einstellungen** → **Spalten-Standardeinstellungen** und passen Sie den äußeren Abstand, den Spaltenabstand und den Abstand zwischen den Spalten an.

## Vorlagenweites Styling konfigurieren

Vorlageneinstellungen steuern das Styling für die gesamte In-App-Vorlage: Dokumentgröße und -hintergrund, Popup-Aussehen und Standardstile für Blöcke.

Öffnen Sie die Registerkarte **Einstellungen** im rechten Panel.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-17.webp" alt="Registerkarte 'Einstellungen' mit Abschnitten für Dokument, Popup und Standardstile für Blöcke und Spalten" width="320"/>

Verfügbare Abschnitte:

* **Dokument:** Größe und Aussehen des gesamten Nachrichtenbereichs: Breite, Innenabstand, Hintergrundfarbe oder -bild, Textfarbe, Schriftfamilie und der Abstand zwischen den Blöcken.
* **Popup:** wie die Nachricht auf dem abgedunkelten Hintergrund sitzt: Eckenradius sowie Overlay-Farbe und -Deckkraft.
* **Block-Standardeinstellungen:** gemeinsame Anfangsstile für Blöcke, die Sie später hinzufügen, damit neue Inhalte zur Vorlage passen, bis Sie einen Block auf dem Canvas überschreiben.
* **Spalten-Standardeinstellungen:** Abstand für jedes Spaltenlayout: äußerer Abstand, Abstand innerhalb jeder Spalte und der Abstand zwischen den Spalten.
* **Karten-Standardeinstellungen:** anfängliches Aussehen für Karten-Container, die Inhalte im Layout gruppieren, angewendet, bis Sie eine Karte individuell gestalten.
* **Schaltflächengruppen-Standardeinstellungen:** Abstand und Ausrichtung, wenn mehrere Schaltflächen als Gruppe zusammen sitzen.
* **Schaltflächen-Standardeinstellungen:** anfängliches Aussehen für neue Schaltflächen-Blöcke, damit CTAs in der gesamten Vorlage konsistent bleiben, bis Sie eine separat gestalten.
* **Trennlinien-Standardeinstellungen:** anfänglicher Linienstil, Farbe, Dicke und Breite für neue Trennlinien-Blöcke.

Standardeinstellungen gelten überall dort, wo ein einzelner Block sie nicht überschreibt.


<Aside type="note">
Es gibt keine Höheneinstellung. Das Popup wächst mit seinem Inhalt. Für eine Vollbildnachricht stellen Sie die **Breite** in den **Einstellungen** ein und wählen Sie **Vollbild** in den **In-App-Einstellungen**.
</Aside>

## Die Vorlage lokalisieren

Eine mehrsprachige Vorlage speichert lokalisierte Texte für jede Sprache in einem einzigen In-App-Design. Verwenden Sie den Sprachumschalter über dem Canvas, um Sprachen hinzuzufügen und Inhalte pro Sprache zu bearbeiten. Informationen zur Funktionsweise von mehrsprachigen Nachrichten über alle Kanäle hinweg finden Sie unter [Mehrsprachige Nachrichten](/de/product/personalization/multi-language/).

Inhalte, die Sie für die aktuelle Sprache noch nicht übersetzt haben, werden abgedunkelt angezeigt. Beginnen Sie zu tippen, um die Übersetzung zu erstellen. Die Standardsprache wird weiterhin angezeigt, bis Sie dies tun.

<Aside type="note">
Jeder Block, den Sie hinzufügen, erscheint mit demselben Inhalt für jede Sprache. Denken Sie daran, neuen Text und Schaltflächenbeschriftungen für jede Sprache zu übersetzen, die Sie in Ihrer Vorlage verwenden.
</Aside>

## Konfigurieren, wie die In-App auf dem Gerät aussieht

**In-App-Einstellungen** steuern, wie die Nachricht auf dem Gerät erscheint und sich verhält: Position, Animationen, Wischgesten und die Schließen-Schaltfläche. Diese Einstellungen gelten nur für iOS und Android Native.

Klicken Sie auf **In-App-Einstellungen** in der oberen Leiste:

* **Position auf dem Bildschirm:** Vollbild, Oben, Mitte oder Unten.
* **Präsentationsanimation** / **Schließanimation:** Keine, Einblenden, Links, Rechts, Oben oder Unten, oder Standard, um den SDK-Standard Ihrer App zu verwenden.

<Aside type="note">
**Keine** und **Einblenden** funktionieren derzeit auf Android. Auf iOS erscheint und verschwindet die Nachricht sofort (Ausrichtung kommt bald).
</Aside>

* **Animationsdauer (MS):** 100 bis 3000 Millisekunden. Lassen Sie das Feld leer, um das Standard-Timing des SDK zu verwenden.
* **Wischen zum Schließen:** aktivieren Sie eine beliebige Kombination aus Links, Rechts, Oben und Unten.
* **Schließen-Schaltfläche anzeigen:** schalten Sie das Schließen-Steuerelement ein oder aus. Wenn eingeschaltet, legen Sie **Position** (Oben rechts, Oben links, Unten rechts, Unten links), **Hintergrund** (eine Farbe oder **Transparent**) und **Symbolfarbe** fest. Im Gegensatz zu den anderen Einstellungen in diesem Modal wird das Aussehen der Schließen-Schaltfläche in die Nachricht selbst gerendert und auf jeder Plattform angezeigt, nicht nur auf iOS und Android Native.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-18.webp" alt="Modal 'In-App-Einstellungen' mit Optionen für Position, Animationen, Wischen zum Schließen und Schließen-Schaltfläche"/>

Klicken Sie auf **Anwenden**, um Ihre Auswahl zu speichern, oder auf **Abbrechen**, um sie zu verwerfen.

## Die Vorlage speichern

Klicken Sie auf **Speichern** in der oberen Leiste, um Ihre Änderungen zu speichern. Verwenden Sie **Rückgängig**/**Wiederholen** in der oberen Leiste, um durch Ihre Bearbeitungen vor- und zurückzugehen.

<Aside type="note">
Beim Speichern wird Ihre In-App-Vorlage unter **Inhalt** → **In-apps** gespeichert. Von dort aus können Sie Vorlagen in der Vorschau ansehen, bearbeiten und verwalten. [Mehr erfahren](/de/product/content/in-apps/#view-and-manage-your-in-app-content)
</Aside>

## Die gespeicherte Vorlage verwenden

Nachdem Sie eine In-App-Vorlage gespeichert haben, können Sie sie Benutzern in einer Customer Journey, als einmalige In-App oder wenn ein Benutzer auf eine Push-Benachrichtigung tippt, anzeigen.

* [Eine In-App als Teil einer Customer Journey anzeigen](/de/product/customer-journey/journey-elements/#in-app)
* [Eine Push-Benachrichtigung senden, die beim Anklicken eine In-App öffnet](/de/product/messaging-channels/push-notifications/send-push-notifications/one-time-push)
* [Eine einzelne In-App für Ihre Benutzer anzeigen](/de/product/messaging-channels/in-apps/)