Skip to content

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 Schlüsselkomponenten, um Ihren Workflow zu vereinfachen – ohne zusätzliche Verwendung von HTML.

Inhalt- und Zeilen-Editor-Komponenten
Inhalt Zeilen
Der Tab 'Zeilen' mit verschiedenen strukturellen Kombinationen für Ihr E-Mail-Layout. Der Tab 'Inhalt' mit den Kategorien Basis, Medien und Erweitert.

Inhalt

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

Basis-Blöcke bilden das Fundament Ihrer E-Mail. Mit diesen Blöcken können Sie die folgenden Elemente in den Textkörper Ihrer E-Mail einfügen:

  • Titel
  • Absatz
  • Liste
  • Button
  • Trennlinie
  • Abstandshalter

Mit Medien-Blöcken können Sie verschiedene visuelle Inhalte hinzufügen, wie Bilder, Videos, Social-Media-Icons und -Links sowie anpassbare Icons.

Obwohl der Drag-and-Drop-Editor Ihren Workflow mit diesen Blöcken vereinfacht, können Sie auch erweiterte Blöcke verwenden, um HTML einzufügen oder ein Menü in den Textkörper Ihrer E-Mail einzubauen. Beachten Sie, dass die Verwendung von eigenem HTML die Darstellung der Nachricht beeinflussen kann.

Zeilen

Zeilen sind strukturelle Einheiten, die die horizontale Zusammensetzung eines Abschnitts der Nachricht mithilfe von Spalten definieren. Sie können entweder leere Zeilen oder Content Blocks verwenden. Durch die Verwendung von mehr als einer Spalte können Sie verschiedene Inhaltselemente nebeneinander platzieren. So können Sie alle benötigten strukturellen Elemente zu Ihrer Nachricht hinzufügen, unabhängig davon, welches Template Sie zu Beginn ausgewählt haben.

Bilder in Textblöcken verschachteln

Sie können im Drag-and-Drop-Editor kein Bild innerhalb eines Absatzes oder eines anderen Textblocks verschachteln. Um ein Bild neben oder innerhalb eines Textlayouts zu platzieren, verwenden Sie Spalten in einer Zeile: zum Beispiel eine mehrspaltige Zeile auf dem Desktop mit Auf Mobilgeräten ausblenden für diese Zeile und eine separate, nur für Mobilgeräte bestimmte Zeile (mit Auf Desktop ausblenden und Auf Mobilgeräten nicht stapeln nach Bedarf), damit Bild und Text auf kleinen Bildschirmen sauber ausgerichtet sind.

Cards-Stil

Cards-Stil ist eine Zeileneigenschaft, mit der Sie Abstände zwischen Spalten hinzufügen und deren Ecken abrunden können. Mit der Card-Stil-Formatierung können Sie visuell ansprechendere Layouts erstellen, um Ihre wichtigsten Inhalte hervorzuheben – wie neue Produkt-Features, Testimonials, Sonderangebote, Neuigkeiten und mehr.

Den Drag-and-Drop-Editor verwenden

Sie sind sich nicht sicher, ob Ihre E-Mail-Nachricht ü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.

Nachdem Sie ausgewählt haben, wo Sie Ihre Nachricht erstellen möchten, gehen wir die Schritte zum Erstellen einer Drag-and-Drop-E-Mail durch.

Schritt 1: Template auswählen

Nachdem Sie den Drag-and-Drop-Editor als Bearbeitungserfahrung ausgewählt haben, können Sie:

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

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

Nachdem Sie Ihr Template ausgewählt haben, sehen Sie eine Übersicht Ihrer E-Mail unter E-Mail-Varianten, 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.

Der Bereich „E-Mail-Varianten“ mit einem Beispiel-E-Mail-Text.

Schritt 2: E-Mail erstellen

Die Drag-and-Drop-Bearbeitungserfahrung ist in drei Bereiche unterteilt: Versandeinstellungen, Content und Vorschau und Test. Die eigentliche Gestaltung Ihres E-Mail-Textes findet im Bereich Content statt. Bevor Sie mit der Erstellung Ihrer E-Mail beginnen, ist es wichtig, die Schlüsselkomponenten zu verstehen, die Ihre E-Mail-Erstellung leiten. Falls Sie eine Auffrischung benötigen, 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. Ziehen Sie die Zeilenkonfigurationen per Drag-and-Drop in den Haupteditor. Dies legt das Layout Ihres E-Mail-Inhalts fest.
    • Beachten Sie, dass neue Konfigurationen an den Anfang oder das Ende eines bestehenden Abschnitts gezogen werden müssen.
    • Wenn Sie eine Zeilenkonfiguration auswählen, erscheinen die Einstellungen für Zeileneigenschaften zur weiteren Anpassung von Zeilen-Hintergrundfarben, Bildern und benutzerdefinierten Spaltengrößen.
  2. Wählen Sie das Panel Content. Ziehen Sie die gewünschten Content-Kacheln per Drag-and-Drop in die Zeilenkomponenten.
    • Sie können auch beliebige Content-Kacheln 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 Content-Eigenschaften und Block-Optionen anpassen. Dazu gehören die Bearbeitung von Zeichenabstand, Padding, Zeilenhöhe und mehr.

Weitere Möglichkeiten zur Anpassung Ihrer Drag-and-Drop-E-Mail finden Sie unter Weitere Anpassungen.

Während Sie Ihre E-Mail erstellen, können Sie zwischen einer Desktop- und einer Mobilansicht wechseln, um eine Vorschau zu sehen, wie Ihre E-Mail-Nachricht für Ihre Nutzergruppen aussehen wird. So können Sie überprüfen, ob Ihr Content responsiv ist, und unterwegs alle notwendigen Anpassungen vornehmen.

Schritt 3: Versandinformationen hinzufügen

Sobald Sie das Design und die Erstellung Ihrer E-Mail-Nachricht abgeschlossen haben, ist es an der Zeit, Ihre Versandinformationen im Bereich Versandeinstellungen hinzuzufügen.

  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.

Eine Vorschau im rechten Panel wird mit den von Ihnen hinzugefügten Versandinformationen befüllt. Diese Informationen können auch aktualisiert werden, indem Sie zu Einstellungen > E-Mail-Einstellungen > Versandkonfiguration navigieren.

E-Mail-Anhänge hinzufügen

Unter Versandeinstellungen > Erweitert können Sie E-Mail-Anhänge mit den folgenden Methoden 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.

Spezifische Best Practices finden Sie unter E-Mail-Richtlinien.

E-Mail-Header personalisieren (erweitert)

Unter Versandeinstellungen können Sie Personalisierung für E-Mail-Header und E-Mail-Extras hinzufügen, mit denen Sie zusätzliche Daten an andere E-Mail-Anbieter zurücksenden können. Die Personalisierung eines E-Mail-Headers, z. B. durch Einbeziehung des Namens der Empfängerin oder des Empfängers, kann auch dazu beitragen, die Wahrscheinlichkeit zu erhöhen, dass Ihre E-Mail geöffnet wird.

Schritt 4: E-Mail testen

Nachdem Sie Ihre Versandinformationen hinzugefügt haben, ist es an der Zeit, Ihre E-Mail zu testen.

Gehen Sie zum Bereich Vorschau und Test. Hier haben Sie die Möglichkeit, eine Vorschau Ihrer E-Mail als Nutzer:in anzuzeigen oder eine Testnachricht zu senden. Dieser Bereich enthält auch Inbox Vision, mit dem Sie überprüfen können, ob Ihre E-Mail in verschiedenen mobilen und Web-Clients korrekt gerendert wird.

Da Sie drei verschiedene Versionen derselben E-Mail im eigentlichen Editor, in Inbox Vision und als tatsächliche Test-E-Mail anzeigen können, ist es wichtig, die Details über alle Ihre Plattformen hinweg abzugleichen.

Vorschau und Testversand

Unter 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 eine Vorschau der E-Mail basierend auf deren Attributen oder Ereignisinformationen an.
  • Nutzer:in auswählen: Sie können eine:n bestimmte:n Nutzer:in anhand der E-Mail-Adresse oder externen ID auswählen. Die E-Mail-Vorschau basiert auf den Attributen und Ereignisinformationen dieser Person.
  • Benutzerdefinierte:r Nutzer:in: Sie können eine:n Nutzer:in anpassen. Braze bietet Eingabefelder für alle verfügbaren Attribute und Ereignisse. Sie können beliebige Informationen eingeben, die Sie in der Vorschau-E-Mail sehen möchten.

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:n zufällige:n Nutzer:in aussehen wird. Weitere Informationen finden Sie unter Teilbare Vorschau.

E-Mail-Vorschau mit einem Button zum Kopieren des Vorschau-Links und zum Kopieren des generierten Links.

Inbox Vision verwenden

Inbox Vision ermöglicht es Ihnen, Ihre E-Mail-Campaigns aus der Perspektive von E-Mail-Clients und mobilen Geräten anzuzeigen. Um Ihre E-Mail-Nachricht mit Inbox Vision zu testen, wählen Sie Inbox Vision im Bereich Vorschau und Test und dann Inbox Vision ausführen.

Es ist wichtig, die feineren Details Ihrer E-Mail-Nachricht zu testen und zu überprüfen. Beispielsweise können Hintergrundbilder in E-Mail-Nachrichten manchmal weiße Linien oder Unterbrechungen zwischen Bildern verursachen, oder Clients wie Windows Outlook zeigen möglicherweise keine Hintergrundbilder an. Die Verwendung von Inbox Vision kann helfen, diese Diskrepanzen zwischen Clients zu identifizieren. In diesem Szenario sollten Sie eine Fallback-Hintergrundfarbe festlegen, damit diese Bilder wie erwartet gerendert werden.

Weitere Informationen finden Sie unter Testnachrichten senden.

Nachdem Sie den Drag-and-Drop-Editor zum Gestalten und Erstellen Ihrer E-Mail-Nachricht verwendet haben, fahren Sie mit dem Erstellen des restlichen Teils Ihrer Campaign oder Ihres Canvas fort.

Über die aktualisierte HTML-Engine

Die zugrunde liegende Engine, die HTML aus dem Drag-and-Drop-Editor erzeugt, wurde optimiert und aktualisiert, was zu Vorteilen bei der HTML-Dateikomprimierung und dem Rendering führt.

Unser durchschnittlicher exportierter HTML-Daten-Footprint wurde reduziert, was zu schnellerem Laden und Rendering, weniger mobilem Clipping und geringerem Bandbreitenverbrauch führt.

Das HTML-Rendering wurde durch die folgenden Updates verbessert, die die Anzahl der bedingten Kommentare und CSS-Media-Queries minimieren. Dadurch sind HTML-Dateien kleiner und effizienter codiert.

  • Migration von einem <div>-Element-basierten Design zu einer standardmäßigen <table aria-label="Inbox Vision verwenden">-formatierten Codebasis Inbox Vision verwenden
  • Editor-Blöcke (E-Mail) wurden für Kompaktheit neu codiert
  • Der endgültige HTML-Code wird komprimiert, um Leerzeichen zwischen Tags zu entfernen
  • Transparente Trennlinien werden automatisch in Content-Padding umgewandelt

Weitere Anpassungen

Während Sie Ihre Drag-and-Drop-E-Mails weiter erstellen, können Sie jeden E-Mail-Body mithilfe einer Kombination dieser kreativen Details weiter anpassen, um die Aufmerksamkeit und das Interesse Ihrer Zielgruppe an Ihrer Nachricht zu wecken.

Automatische Breite für Bilder

Bilder, die zu Ihrer E-Mail hinzugefügt werden, werden automatisch auf Automatische Breite gesetzt. Um diese Einstellung anzupassen, deaktivieren Sie Automatische Breite und passen Sie den Breitenprozentsatz nach Bedarf an.

Option für automatische Breite im Tab „Inhalt“ des Drag-and-Drop-Editors.

Farbschichtung

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

Beispiel für die Farbschichtung im Drag-and-Drop-Editor.

Inhalts-Padding

Block-Optionen für den Drag-and-Drop-Editor.

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

Inhaltshintergrund

Sie können ein Hintergrundbild zu Ihrer Zeilenkonfiguration hinzufügen, um mehr Design und visuelle Inhalte in Ihre E-Mail-Kampagne einzubinden.

Sprachattribut

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

Festlegen des Werts „Sprache“ für eine E-Mail.

Personalisierung

Optionen zum Hinzufügen von Personalisierung im Drag-and-Drop-Editor.

Einfaches Liquid wird im Drag-and-Drop-E-Mail-Editor unterstützt. Um Personalisierung zu Ihrer E-Mail hinzuzufügen:

  1. Wählen Sie Personalisierung im Abschnitt Inhalt aus.
  2. Wählen Sie den Personalisierungstyp aus. Dazu gehören Standard-Attribute, Geräteattribute, angepasste Attribute und mehr.
  3. Suchen Sie nach dem hinzuzufügenden Attribut.
  4. Kopieren Sie Ihr generiertes Liquid-Snippet und fügen Sie es in Ihren E-Mail-Body ein.

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

Dynamische Bilder

Sie können dynamische Bilder in Ihre E-Mail-Nachrichten einbinden, indem Sie Connected Content oder Liquid in Ihrem Bildquellattribut verwenden. Anstelle eines statischen Bildes können Sie beispielsweise https://example.com/images/?imageBanner={{first_name}} als Bild-URL einfügen, um den Vornamen einer Nutzerin oder eines Nutzers in das Bild einzubinden. Dies hilft, Ihre E-Mails für jede:n Nutzer:in zu personalisieren.

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. Sie können diese Option verwenden, wenn Sie Nachrichten in Sprachen wie Arabisch und Hebräisch erstellen.

Menü des Drag-and-Drop-E-Mail-Editors mit Button zum Umschalten der Textausrichtung zwischen rechts-nach-links und links-nach-rechts.

Das endgültige Erscheinungsbild von Rechts-nach-links-Nachrichten hängt weitgehend davon ab, wie Dienstanbieter sie darstellen. Best Practices zum Erstellen von Rechts-nach-links-Nachrichten, die so genau wie möglich angezeigt werden, finden Sie unter Rechts-nach-links-Nachrichten erstellen.

HTML

Der Abschnitt „Attribute“ mit dem deaktivierten Attribut „clicktracking“ für einen Link.

Bei der Verwendung von Links, Buttons, Bildern und Videos im Drag-and-Drop-Editor wählen Sie Neues Attribut hinzufügen unter Attribute im Abschnitt Inhalt, um zusätzliche Informationen an HTML-Tags in E-Mails anzuhängen. Dies kann besonders nützlich für Nachrichtenpersonalisierung, Segmentierung und Styling sein.

Ein häufiger Anwendungsfall ist das Einfügen eines Attributs in Ihren Anchor-Tag, um das Klick-Tracking beim Versand über Braze zu deaktivieren.

  • SendGrid: clicktracking = "off"
  • SparkPost: data-msys-clicktrack = "0"

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 ein integriertes Erlebnis bieten.

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

Alternativ können Sie einen unserer Attributionspartner integrieren, wie z. B. Branch oder AppsFlyer, um Universal Links zu verwalten.

Schließlich stehen vordefinierte Attribute zur Verfügung, die Ihre Nachricht barrierefrei gestalten. Erfahren Sie mehr in unserem Artikel Barrierefreie Nachrichten in Braze erstellen, einschließlich wie E-Mail-Clients Alt-Text anzeigen.

Benutzerdefinierte Head-Tags

Verwenden Sie <head>-Tags, um CSS und Metadaten in Ihrer E-Mail-Nachricht hinzuzufügen. Sie können diese Tags beispielsweise verwenden, um ein Stylesheet oder ein Favicon hinzuzufügen. Liquid wird in <head>-Tags unterstützt.

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

Zulässige Tags und Attribute nach Tag
Tag-Name Beschreibung Beispiel
base Gibt die Basis-URL für alle relativen URLs in der Nachricht an. <base href="https://example.com" target="_blank">
link Definiert Beziehungen zwischen der Nachricht und externen Ressourcen. <link href="styles.css" rel="stylesheet" type="text/css">
meta Stellt Metadaten wie Seitenbeschreibung oder Schlüsselwörter bereit. <meta name="description" content="Free Web tutorials">
style Bettet interne CSS-Stile ein. <style type="text/css" media="screen">body { font-size: 16px; }</style>
title Legt den Titel des Dokuments fest, der in Browser-Tabs angezeigt wird. <title>StyleRyde</title>
Tag Attribut Beschreibung Beispiel
base href Basis-URL für relative URLs. <base href="https://braze.com">
base target Standard-Ziel für alle Hyperlinks und Formulare. <base target="_blank">
link href URL zur externen Ressource. <link href="style.css">
link rel Definiert Beziehungen zwischen der aktuellen und der verlinkten Nachricht. <link rel="stylesheet">
link type Typ der verlinkten Ressource. <link type="text/css">
link sizes Gibt die Größen von Icons an. <link rel="icon" sizes="32x32" href="favicon-32.png">
link media Gibt das Medium oder Gerät an, für das Stile gelten. <link rel="stylesheet" media="screen" href="style.css">
meta name Legt den Titel des Dokuments fest, der in Browser-Tabs angezeigt wird. <meta name="viewport" content="width=device-width, initial-scale=1">
meta content Legt den Titel des Dokuments fest, der in Browser-Tabs angezeigt wird. <meta name="description" content="Page about our newest products">
meta charset Deklariert die Zeichenkodierung. <meta charset="UTF-8">
meta property Legt den Titel des Dokuments fest, der in Browser-Tabs angezeigt wird. <meta property="og:title" content="Website title">
style type MIME-Typ des Stilinhalts. <style type="text/css">p { color: red; }</style>
style media Gibt das Medium oder Gerät an, für das Stile gelten. <style media="print">body { font-size: 12pt; }</style>
title Keine Attribute Das title-Tag akzeptiert keine Attribute. <title>Kitchenerie</title>
New Stuff!