Zum Inhalt springen

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 Inhalte und Zeilen als die beiden zentralen Komponenten, um Ihren Workflow zu vereinfachen – ganz ohne zusätzlichen Einsatz von HTML.

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

Inhalte

Inhalte umfassen 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 folgende Elemente in den E-Mail-Text einfügen:

  • Titel
  • Absatz
  • Liste
  • Button
  • Trennlinie
  • Abstandshalter
  • NPS-Umfrage

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

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

Zeilen

Zeilen sind strukturelle Einheiten, die die horizontale Zusammensetzung eines Nachrichtenabschnitts durch 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

Im Drag-and-Drop-Editor können Sie 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 für die Desktop-Ansicht mit Auf Mobilgeräten ausblenden für diese Zeile, und eine separate, nur für Mobilgeräte sichtbare Zeile (mit Auf dem Desktop ausblenden und Auf Mobilgeräten nicht stapeln nach Bedarf), damit Bild und Text auf kleinen Bildschirmen sauber ausgerichtet werden.

Cards-Style

Cards-Style ist eine Zeileneigenschaft, mit der Sie Abstände zwischen Spalten hinzufügen und deren Ecken abrunden können. Mit der Card-Style-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 Bearbeitungsmethode 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 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.

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

Schritt 2: E-Mail erstellen

Die Drag-and-Drop-Bearbeitungsoberfläche ist in drei Bereiche unterteilt: Versandeinstellungen, Content und Vorschau und Test. Die eigentliche Gestaltung Ihres E-Mail-Texts erfolgt im Bereich Content. Bevor Sie mit der Erstellung beginnen, ist es wichtig, die Schlüsselkomponenten zu verstehen, die Ihnen bei der E-Mail-Erstellung helfen. 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 Zeileneigenschaften zur weiteren Anpassung von Hintergrundfarben, Bildern und benutzerdefinierten Spaltenbreiten.
  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 direkt in den Haupteditor ziehen. Dadurch wird automatisch 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 Buchstabenabstand, 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 erhalten, wie Ihre E-Mail-Nachricht für Ihre Nutzergruppen aussehen wird. So können Sie sicherstellen, dass Ihr Content responsiv ist, und bei Bedarf Anpassungen vornehmen.

Schritt 3: Versandinformationen hinzufügen

Sobald Sie Ihre E-Mail-Nachricht fertig gestaltet und erstellt 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.

Im rechten Vorschaubereich werden die von Ihnen hinzugefügten Versandinformationen angezeigt. 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 in den E-Mail-Richtlinien.

E-Mail-Header personalisieren (erweitert)

Unter Versandeinstellungen können Sie E-Mail-Header und E-Mail-Extras personalisieren, mit denen Sie zusätzliche Daten an andere E-Mail-Anbieter zurücksenden können. Die Personalisierung eines E-Mail-Headers, z. B. durch die Angabe des Empfängernamens, kann ebenfalls 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 Zeit, Ihre E-Mail zu testen.

Navigieren 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 dargestellt wird.

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

Vorschau und Testversand

Unter dem Tab Als Nutzer:in anzeigen 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:dieses Nutzers:Nutzerin.
  • Benutzerdefinierte:r Nutzer:in: Sie können eine:n Nutzer:in individuell 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 Vorschaulink kopieren auswählen, um einen teilbaren Vorschaulink 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 Vorschaulinks und zum Kopieren des generierten Links.

Inbox Vision verwenden

Mit Inbox Vision können Sie Ihre E-Mail-Campaigns aus der Perspektive verschiedener E-Mail-Clients und mobiler Geräte betrachten. Um Ihre E-Mail-Nachricht mit Inbox Vision zu testen, wählen Sie Inbox Vision im Bereich Vorschau und Test und klicken Sie auf Inbox Vision ausführen.

Es ist wichtig, die feinen 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 Hintergrundbilder möglicherweise nicht an. Die Verwendung von Inbox Vision kann helfen, diese Abweichungen zwischen Clients zu identifizieren. In diesem Szenario sollten Sie eine Fallback-Hintergrundfarbe festlegen, damit diese Bilder wie erwartet dargestellt 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 Verbesserungen bei der HTML-Dateikomprimierung und dem Rendering führt.

Die durchschnittliche Größe der exportierten HTML-Daten wurde reduziert, was zu schnellerem Laden und Rendering, weniger Abschneidungen auf Mobilgeräten und geringerem Ressourcenverbrauch führt.

Das HTML-Rendering wurde durch die folgenden Aktualisierungen 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 finale HTML-Code wird komprimiert, um Leerzeichen zwischen Tags zu entfernen
  • Transparente Trennelemente werden automatisch in Content-Padding umgewandelt

Weitere Anpassungen

Beim weiteren Erstellen von Drag-and-Drop-E-Mails können Sie jeden E-Mail-Textkörper 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 Sie Ihrer E-Mail hinzufügen, 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 die automatische Breite im Tab „Content“ des Drag-and-Drop-Editors.

Farbschichtung

Mithilfe der Farbschichtung können Sie die Farbe des E-Mail-Hintergrunds, des Inhaltsbereichs und verschiedener Inhaltskomponenten ändern. Die Farbreihenfolge von vorne nach hinten ist: Komponentenfarbe, 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 Mehr Optionen. So können Sie Ihr Padding fein abstimmen, bis Ihre E-Mail genau richtig aussieht.

Inhaltshintergrund

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 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 „Language“ 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. So fügen Sie Ihrer E-Mail Personalisierung hinzu:

  1. Wählen Sie Personalisierung im Abschnitt Content 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 das generierte Liquid-Snippet und fügen Sie es in Ihren E-Mail-Textkörper ein.

Liquid-Personalisierung wird für Bildblöcke und Button-Link-Typfelder 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 zum Beispiel https://example.com/images/?imageBanner={{first_name}} als Bild-URL einfügen, um den Vornamen eines Nutzers bzw. einer Nutzerin in das Bild einzubinden. So personalisieren Sie Ihre E-Mails für jede:n einzelne:n Nutzer:in.

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 ist nützlich beim Erstellen von Nachrichten in Sprachen wie Arabisch und Hebräisch.

Menü des E-Mail-Drag-and-Drop-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 maßgeblich davon ab, wie Dienstanbieter sie darstellen. Best Practices zum Erstellen von Rechts-nach-links-Nachrichten, die möglichst genau 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 Content aus, 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 Deaktivieren des Klick-Trackings für bestimmte Links beim Versand über Braze. Sie können dies auf zwei Arten erreichen:

  • Link-Modul-Attribute verwenden: Wählen Sie ein Link-Element (z. B. einen Button oder ein Link-Modul) aus und verwenden Sie dann Neues Attribut hinzufügen unter Attribute, um Folgendes hinzuzufügen:
    • 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 integrieren Sie das Klick-Tracking-Attribut direkt in Ihren Anchor-Tag-Code:
    • 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 ein integriertes Erlebnis bieten.

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

Alternativ können Sie eine Integration mit einem unserer Attributionspartner wie Branch oder AppsFlyer nutzen, um Universal Links zu verwalten.

Abschließend stehen vordefinierte Attribute zur Verfügung, die dazu beitragen, Ihre Nachricht barrierefrei zu gestalten. Weitere Informationen finden Sie in unserem Artikel Barrierefreie Nachrichten in Braze erstellen, einschließlich Wie E-Mail-Clients Alternativtext 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 nutzen, 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, der hinzugefügte Inhalt wird in der E-Mail angezeigt.

Erlaubte Tags und Attribute nach Tag
Tag-Name Beschreibung Beispiel
base Legt die Basis-URL für alle relativen URLs in der Nachricht fest. <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 Standardziel 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 verknüpften Nachricht. <link rel="stylesheet">
link type Typ der verknüpften Ressource. <link type="text/css">
link sizes Gibt die Größen von Symbolen 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 Style-Inhalts. <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>
Dynamische Schriftauswahl

Wenn Sie zur Sendezeit eine andere Schriftart pro Nutzer:in benötigen, können Sie die Textschriftart für eine E-Mail mithilfe von Liquid basierend auf Nutzerattributen dynamisch festlegen. Für eine einzelne statische benutzerdefinierte Schriftart über alle Nachrichten hinweg konfigurieren Sie stattdessen eine benutzerdefinierte Schriftart in Ihren globalen Stileinstellungen.

Viele E-Mail-Clients wie Gmail entfernen benutzerdefinierte Schriftarten und verwenden stattdessen die Systemschrift. Die dynamische Schriftauswahl funktioniert nur in einigen E-Mail-Clients (z. B. Apple Mail).

So richten Sie die dynamische Schriftauswahl ein:

  1. Öffnen Sie unter Versandeinstellungen den Abschnitt für benutzerdefinierte Head-Tags und importieren Sie die benutzerdefinierte Schriftart mit einem <link>-Tag, das auf die Google-Fonts-API-URL oder eine andere URL verweist, die die CSS-Datei der Schriftart hostet.
  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 der/die Nutzer:in die Liquid-Bedingung erfüllt:
    • Fügen Sie einen Fallback-Stack mit websicheren Schriftarten wie Arial nach der benutzerdefinierten Schriftart ein.
    • Verwenden Sie !important, damit die benutzerdefinierte Schriftart das Standard-Arial-Fallback von Braze nur für übereinstimmende Selektoren überschreibt.

Um beispielsweise die Schriftart zu ändern, wenn das Sprachattribut eines Nutzers bzw. einer Nutzerin Japanisch ist:

<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 %}
New Stuff!