Stileinstellungen für In-App-Nachrichten

Die Drag-and-Drop-Bearbeitungserfahrung ist in zwei Bereiche unterteilt: Build und Preview & Test. Dieser Artikel behandelt, was Sie für die Arbeit im Tab Build des Editors wissen müssen, und setzt voraus, dass Sie bereits eine In-App-Nachricht erstellt haben.

Stile auf Nachrichtenebene

Sie können bestimmte Stile festlegen, die auf alle relevanten Blöcke in Ihrer In-App-Nachricht angewendet werden, und zwar über den Tab Message Styles. Beispielsweise können Sie die Schriftart des gesamten Textes oder die Farbe aller Links in Ihrer Nachricht anpassen.

Die Stile in diesem Abschnitt werden überall in Ihrer Nachricht verwendet, es sei denn, Sie überschreiben sie für einen bestimmten Block. Wenn Ihre Nachricht mehrere Seiten hat, können Sie die Stile auf Nachrichtenebene auch für einzelne Seiten überschreiben, mit Ausnahme des Anzeigetyps und der maximalen Breite.

Für ein einfacheres Design-Erlebnis empfehlen wir, zuerst die Stile auf Nachrichtenebene einzurichten, bevor Sie Stile auf Blockebene anpassen.

Um jederzeit zum Tab Message Styles zurückzukehren:

• Klicken Sie auf die Schließen-X-Schaltfläche bei den individuellen Block-Eigenschaften
• Wählen Sie den Nachrichtencontainer, die Schließen-X-Schaltfläche der Nachricht oder den Editor-Hintergrund aus

Angepasste Schriftarten

Wir akzeptieren die folgenden Dateitypen für Schriftarten: .ttf, .woff, .otf und .woff2. Weitere Informationen finden Sie unter Asset-Dateien.

Sie können mehrere Variationen einer Schriftfamilie hinzufügen, da einige Stiloptionen für angepasste Schriftarten möglicherweise nicht verfügbar sind. Derzeit unterstützen wir das Hinzufügen von Schriftarten über eine URL nicht.

So fügen Sie eine angepasste Schriftart hinzu:

1. Gehen Sie zum Abschnitt Content im Tab Message styles.
2. Klicken Sie auf Add custom font.
3. Laden Sie Ihre Schriftart über die Mediathek hoch.

Hinweis

Die Schriftart auf Nachrichtenebene wird nur auf die aktuelle Nachricht und alle duplizierten Nachrichten angewendet, nicht jedoch auf zukünftige Templates.

Nachrichtenkomponenten

Der Drag-and-Drop-Editor verwendet zwei zentrale Komponenten für die Gestaltung von In-App-Nachrichten: Zeilen und Blöcke. Alle Blöcke müssen in einer Zeile platziert werden.

Schließen-X-Button

Für modale und Vollbild-In-App-Nachrichten können Sie den Schließen-Button anpassen, der als oben in Ihrer Nachricht angezeigt wird. Zu den Anpassungsoptionen gehören die Position des Buttons, Größe, Füllfarbe, Hintergrundfarbe, Rahmenstil und Rahmenradius.

Span-Styling

Das Hinzufügen von Span-Styling zu Text in In-App-Nachrichten ermöglicht eine erweiterte Anpassung des Nachrichtendesigns, einschließlich der Verwendung verschiedener Textfarben, Schriftarten und Größen. Span-Styling bietet Ihren Nutzer:innen ein ansprechenderes und optisch attraktiveres Erlebnis, indem es die Aufmerksamkeit auf wichtige Informationen lenkt und die Klarheit der Nachricht insgesamt verbessert.

Zeilen

Zeilen sind strukturelle Einheiten, die die horizontale Zusammensetzung eines Nachrichtenabschnitts mithilfe von Zellen definieren.

Wenn eine Zeile ausgewählt ist, können Sie im Abschnitt Spaltenanpassung die Anzahl der benötigten Spalten hinzufügen oder entfernen, um verschiedene Inhaltselemente nebeneinander zu platzieren.

Sie können auch die Größe vorhandener Spalten per Schieberegler anpassen.

Als Best Practice sollten Sie die Zeilen- und Spalteneigenschaften formatieren, bevor Sie die Blöcke innerhalb der Zeilen bearbeiten. Es gibt viele Stellen, an denen Sie Abstände und Ausrichtung anpassen können. Wenn Sie beim Fundament beginnen, wird die Bearbeitung im weiteren Verlauf einfacher.

Hintergrundbild

Sie können einer Zeile im Panel Zeileneigenschaften ein Hintergrundbild hinzufügen. Aktivieren Sie Hintergrundbild und geben Sie dann eine Bild-URL ein oder wählen Sie ein Bild aus der Medienbibliothek. Konfigurieren Sie anschließend den Alternativtext, die Größe, die Position und ob das Bild wiederholt werden soll, um Muster über die gesamte Zeile zu erzeugen.

Blöcke

Blöcke stellen verschiedene Inhaltstypen dar, die Sie in Ihrer Nachricht verwenden können. Ziehen Sie einen Block in ein vorhandenes Zeilensegment, und er passt sich automatisch an die Zellenbreite an.

Tipp

Bevor Sie Blöcke hinzufügen, richten Sie Stile auf Nachrichtenebene für den Nachrichtencontainer, die Schriftart, Farben und alles andere ein, was Sie anpassen möchten. Anschließend können Sie einzelne Blöcke nach Bedarf anpassen. Der Schließen-Button bleibt im oberen Bereich Ihrer Nachricht, damit Nutzer:innen jederzeit die Möglichkeit haben, die Nachricht zu schließen.

Jeder Block verfügt über eigene Einstellungen, wie z. B. eine detaillierte Steuerung des Paddings. Das rechte Panel wechselt automatisch zu einem Styling-Panel für das ausgewählte Inhaltselement. Weitere Informationen finden Sie unter Editor-Block-Eigenschaften.

Beim Erstellen Ihrer In-App-Nachricht können Sie in der Symbolleiste zwischen einer Mobil-, Tablet- oder Desktop-Ansicht wechseln, um eine Vorschau davon zu erhalten, wie Ihre In-App-Nachricht bei Ihren Nutzergruppen aussieht. So stellen Sie sicher, dass Ihr Inhalt responsiv ist, und können unterwegs alle notwendigen Anpassungen vornehmen.

Kreative Details

Vollbild auf größeren Bildschirmen

Auf einem Tablet oder Desktop-Browser wird eine Vollbild-In-App-Nachricht in der Mitte des App-Bildschirms angezeigt. Alle Änderungen an der maximalen Breite der Vollbild-Nachricht gelten nur für Tablet- und Desktop-Geräte.

Hintergrundbild hinzufügen

Sie können über den Tab Nachrichtenstile ein Bild zum Hintergrund Ihrer Nachricht hinzufügen.

1. Wählen Sie im Canvas-Bereich den Hintergrund-Container aus. Dies ist der scrollbare Bereich Ihrer Nachricht.
2. Aktivieren Sie im Tab Nachrichtenstile die Option Hintergrundbild.
3. Fügen Sie ein Bild aus Ihrer Medienbibliothek hinzu oder geben Sie die URL ein, unter der Ihr Bild gehostet wird.

Tipp

Wenn Sie Schwierigkeiten haben, einen bestimmten Block auszuwählen, können Sie den Aufwärtspfeil in der Inline-Symbolleiste des Blocks verwenden, um den Fokus auf den jeweils übergeordneten Block zu verschieben.

Hintergrundbilder mit Liquid dynamisch austauschen

Um Hintergrundbilder dynamisch basierend auf Nutzerdaten (wie angepasste Attribute oder Nutzereigenschaften) auszutauschen, verwenden Sie Liquid-{% capture %}-Blöcke, um die richtige Bild-URL einer Variablen zuzuweisen, bevor HTML und CSS geladen werden.

Platzieren Sie Ihre Liquid-Logik am Anfang Ihrer Nachricht und referenzieren Sie dann die erfasste Variable im URL-Feld für das Hintergrundbild. Dadurch wird das richtige Bild basierend auf den Daten der einzelnen Nutzer:innen ausgewählt.

Nachdem Sie die Bild-URL erfasst haben, verwenden Sie {{ image_url | strip }}, um die URL ohne zusätzliche Leerzeichen auszugeben. Sie können diesen Liquid-Code dann in das URL-Feld für das Hintergrundbild einfügen, um verschiedenen Nutzer:innen dynamisch unterschiedliche Bilder anzuzeigen.

Beispiel

1
2
3
4
5
6
7
8
9
10
{% capture image_url %}
{% if {{custom_attribute.${membership_tier}}} == 'gold' %}
https://example.com/images/gold-background.png
{% elsif {{custom_attribute.${membership_tier}}} == 'silver' %}
https://example.com/images/silver-background.png
{% else %}
https://example.com/images/default-background.png
{% endif %}
{% endcapture %}
{{ image_url | strip }}

Liquid hinzufügen

Um Liquid in Ihre In-App-Nachricht einzufügen, wählen Sie Personalisierung hinzufügen in der Editor-Symbolleiste. Hier können Sie verschiedene Personalisierungstypen wie Standardattribute, Geräteattribute, angepasste Attribute und mehr hinzufügen.

Nehmen Sie anschließend Ihr generiertes Liquid-Snippet und fügen Sie es in Ihre Nachricht ein. Nachdem Sie Ihre In-App-Nachricht gestaltet und erstellt haben, gehen Sie zu Vorschau & Test, um Ihre Nachricht in der Vorschau anzuzeigen.

Den KI-Texter verwenden

Wenn ein Textblock in Ihrer In-App-Nachricht ausgewählt ist, wählen Sie KI-Texter in der Block-Symbolleiste, um den KI-gestützten Textassistenten zu starten. Der KI-Textassistent übergibt einen kurzen Produktnamen oder eine Beschreibung an das GPT3-Textgenerierungstool von OpenAI, um menschenähnliche Marketing-Texte für Ihre Nachrichten zu erstellen.

Tipp

Sie können sich ein paar Klicks sparen, indem Sie den Text innerhalb des Blocks markieren, bevor Sie auf das Symbol klicken. Der markierte Text wird dem Tool hinzugefügt, und der Text wird sofort generiert.

Stile auf Standard zurücksetzen

Eigenschaften, die Sie gegenüber der Standardformatierung geändert haben, sind mit einem orangefarbenen Punkt gekennzeichnet. Um eine bestimmte Eigenschaft auf ihren Standardstil zurückzusetzen, bewegen Sie den Mauszeiger über das Feld und wählen Sie Auf Standard zurücksetzen.

Sie können auch alle Formatierungen für ein ausgewähltes Element zurücksetzen, indem Sie neben dem Namen des Eigenschaftspanels auswählen und Auf Standardstile zurücksetzen wählen.

Stile kopieren und einfügen

Nachdem Sie Änderungen an der Formatierung eines Elements vorgenommen haben, können Sie diese Stile kopieren und auf ein anderes Element anwenden. Beim Einfügen von Stilen werden nur die für das jeweilige Element relevanten Eigenschaften übernommen.

1. Wählen Sie bei ausgewähltem Element Stile kopieren oder einfügen neben dem Namen des Eigenschaftspanels (wenn Sie beispielsweise einen Button ausgewählt haben, neben „Button-Eigenschaften“).
2. Klicken Sie auf Stile kopieren und wählen Sie das Element aus, auf das Sie den kopierten Stil anwenden möchten.
3. Wählen Sie erneut Stile kopieren oder einfügen und wählen Sie Stile einfügen.

Tastenkombinationen

Sie können auch Tastenkombinationen verwenden, um Stile zu kopieren und einzufügen: