Ein Rasterlayout ist eine gute Möglichkeit, Inhalte in deinem E-Mail-Design zu organisieren. Es hilft dabei, mehrere Informationen – wie Artikel, Ereignisse oder Beiträge – übersichtlich, strukturiert und visuell ansprechend zu präsentieren. Indem du die Inhalte in Zeilen und Spalten anordnest, machst du es deinen Leser:innen leichter, das Wichtigste zu lesen, zu vergleichen und sich damit zu beschäftigen.

Erstellen eines Rasterlayouts in einer E-Mail

🎥 Im folgenden Video erfährst du, wie du ein Raster-Layout im Drag-and-Drop-E-Mail-Editor erstellen kannst:

1. Erstelle oder öffne einen E-Mail-Entwurf im Drag-and-Drop-Editor.
2. Ziehe einen Inhaltsblock auf den Canvas und lege ihn dort ab. An dieser Stelle werden wir einen Bild-Inhaltsblock einfügen.
3. Klicke im Canvas auf den Bereich, der deinen Inhaltsblock enthält, um seine Einstellungen anzuzeigen.
4. Klicke auf dem Canvas auf das Plus-Symbol + neben deinem Inhaltsblock, um eine Spalte hinzuzufügen. Du kannst bis zu 5 Spalten hinzufügen. Hier wollen wir 3 Spalten anzeigen.
5. Ziehe unter jeden Inhaltsblock die anderen Inhaltsblöcke, die du hinzufügen möchtest, um ein Rasterlayout zu erstellen, und wiederhole das Muster. Achte darauf, dass du deine Inhaltsblöcke im selben Abschnitt ablegen kannst. Weitere Informationen findest du in unserem speziellen Artikel Unterschiede zwischen Abschnitten und Inhaltsblöcken.
6. Fülle deine Inhaltsblöcke mit den von dir benötigten Texten und Bildern aus. 

Herzlichen Glückwunsch! 🎉 Du hast erfolgreich ein Rasterlayout in deinem E-Mail-Design erstellt. 

Einfügen von Datenfeed-Variablen in ein Rasterlayout [Erweitert]

Um deine Datenfeed-Variablen in ein Rasterlayout einzufügen, musst du manuell Variablen einfügen. So kannst du den genauen Index jedes Elements angeben, das du anzeigen möchtest. Das bedeutet, dass du im Voraus entscheiden musst, welche Einträge aus deinem Feed angezeigt werden sollen.

Teil 1: Abrufen der Datenfeed-Variablen

Um genau zu wissen, welche Felder in deinem Datenfeed referenziert werden sollen, gehst du auf deine Datenfeeds-Seite und öffnest den Datenfeed, den du anzeigen möchtest. Dort kannst du dir die Struktur deines Feeds ansehen und die passenden Schlüssel für die Syntax deiner Variablen finden. 

Die Syntax zum manuellen Abrufen bestimmter Elemente aus deinem Datenfeed lautet: {{feed.feedalias.array.index.variable}} wobei: feedalias der exakte Aliasname deines Datenfeeds ist, der mit der Schreibweise und Groß- und Kleinschreibung auf der Datenfeeds-Seite übereinstimmt. array das Array ist, das die Werte für jedes Element enthält. index die Position des jeweiligen Elements ist, das du in deinem Datenfeed anzeigen möchtest (beginnend bei 0 für das erste Element). variable der spezifische Variablen- oder Feldname ist, den du anzeigen möchtest, z. B. name (Name), price (Preis), date (Datum).

Um beispielsweise den Namen des Yogakurses im Array following_classes im ersten Index anzuzeigen, würde deine Datenfeed-Variable lauten: 

{{feed.yoga_classes.following_classes.0.class_name}}

Teil 2: Erstellen und Befüllen deines Rasterlayouts mit Datenfeeds

1. Erstelle eine E-Mail mit einem Rasterlayout. Weitere Informationen darüber, wie du ein Rasterlayout erstellst, erhältst du in unserem Abschnitt Erstellen eines Rasterlayouts in einem E-Mail-Design.
2. Befülle deine Inhaltsblöcke mit Datenfeed-Variablen mit der Syntax aus Teil 1: Abrufen der Datenfeed-Variablen. Um zu erfahren, wie du Variablen in deine Inhaltsblöcke einfügen kannst, öffne das Untermenü des Inhaltsblocks, den du befüllen möchtest:
   🔠 Eine Variable als Text hinzufügen

   Füge eine Variable innerhalb eines Inhaltsblocks hinzu, die Text enthält, um bestimmte Details zu einem Artikel anzuzeigen, z. B. einen Namen, einen Ort oder ein Datum.

   1. Klicke auf einen Inhaltsblock, der Text enthält (Titel-, Text- oder Schaltflächen-Blöcke).
   2. Setze den Cursor an die Stelle, an der du eine Variable hinzufügen möchtest.
   3. Gib die Datenfeed-Variable ein, die dem Text entspricht, den du anzeigen möchtest. Um beispielsweise den Namen des Yogakurses des ersten Elements im Datenfeed anzuzeigen, würde die Variable in unserem Beispiel-Datenfeed wie folgt lauten: {{feed.yoga_classes.following_classes.0.class_name}}.
      
   4. Wiederhole die Schritte für jede Variable, die du als Text hinzufügen möchtest. Ersetze jeweils den Index, der dem Element deines Datenfeeds entspricht, das du anzeigen möchtest.

   🖼️ Eine Variable zu einem Bild hinzufügen

   Füge eine Variable zu einem Bild-Block hinzu, um das Bild anzuzeigen, das mit einem Element verbunden ist, z. B. ein Bild eines Ereignisses.

   1. Klicke auf einen Bild-Block.
   2. Gehe in der Seitenleiste auf Image settings (Bildeinstellungen).
   3. Gib im Feld Insert image from URL (Bild von URL einfügen) die Datenfeed-Variable ein, die dem Bild entspricht, das du anzeigen möchtest. In unserem Beispiel, um das Bild des ersten Elements im Datenfeed anzuzeigen, würde die Variable lauten: {{feed.yoga_classes.following_classes.0.imageurl}}.
      
      
   4. Wiederhole die Schritte für jede Variable, die du zu einem Bild hinzufügen möchtest. Ersetze jeweils den Index, der dem Element deines Datenfeeds entspricht, das du anzeigen möchtest.

   🔗 Eine Variable als Hyperlink zu einem Text hinzufügen

   Füge eine Variable als Hyperlink zu einem Text hinzu, um die Empfänger:innen zu der URL zu leiten, die mit einem Element verbunden ist, z. B. einem Anmeldeformular oder einer Seite mit einem Ereignisplan.

   1. Klicke auf einen Inhaltsblock, der Text enthält (Titel- oder Text-Blöcke).
   2. Markiere den Text, in den du den Link einfügen möchtest.
   3. Klicke auf das Symbol Add link (Link hinzufügen) 🔗 in der Formatierungsleiste.
   4. In das Feld Link target (Linkziel) gibst du die Datenfeed-Variable ein, die der URL entspricht, die du anzeigen möchtest. In unserem Beispiel würde die URL der Anmeldeseite für den Yogakurs für das erste Element des Datenfeeds angezeigt werden, wenn die Variable lauten würde: {{feed.yoga_classes.following_classes.0.url}}.
      
      
   5. Wiederhole die Schritte für jede Variable, die du als Hyperlink zu einem Text hinzufügen möchtest. Ersetze jeweils den Index, der dem Element deines Datenfeeds entspricht, das du anzeigen möchtest.

   🔗 Eine Variable als Hyperlink zu einem Bild hinzufügen

   Füge eine Variable als Hyperlink in ein Bild ein, um die Empfänger:innen zu der URL zu leiten, die mit einem Element verbunden ist, z. B. einer Seite eines Ereignisses.

   1. Klicke auf einen Bild-Block.
   2. Gehe in der Seitenleiste auf Link settings (Link-Einstellungen).
   3. In das Feld Link target (Linkziel) gibst du die Datenfeed-Variable ein, die der URL entspricht, die du anzeigen möchtest. In unserem Beispiel würde die URL der Anmeldeseite für den Yogakurs für das erste Element des Datenfeeds angezeigt werden, wenn die Variable lauten würde: {{feed.yoga_classes.following_classes.0.url}}.
      
      
   4. Wiederhole die Schritte für jede Variable, die du als Hyperlink zu einem Bild hinzufügen möchtest. Ersetze jeweils den Index, der dem Element deines Datenfeeds entspricht, das du anzeigen möchtest.

   🔗 Eine Variable als Hyperlink auf einer Schaltfläche hinzufügen

   Füge eine Variable als Hyperlink auf einer Schaltfläche hinzu, um die Empfänger:innen zu der mit einem Artikel verbundenen URL zu leiten, z. B. zu einer Produktseite.

   1. Klicke auf den Block Button (Schaltfläche).
   2. Gehe in der Seitenleiste auf Link settings (Link-Einstellungen).
   3. In das Feld Link target (Linkziel) gibst du die Datenfeed-Variable ein, die der URL entspricht, die du anzeigen möchtest. In unserem Beispiel würde die URL der Anmeldeseite für den Yogakurs für das erste Element des Datenfeeds angezeigt werden, wenn die Variable lauten würde: {{feed.yoga_classes.following_classes.0.url}}.
      
      
   4. Wiederhole die Schritte für jede Variable, die du als Hyperlink zu einer Schaltfläche hinzufügen möchtest. Ersetze jeweils den Index, der dem Element deines Datenfeeds entspricht, das du anzeigen möchtest.
3. Zeige deine E-Mail an und teste sie, um sicherzustellen, dass deine Datenfeed-Variablen richtig angezeigt werden. 

Herzlichen Glückwunsch! 🎉 Du hast erfolgreich ein Rasterlayout mit Datenfeed-Variablen erstellt. 

E-Mail-Template	E-Mail im Postfach des/der Empfänger:in

⏭️ Nächste Schritte 

• Personalisiere deine E-Mail-Inhalte mit Echtzeitdaten (Datenfeed)
• Personalisiere deine E-Mail-Betreffzeile und den Vorschautext mit Echtzeitdaten (Datenfeed)

🤔 Sie haben eine Frage?

Wenden Sie sich bei Fragen an unser Support-Team: Erstellen Sie einfach ein Ticket über Ihr Konto. Wenn Sie noch kein Konto haben, können Sie uns hier kontaktieren.

Wenn Sie Unterstützung bei einem Projekt mit Brevo suchen, können wir Sie mit der richtigen zertifizierten Brevo-Partneragentur verbinden.