Eine E-Mail mit Drag-and-Drop erstellen

Mit dem Drag-and-Drop-Editor können Sie vollständig angepasste und personalisierte E-Mail-Nachrichten für Campaigns oder Canvases erstellen – ganz ohne HTML für den E-Mail-Body verwenden zu müssen.

Über den Editor

Der Drag-and-Drop-Editor verwendet Inhalt und Zeilen als die beiden zentralen Komponenten. So vereinfachen Sie Ihren Workflow, ohne zusätzlich HTML einsetzen zu müssen.

Inhalt

Inhalt umfasst eine Reihe von Kacheln, die verschiedene Arten von Inhalten darstellen, die Sie in Ihrer Nachricht verwenden können. Diese sind in drei Kategorien unterteilt: Grundlagen, Medien und Erweitert.

• grundlagen
• medien
• erweitert

Zeilen

Zeilen sind strukturelle Einheiten, die mithilfe von Spalten die horizontale Aufteilung eines Abschnitts der Nachricht festlegen. Sie können entweder leere Zeilen oder Content Blocks verwenden. Wenn Sie mehr als eine Spalte nutzen, können Sie verschiedene Inhaltselemente nebeneinander platzieren. So fügen Sie Ihrer Nachricht alle benötigten Strukturelemente hinzu – unabhängig davon, welches Template Sie zu Beginn ausgewählt haben.

Bilder in Textblöcke einbetten

Im Drag-and-Drop-Editor können Sie kein Bild in einen Absatz oder einen anderen Textblock einbetten. Um ein Bild neben oder innerhalb eines Textlayouts zu platzieren, verwenden Sie Spalten in einer Zeile: zum Beispiel eine mehrspaltige Zeile für den Desktop mit der Option Auf Mobilgeräten ausblenden für diese Zeile sowie eine separate Zeile nur für Mobilgeräte (bei Bedarf mit Auf Desktop ausblenden und Auf Mobilgeräten nicht stapeln), damit Bild und Text auch auf kleinen Bildschirmen sauber ausgerichtet sind.

Kartenstil

Kartenstil ist eine Zeileneigenschaft, mit der Sie Abstände zwischen Spalten hinzufügen und deren Ecken abrunden können. Mit der Formatierung im Kartenstil erstellen Sie ansprechendere Layouts, die Ihre wichtigsten Inhalte hervorheben, etwa neue Produkt-Features, Erfahrungsberichte, Sonderangebote, Neuigkeiten und mehr.

Den Drag-and-Drop-Editor verwenden

Sie sind sich nicht sicher, ob Ihre E-Mail über eine Campaign oder einen Canvas gesendet werden soll? Campaigns eignen sich besser für einzelne, gezielte Messaging-Kampagnen, während Canvases besser für mehrstufige User-Journeys geeignet sind.

Hinweis

Sie können eine Drag-and-Drop-E-Mail aus einer Campaign oder einem Canvas nicht direkt unter Templates > E-Mail-Templates als E-Mail-Template speichern. Erstellen Sie das Template zuerst unter Templates oder lesen Sie Kann ich meine Drag-and-Drop-E-Mail als Template speichern, nachdem ich sie in meiner Campaign oder meinem Canvas erstellt habe?, um zu erfahren, wie Sie ein Drag-and-Drop-Template neu erstellen oder HTML mit Datei herunterladen exportieren.

Nachdem Sie ausgewählt haben, wo Sie Ihre Nachricht erstellen möchten, führen Sie die folgenden Schritte aus, um eine Drag-and-Drop-E-Mail zu erstellen.

Schritt 1: Template auswählen

Nachdem Sie den Drag-and-Drop-Editor als Bearbeitungsmodus ausgewählt haben, haben Sie folgende Möglichkeiten:

• Mit einem leeren Template beginnen.
• Ein vorgefertigtes Drag-and-Drop-E-Mail-Template von Braze verwenden.
• Ein gespeichertes Drag-and-Drop-E-Mail-Template verwenden.

Hinweis

Um ein vorhandenes angepasstes HTML-Template oder Templates von Drittanbietern zu verwenden, müssen Sie das Template neu erstellen. Gehen Sie dazu zu Inhalt > E-Mail und wählen Sie Drag-and-Drop-Editor als Bearbeitungsmodus aus.

Sie können auch über den Bereich Templates auf alle Templates zugreifen.

Nachdem Sie Ihr Template ausgewählt haben, sehen Sie unter E-Mail-Varianten eine Übersicht Ihrer E-Mail, die die Versandinformationen und den E-Mail-Text enthält.

Wählen Sie dann E-Mail-Text bearbeiten, um mit der Gestaltung der E-Mail-Struktur im Drag-and-Drop-Editor zu beginnen.

Schritt 2: E-Mail erstellen

Der Drag-and-Drop-Editor ist in drei Bereiche unterteilt: Sendeeinstellungen, Inhalt und Vorschau und Test. Die eigentliche Gestaltung Ihres E-Mail-Texts findet im Bereich Inhalt statt. Bevor Sie Ihre E-Mail erstellen, ist es wichtig, die wichtigsten Komponenten zu kennen, die Sie beim Erstellen Ihrer E-Mail unterstützen. Wenn Sie diese noch einmal nachlesen möchten, lesen Sie Über den Editor.

Wenn Sie bereit sind, verwenden Sie die Drag-and-Drop-Content-Blöcke, um Ihre E-Mail zu erstellen.

1. Wählen Sie das Panel Zeilen aus. Ziehen Sie die Zeilenkonfigurationen per Drag-and-Drop in den Haupteditor. So legen Sie das Layout Ihres E-Mail-Inhalts fest.
   • Beachten Sie, dass neue Konfigurationen an den oberen oder unteren Rand eines bestehenden Abschnitts gezogen werden müssen.
   • Wenn Sie eine Zeilenkonfiguration auswählen, werden die Einstellungen unter Zeileneigenschaften angezeigt, mit denen Sie Hintergrundfarben, Bilder und angepasste Spaltengrößen der Zeile weiter anpassen können.
2. Wählen Sie das Panel Inhalt aus. Ziehen Sie die gewünschten Inhaltskacheln per Drag-and-Drop in die Zeilenkomponenten.
   • Sie können auch beliebige Kacheln aus Inhalt in den Haupteditor ziehen. Dadurch wird eine Zeile für die Kachel erstellt.
   • Sie können die Kachel weiter verfeinern, indem Sie sie auswählen und die Felder unter Inhaltseigenschaften und Blockoptionen anpassen. Dazu gehören unter anderem Zeichenabstand, Padding und Zeilenhöhe.

Unter Weitere Anpassungen finden Sie weitere Möglichkeiten, Ihre Drag-and-Drop-E-Mail anzupassen.

Während Sie Ihre E-Mail erstellen, können Sie zwischen Desktop- und Mobilansicht umschalten, um in der Vorschau zu sehen, wie Ihre E-Mail für Ihre Nutzergruppen aussehen wird. So können Sie prüfen, ob Ihr Inhalt responsiv ist, und nötige Anpassungen direkt vornehmen.

Tipp

Sie brauchen Hilfe beim Erstellen großartiger Texte? Probieren Sie den KI-Texterassistenten aus. Geben Sie einen Produktnamen oder eine Beschreibung ein, und die KI generiert menschlich klingende Marketingtexte für Ihr Messaging.

Schritt 3: Versandinformationen hinzufügen

Sobald Sie Ihre E-Mail fertig gestaltet und erstellt haben, fügen Sie im Bereich Sendeeinstellungen Ihre Versandinformationen hinzu.

1. Wählen Sie unter Sending Info eine E-Mail als From Display Name + Address aus. Sie können dies auch anpassen, indem Sie Customize From Display Name + Address auswählen.
2. Wählen Sie eine E-Mail als Reply-To Address aus. Sie können dies auch anpassen, indem Sie Customize Reply-To Address auswählen.
3. Wählen Sie als Nächstes eine E-Mail als BCC Address aus, um Ihre E-Mail für diese Adresse sichtbar zu machen.
4. Fügen Sie Ihrer E-Mail eine Betreffzeile hinzu. Optional können Sie auch einen Preheader hinzufügen. Um nach dem Preheader Leerraum einzufügen, aktivieren Sie das Kontrollkästchen Add whitespace after preheader.

Tipp

Sie können Liquid in den Feldern From Display Name + Address und Reply-To Address verwenden, um diese basierend auf angepassten Attributen dynamisch zu gestalten. So können Sie mit einer einzigen E-Mail-Campaign oder einem einzigen Canvas-Schritt Nachrichten von verschiedenen Marken, Regionen oder Abteilungen versenden.

Im rechten Panel wird eine Vorschau mit den von Ihnen hinzugefügten Versandinformationen angezeigt. Diese Informationen können Sie auch unter Einstellungen > E-Mail-Einstellungen > Sendekonfiguration aktualisieren.

E-Mail-Anhänge hinzufügen

Unter Sendeeinstellungen > Erweitert können Sie E-Mail-Anhänge auf folgende Weise hinzufügen:

• Datei hochladen: Ziehen Sie eine Datei per Drag-and-Drop oder durchsuchen Sie Ihren Computer, um eine Datei direkt in die E-Mail hochzuladen. Braze überprüft den Dateityp und die Dateigröße (standardmäßig bis zu 2 MB) vor dem Hochladen. Anschließend werden diese Dateien in die Medienbibliothek hochgeladen. Dateien, die das Limit von 2 MB überschreiten, können nicht hochgeladen werden.
• Medienbibliothek verwenden: Durchsuchen und wählen Sie Assets aus, die bereits in der Medienbibliothek gespeichert sind. PDFs, Word-Dokumente, Excel-Dateien und PowerPoint-Präsentationen werden unterstützt.
• Von URL hinzufügen: Geben Sie eine URL ein, die auf die Datei verweist, und legen Sie einen Anzeigenamen für die Datei fest. Da Braze bei der E-Mail-Erstellung keine beliebigen URLs auf ihre Größe prüfen kann, wird die Dateigröße erst beim Versand überprüft.

Hinweis

Liquid wird im Feld Von URL hinzufügen nicht unterstützt.

Unter E-Mail-Richtlinien finden Sie konkrete Best Practices, die Sie berücksichtigen sollten.

E-Mail-Header personalisieren (fortgeschritten)

Unter Sendeeinstellungen können Sie E-Mail-Header und E-Mail-Extras personalisieren, um zusätzliche Daten an andere E-Mail-Anbieter zurückzusenden. Ein personalisierter E-Mail-Header, etwa mit dem Namen der Empfängerin oder des Empfängers, kann außerdem die Wahrscheinlichkeit erhöhen, dass Ihre E-Mail geöffnet wird.

Hinweis

Die erweiterten Funktionen werden im Campaign- oder Canvas-Editor angezeigt. Dort können Sie Ihre Inline-CSS-Einstellung ändern und Header- oder Extra-Schlüssel-Wert-Paare eingeben (sofern konfiguriert).

Schritt 4: E-Mail testen

Nachdem Sie Ihre Versandinformationen hinzugefügt haben, können Sie Ihre E-Mail endlich testen.

Tipp

Wenn die E-Mail im Editor anders aussieht als in der Vorschau oder im Testversand, prüfen Sie, ob alle Tags geschlossen sind, die Bildattribute Werte haben und die Hintergrundbilder an den Rändern nicht unscharf sind.

Gehen Sie zum Bereich Vorschau und Test. Hier können Sie eine Vorschau Ihrer E-Mail aus Sicht von Nutzer:innen anzeigen oder eine Testnachricht senden. Dieser Bereich enthält außerdem Inbox Vision. Damit können Sie prüfen, ob Ihre E-Mail auf verschiedenen Mobil- und Web-Clients korrekt dargestellt wird.

Tipp

Sie können auch den Schalter Dark-Mode-Vorschau im Vorschau-Panel verwenden, um Ihren E-Mail-Text im Dark Mode anzuzeigen und Ihre E-Mail bei Bedarf anzupassen.

Da Sie drei verschiedene Versionen derselben E-Mail sehen können – im eigentlichen Editor, in Inbox Vision und als echte Test-E-Mail –, ist es wichtig, die Details auf all Ihren Plattformen aufeinander abzustimmen.

Vorschau und Testversand

Auf dem Tab Vorschau als Nutzer:in können Sie die folgenden Nutzertypen auswählen, um eine Vorschau Ihrer Nachricht anzuzeigen.

• Zufällige:r Nutzer:in: Braze wählt zufällig eine:n Nutzer:in aus der Datenbank aus und zeigt die E-Mail basierend auf deren Attributen oder Event-Informationen in der Vorschau an.
• Nutzer:in auswählen: Sie können eine bestimmte Person anhand ihrer E-Mail-Adresse oder externen ID auswählen. Die E-Mail wird basierend auf den Attributen und Event-Informationen dieser Person in der Vorschau angezeigt.
• Angepasste:r Nutzer:in: Sie können eine:n Nutzer:in anpassen. Braze bietet Eingabefelder für alle verfügbaren Attribute und Events. Sie können beliebige Informationen eingeben, die Sie in der Vorschau-E-Mail sehen möchten.

Hinweis

Die zufällig ausgewählte Person ist möglicherweise nicht Teil Ihrer Segmentierungskriterien. Die Segmentierung wird erst danach ausgewählt, daher kennt Braze Ihre Zielgruppe zu diesem Zeitpunkt noch nicht.

Sie können auch Vorschau-Link kopieren auswählen, um einen teilbaren Vorschau-Link zu generieren und zu kopieren, der zeigt, wie die E-Mail für eine zufällig ausgewählte Person aussehen wird. Weitere Informationen finden Sie unter Teilbare Vorschau.

Inbox Vision verwenden

Mit Inbox Vision können Sie Ihre E-Mail-Kampagnen aus der Perspektive von E-Mail-Clients und Mobilgeräten betrachten. Um Ihre E-Mail mit Inbox Vision zu testen, wählen Sie im Bereich Vorschau und Test die Option Inbox Vision und anschließend Inbox Vision ausführen aus.

Es ist wichtig, auch die feineren Details Ihrer E-Mail zu testen und zu prüfen. Hintergrundbilder in E-Mails können beispielsweise manchmal weiße Linien oder Lücken zwischen Bildern verursachen, oder Clients wie Windows Outlook zeigen Hintergrundbilder möglicherweise gar nicht an. Mit Inbox Vision können Sie solche Unterschiede zwischen Clients erkennen. Legen Sie in diesem Fall eine Fallback-Hintergrundfarbe fest, damit diese Bilder wie erwartet dargestellt werden.

Weitere Informationen finden Sie unter Testnachrichten senden.

Nachdem Sie Ihre E-Mail mit dem Drag-and-Drop-Editor gestaltet und erstellt haben, fahren Sie mit dem Erstellen des restlichen Teils Ihrer Campaign oder Ihres Canvas fort.

Weitere Anpassungen

Während Sie Drag-and-Drop-E-Mails erstellen, können Sie den Inhalt jeder E-Mail mit einer Kombination dieser kreativen Details weiter anpassen. So wecken Sie die Aufmerksamkeit und das Interesse Ihrer Zielgruppe für Ihre Nachricht.

Tipp

Mit den globalen Stileinstellungen können Sie ein eigenes Theme für Ihren Drag-and-Drop-Editor erstellen.

Bilder mit automatischer Breite

Bilder, die Sie Ihrer E-Mail hinzufügen, werden automatisch auf Automatische Breite gesetzt. Um diese Einstellung zu ändern, deaktivieren Sie Automatische Breite und passen Sie den Prozentwert der Breite nach Bedarf an.

Farbebenen

Mit Farbebenen können Sie die Farbe des E-Mail-Hintergrunds, des Inhaltsbereichs und verschiedener Inhaltskomponenten ändern. Die Reihenfolge der Farben von vorne nach hinten lautet: Farbe der Inhaltskomponente, Hintergrundfarbe des Inhaltsbereichs und Hintergrundfarbe.

Padding für Inhalte

Um das Padding anzupassen, scrollen Sie nach unten zu Blockoptionen und wählen Sie Weitere Optionen. So können Sie das Padding genau abstimmen, damit Ihre E-Mail perfekt aussieht.

Hintergrund für Inhalte

Sie können Ihrer Zeilenkonfiguration ein Hintergrundbild hinzufügen und so mehr Design und visuelle Inhalte in Ihre E-Mail-Kampagne einbinden.

Sprachattribut

Sie können das Sprachattribut festlegen, indem Sie den Tab Einstellungen öffnen und die gewünschte Sprache auswählen. Wenn die Nachricht für Nutzer:innen mit dynamischen Sprachwerten gedacht ist, können Sie auch das Nutzerattribut {{${language}}} verwenden.

Personalisierung

Der Drag-and-Drop-E-Mail-Editor unterstützt grundlegendes Liquid. So fügen Sie Ihrer E-Mail Personalisierung hinzu:

1. Wählen Sie im Abschnitt Inhalt die Option Personalisierung.
2. Wählen Sie den Personalisierungstyp aus. Dazu gehören Standardattribute, Geräteattribute, angepasste Attribute und mehr.
3. Suchen Sie nach dem Attribut, das Sie hinzufügen möchten.
4. Kopieren Sie das generierte Liquid-Snippet und fügen Sie es in den Inhalt Ihrer E-Mail ein.

Liquid-Personalisierung wird für Bildblöcke und Felder vom Typ Button-Link nicht unterstützt.

Dynamische Bilder

Sie können dynamische Bilder in Ihre E-Mails einbinden, indem Sie Connected-Content oder Liquid im Quellattribut Ihres Bildes verwenden. Statt eines statischen Bildes können Sie zum Beispiel https://example.com/images/?imageBanner={{first_name}} als Bild-URL einfügen, um den Vornamen der Nutzer:innen in das Bild aufzunehmen. So personalisieren Sie Ihre E-Mails für alle Nutzer:innen.

Wichtig

Ihre Bild-URL muss mit https:// beginnen. Die Verwendung von http:// führt zum Absturz Ihrer App.

Textrichtung

Beim Verfassen Ihrer Nachricht können Sie die Textrichtung zwischen links-nach-rechts und rechts-nach-links umschalten, indem Sie den entsprechenden Button Textrichtung auswählen. Diese Option eignet sich zum Beispiel für Nachrichten in Sprachen wie Arabisch und Hebräisch.

Wie rechts-nach-links-Nachrichten letztendlich aussehen, hängt weitgehend davon ab, wie Dienstanbieter sie darstellen. Best Practices für rechts-nach-links-Nachrichten, die möglichst genau angezeigt werden, finden Sie unter Rechts-nach-links-Nachrichten erstellen.

HTML

HTML-Attribute für Links

Wenn Sie im Drag-and-Drop-Editor Links, Buttons, Bilder und Videos verwenden, wählen Sie im Abschnitt Inhalt unter Attribute die Option Neues Attribut hinzufügen, um HTML-Tags in E-Mails zusätzliche Informationen anzuhängen. Das ist besonders nützlich für Personalisierung, Segmentierung und Styling von Nachrichten.

Ein häufiger Anwendungsfall ist das Deaktivieren des Klick-Trackings für bestimmte Links beim Versand über Braze. Dafür gibt es zwei Möglichkeiten:

• Attribute des Link-Moduls verwenden: Wählen Sie ein Link-Element aus (etwa einen Button oder ein Link-Modul) und fügen Sie dann über Neues Attribut hinzufügen unter Attribute Folgendes hinzu:
  • Für SendGrid verwenden Sie clicktracking als Name und off als Wert.
  • Für SparkPost verwenden Sie data-msys-clicktrack als Name und 0 als Wert.
• HTML-Block verwenden: Fügen Sie einen HTML-Block ein und nehmen Sie das Klick-Tracking-Attribut direkt in den Code Ihres Anchor-Tags auf:
  • Für SendGrid verwenden Sie <a href="your-url" clicktracking="off">Link text</a>.
  • Für SparkPost verwenden Sie <a href="your-url" data-msys-clicktrack="0">Link text</a>.

Ein weiterer häufiger Anwendungsfall ist das Kennzeichnen bestimmter Links als Universal Links. Universal Links sind Links, die zu Ihrer App weiterleiten und Ihren Nutzer:innen so ein nahtloses Erlebnis bieten.

• SendGrid: universal = "true"
• SparkPost: data-msys-sublink = "open-in-app" (ein angepasster Sub-Pfad muss konfiguriert sein)

Informationen zum Einrichten von Universal Links finden Sie unter Universal Links und App Links.

Alternativ können Sie zur Verwaltung von Universal Links eine Integration mit einem unserer Attributionspartner nutzen, etwa Branch oder AppsFlyer.

Außerdem stehen vordefinierte Attribute zur Verfügung, mit denen Sie Ihre Nachricht barrierefrei gestalten können. Mehr dazu erfahren Sie in unserem Artikel Barrierefreie Nachrichten in Braze erstellen, unter anderem dazu, wie E-Mail-Clients Alt-Text anzeigen.

Angepasste Head-Tags

Verwenden Sie <head>-Tags, um CSS und Metadaten in Ihre E-Mail einzufügen. Mit diesen Tags können Sie zum Beispiel ein Stylesheet oder ein Favicon hinzufügen. Liquid wird in <head>-Tags unterstützt.

Alles, was außerhalb der <head>-Tags hinzugefügt wird, wird in Ihrer E-Mail nach dem <body>-Tag eingefügt. Das bedeutet, dass der hinzugefügte Inhalt in der E-Mail angezeigt wird.

Zulässige Tags und Attribute nach Tag

Hinweis

Link-Namen dürfen bis zu 63 Byte lang sein und werden automatisch gekürzt, wenn sie dieses Limit überschreiten.

Dynamische Schriftartauswahl

Wenn Sie zum Zeitpunkt des Versands für verschiedene Nutzer:innen unterschiedliche Schriftarten benötigen, können Sie die Textschriftart einer E-Mail mit Liquid dynamisch anhand von Nutzerattributen festlegen. Für eine einzige statische angepasste Schriftart über alle Nachrichten hinweg konfigurieren Sie stattdessen eine angepasste Schriftart in Ihren globalen Stileinstellungen.

Viele E-Mail-Clients wie Gmail entfernen angepasste Schriftarten und verwenden standardmäßig die Systemschriftart. Die dynamische Schriftartauswahl funktioniert nur in einigen E-Mail-Clients (etwa Apple Mail).

Wichtig

Wenn Sie dieses Muster im HTML-Editor wiederverwenden, deaktivieren Sie zuerst Inline-CSS aktivieren. Dieser Schalter ist für Drag-and-Drop-E-Mails nicht verfügbar, da CSS-Inlining dort bereits deaktiviert ist. Wenn das Inlining vor Liquid ausgeführt wird, können Bedingungen rund um einen <style>-Block fehlschlagen. Weitere Informationen finden Sie unter CSS-Inlining.

So richten Sie die dynamische Schriftartauswahl ein:

1. Öffnen Sie in den Versandeinstellungen den Abschnitt für angepasste Head-Tags und importieren Sie die angepasste Schriftart mit einem <link>-Tag, das auf die URL der Google Fonts API oder eine andere URL verweist, unter der die CSS-Datei der Schriftart gehostet wird.
2. Verwenden Sie eine Liquid-if-Anweisung, um das Nutzerattribut zu prüfen.
3. Fügen Sie ein <style>-Tag hinzu, das die Schriftart auf die Textelemente der E-Mail anwendet, wenn die Nutzer:innen die Liquid-Bedingung erfüllen:
   • Fügen Sie nach der angepassten Schriftart einen Fallback-Stack mit websicheren Schriftarten wie Arial hinzu.
   • Verwenden Sie !important, damit die angepasste Schriftart den Standard-Fallback Arial von Braze nur für die zutreffenden Selektoren überschreibt.

So ändern Sie beispielsweise die Schriftart, wenn das Sprachattribut der Nutzer:innen Japanisch ist:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
{% if ${language} == 'ja' %}
<style type="text/css">
  body,
  td,
  div,
  p,
  span,
  a,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Noto Sans JP", Arial, sans-serif !important;
  }
</style>
{% endif %}

Hinweis

Prüfen Sie das exportierte HTML Ihrer Nachricht, wenn ein Teil des Textes weiterhin die falsche Schriftart verwendet. Drag-and-Drop-E-Mails umschließen Text häufig mit td- und div-Elementen, die eine kürzere Selektorliste möglicherweise nicht erfasst.