Anleitung für den E-Mail-Vorlagen-Editor

Übersicht

Lerne den Drag-and-Drop-Editor für E-Mail-Vorlagen von Klaviyo kennen und erfahre unter anderem, wie du Vorlagenstile verwenden und jeden Blocktyp konfigurieren kannst. 

Über Blöcke und Layouts 

Wenn du den Klaviyo E-Mail-Vorlagen-Editor öffnest, siehst du in der Seitenleiste eine Auswahl an Block- und Abschnittsoptionen, aus denen du wählen kannst. Wähle zwischen Basic-Blöcken, also leeren Vorlagen, mit denen du E-Mails von Grund auf neu erstellen kannst, und universellen Inhalten, also Inhalten, die du in anderen Vorlagen erstellt und zur späteren Verwendung gespeichert hast. 

Im Bereich Basic findest du eine Auswahl an Blöcken und Layouts. Verwende Blöcke, um Inhalte wie Text, Bilder oder Schaltflächen hinzuzufügen. Verwende Layouts (d. h. Abschnitte und Spalten), um deine Blöcke zu gruppieren und zu konfigurieren. 

Blöcke und Abschnitte können geklont, gelöscht oder gespeichert werden. Verwende dazu die Symbole, die erscheinen, wenn du die Maus über den Block oder Abschnitt bewegst. 

Um einen Block oder Abschnitt zu verschieben, klicke ihn an und ziehe ihn an die gewünschte Stelle. 

Vorlagenstile

Die Hauptregisterkarte „Stile“ enthält verschiedene Formatierungsoptionen, die auf deine gesamte Vorlage angewendet werden. Um auf die wichtigsten Stileinstellungen einer Vorlage zuzugreifen, navigiere mit der Schaltfläche Fertig aus allen Blöcken oder Abschnitten, in denen du arbeitest, und klicke dann auf Stile. 

Hier kannst du das Erscheinungsbild deiner E-Mail festlegen. Falls du den Einrichtungsassistenten durchlaufen hast, enthält dieser Bereich bereits einige deiner Markenstile.

Hier kannst du die folgenden Einstellungen bearbeiten:

• E-Mail 
  • Vorlagenhintergrund
    Wähle eine Hintergrundfarbe für deine Vorlage. 
  • Hintergrundbild
    Füge optional ein Hintergrundbild hinzu. 
  • Inhaltshintergrund
    Lege eine Hintergrundfarbe für den Inhalt deiner E-Mail fest. Diese Farbe kann sich vom Hintergrund der Vorlage unterscheiden und erstreckt sich nur über die Breite des Inhalts deiner E-Mail. 
  • Breite
    Dies ist die Breite deines E-Mail-Inhalts (600 Pixel empfohlen).
  • Eckradius, Außenabstand, Innenabstand und Rahmen
    Füge in deiner Vorlage Abstände und Rahmen hinzu. 
• Text und Überschriften
  Lege Stile für normalen Text und vier Überschriftenstile fest. Wähle dann einen Textstil aus dem Dropdown-Menü in einem beliebigen Textblock, um ihn anzuwenden. 
• Schriftart
  Wähle eine Schriftart sowie den Abstand, die Größe, die Stärke und die Farbe der Schrift für den Textstil aus. 
• Zeichenabstand
  Horizontaler Abstand zwischen den einzelnen Buchstaben 
• Zeilenabstand
  Vertikaler Abstand zwischen den Textzeilen
• Textausrichtung
  Wähle linksbündig, mittig oder rechtsbündig
• Mobilgeräte
  Wähle, ob du die Optimierung für Mobilgeräte aktivieren möchtest (empfohlen) oder ob du auf Desktop- und Mobilgeräten die gleichen Stile und Inhalte anzeigen möchtest. 
• Andere
  • Währung
    Wähle eine Standardwährung für die Vorlage, falls diese von deinen Kontoeinstellungen abweicht. 

So interagieren Vorlagenstile mit Block- und Abschnittsstilen

Als Erstes werden deine Einstellungen für Vorlagenstile auf deine Vorlage angewendet. Anschließend kommen die block- oder abschnittsspezifischen Einstellungen zur Anwendung. Wenn die Block- oder Abschnittsstile im Widerspruch zu deinen Vorlagenstilen stehen, werden die Block- und Abschnittsstile verwendet. Wenn du z. B. im Hauptabschnitt „Stile“ eine Hintergrundfarbe für den Inhalt festlegst und dann eine blockspezifische Hintergrundfarbe einstellst, wird diese Hintergrundfarbe für den Bereich des entsprechenden Blocks verwendet. 

Abschnitte und Abschnittsstile 

Der gesamte Inhalt des Vorlagen-Editors ist in Abschnitte unterteilt. Wenn du eine neue Vorlage erstellst, enthält diese standardmäßig einen oder mehrere Abschnitte, und du kannst nach Bedarf Abschnitte hinzufügen oder löschen. 

Um die Einstellungen eines Bereichs zu öffnen, klicke auf den Bereich rechts oder links neben dem Inhalt des Bereichs. Beachte, dass ein Klick auf einen Block die Einstellungen für diesen Block öffnet und nicht für den Abschnitt, der ihn enthält. 

Jeder Bereich hat eine Registerkarte „Stile“ und eine Registerkarte „Anzeigeoptionen“. Verwende die Stile des Abschnitts, um Hintergrundbilder, Abstand und andere Stile zu diesem Abschnitt hinzuzufügen. Verwende die Anzeigeoptionen des Abschnitts, um auszuwählen, welche Gerätetypen und Empfänger*innen die Abschnitte sehen sollen. 

Erfahre mehr über Abschnitte.

Die Einstellungen für den Abschnittsstil werden nach den Vorlagenstilen, aber vor den blockspezifischen Stilen auf deine Vorlage angewendet. Wenn die Vorlagenstile im Widerspruch zu deinen Abschnittsstilen stehen, wird der Abschnittsstil verwendet. Wenn die Einstellungen eines Blocks im Widerspruch zu deinen Abschnittsstilen stehen, wird der Blockstil verwendet. 

Blöcke und Blockstile

Füge innerhalb der Abschnitte Blöcke hinzu, um deine E-Mail mit Inhalten zu füllen. Die meisten Inhaltsblöcke verfügen über eine Registerkarte „Stile“, auf der du das Aussehen des Blocks konfigurieren kannst, und eine Registerkarte „Anzeigeoptionen“, auf der du festlegen kannst, wer den Block sehen soll und auf welchen Gerätetypen er angezeigt werden soll. Die spezifischen Stileinstellungen sind für jeden Blocktyp unterschiedlich, aber die gleichen Anzeigeoptionen sind für alle Blöcke verfügbar. 

Erfahre mehr über die Anzeigeoptionen oder lies weiter, um mehr über die Blocktypen und ihre Verwendung zu erfahren. 

Text 

Verwende einen Textblock, um Text zu deinen E-Mails hinzuzufügen. Wähle einen Textstil (Normal oder Überschrift 1 – 4), um die Stileinstellungen aus deiner Hauptvorlage zu übernehmen, oder passe den Textinhalt mit den Einstellungen des Text-Editors an. 

Der E-Mail-Editor von Klaviyo verwendet den Kodierungsstandard UTF-8, d. h. er unterstützt lateinische Zeichen, Emojis, Doppelbyte-Zeichen und mehr.  

Du kannst dynamische Inhalte zu deinem Textblock hinzufügen, um die Nachricht für alle Empfänger*innen zu personalisieren. Erfahre mehr über die Personalisierung von Nachrichten. 

<style type="text/css">
    p, h1, h2, h3, h4, ol, li, ul { direction: rtl; }
</style> 

Reduziere den Bereich Inhalt oder scrolle daran vorbei, um die Stile des Blocks anzupassen. Wähle eine Hintergrundfarbe für den Block oder den Textbereich und füge einen Innenabstand hinzu. 

Bild 

Verwende einen Bildblock, um ein Bild in deine E-Mail einzufügen. Du kannst Bilder aus den folgenden Quellen hinzufügen: 

• Bildbibliothek
  Füge ein Bild aus deiner Bildbibliothek hinzu, das du schon früher hochgeladen hast.
• Bild hochladen
  Lade ein JPEG, PNG oder GIF von deinem Gerät hoch. 
• Bild importieren
  Importiere ein Bild mithilfe seiner Bild-URL.
• Dynamisches Bild
  Zeige allen Empfänger*innen ein benutzerdefiniertes Bild an, indem du eine dynamische Bildvariable verwendest (z. B. indem du auf eine Bild-URL verweist, die in den Ereignisdaten der Empfänger*innen oder als Profileigenschaft gespeichert ist).

Wenn du dein Bild ausgewählt hast, solltest du die Bildeinstellungen anpassen. Gib dazu einen Alt-Text (eine Beschreibung des Bildes), die Linkadresse, damit das Bild anklickbar ist, die Bildbreite, die Ausrichtung und weitere Stile an. 

Split

Verwende einen per Split geteilten Block, um Inhalte in zwei Spalten beliebiger Breite anzuzeigen. Auf beiden Seiten eines geteilten Blocks muss entweder jeweils ein Bild oder Text angezeigt werden. Standardmäßig wird der Block im Verhältnis 50:50 geteilt. Navigiere zur Registerkarte Split-Einstellungen, um dieses Verhältnis anzupassen. Alternativ kannst du auch das Layout „Spalten“ verwenden, um deinen Inhalt in zwei oder mehr Spalten aufzuteilen. 

Schaltfläche 

Schaltflächenblöcke erstellen große Links, die auffälliger sind als normale Textlinks und sich hervorragend eignen, um wichtige Calls-to-Action (CTAs) hervorzuheben. Da sie für CTAs verwendet werden, solltest du in jeder E-Mail nur wenige davon verwenden.

Fülle mindestens die Felder Text und URL aus. Der Text ist das, was die Empfänger*innen auf der Schaltfläche sehen werden. Die URL ist die Adresse, zu der die Besucher*innen gelangen, wenn sie auf die Schaltfläche klicken. Passe das Aussehen, die Form und die Größe der Schaltfläche mit den Optionen Farbe, Eckradius und Innenabstand an. Du kannst auch die Schriftart des Blocks und andere Stile unten anpassen. 

Header-/Linkleiste 

Verwende den Header-/Linkleistenblock, um ein Logo und Navigationslinks hinzuzufügen, die zu verschiedenen Inhalten deiner Website weiterleiten.

Wenn du den Block hineinziehst, werden dir einige gängige Layouts für Header- oder Linkleisten angezeigt, aus denen du wählen kannst. Du kannst unterschiedliche Layouts für Desktop- und Mobilgeräte auswählen, um sie besser an die Größe der jeweiligen Geräte anzupassen. 

Füge der Linkleiste alle beliebigen Links hinzu. Du kannst die gerätespezifischen Anzeigeeinstellungen für jeden Link festlegen. Wir empfehlen, nur die wichtigsten Links auf mobilen Geräten anzuzeigen, da weniger Platz zur Verfügung steht. 

Wenn du deine Links und dein Logo hinzugefügt hast, kannst du mit den folgenden Stiloptionen für den letzten Schliff sorgen. Du kannst die Schriftart, die Farben und die Abstände im Block ändern. Überprüfe das Ergebnis in der Vorschau für Desktop- und Mobilgeräte. 

Schlagschatten

Verwende einen Schlagschatten, um deiner Botschaft mehr Tiefe zu verleihen oder einen bestimmten Bereich hervorzuheben. Zu den Farboptionen für den Schatten gehören hell, dunkel und dunkler. Zudem kannst du eine Hintergrundfarbe und Innenabstand für den Block festlegen. 

Trennlinie

Füge eine einfache Linie zwischen anderen Inhaltsblöcken ein. Dabei hast du die Wahl zwischen durchgezogenen, gestrichelten oder gepunkteten Linien. Die Farbe, Größe und der Innenabstand sind vollständig anpassbar. Früher hieß dies Horizontale Linie. 

Social-Media-Link 

Der Block für Social-Media-Links ist eine einfache Möglichkeit, Social-Media-Symbole für Instagram, Pinterest, Facebook, X (Twitter) und andere hinzuzufügen. Klaviyo bietet die standardmäßigen vollfarbigen Icons für eine Vielzahl von Websites sowie vereinfachte schwarze, weiße oder graue Optionen. 

Wenn du lieber eigene Social-Symbole verwenden möchtest, kannst du die benutzerdefinierte Option nutzen und deine eigenen Bilddateien hochladen. Wenn du dich für diesen Weg entscheidest, empfehlen wir dir, Bilder mit einer Größe von 96 Pixeln im Quadrat zu verwenden. Um den Abstand und die Ausrichtung zwischen den Social-Media-Symbolen von Klaviyo und deinen benutzerdefinierten Bildern beizubehalten, verwende Symbole mit einer Breite von 50 Pixeln, die sowohl vertikal als auch horizontal in der Bilddatei zentriert sind.

Ziehe die Symbolbeschriftungen in der Seitenleiste an die gewünscht Stelle, um die Symbole neu anzuordnen. Du kannst die Schaltfläche Abstandhalter hinzufügen verwenden, um den Abstand zwischen den einzelnen Symbolen genauer zu steuern. 

Abstandshalter

Der Abstandsblock fügt einen anpassbaren Abstand zwischen vertikal gestapelten Blöcken hinzu. Um den Abstand zwischen Blöcken, die nebeneinander stehen (z. B. in einer Spalte), anzupassen, verwende linken/rechten Innenabstand. 

Produkt 

Verwende einen Produktblock, um empfohlene Artikel aus dem Katalog deines Shops hinzuzufügen. Wenn du einen Produktblock hinzufügst, hast du zwei Optionen: dynamisch oder statisch. 

Ein dynamischer Feed aktualisiert sich automatisch und wird über einen Produkt-Feed konfiguriert. Wenn du mehr über die Einrichtung eines Produkt-Feeds erfahren möchtest, lies unseren Artikel So verwendest du Produkt-Feeds und Empfehlungen. 

Ein statischer Produktblock zeigt nur die Katalogartikel an, die du manuell im Vorlagen-Editor ausgewählt hast. Er wird nicht automatisch aktualisiert und ist nicht auf einzelne Empfänger*innen ausgerichtet. 

Bei beiden Optionen kannst du das Aussehen des Blocks anpassen, sobald du entweder den Feed oder die Artikel ausgewählt hast. Produktblöcke können nur Bilder zeigen oder den Namen und den Preis eines jeden Artikels enthalten. Blättere durch alle Optionen auf der Registerkarte „Stile“ des Produktblocks, um den Block vollständig anzupassen. 

Tabelle

Mit Tabellenblöcken kannst du Bilder und Text in einer E-Mail-Vorlage strukturieren. Der Tabellenblock gibt dir die Flexibilität, so viele Spalten oder Zeilen hinzuzufügen, wie du möchtest. (Die Abstände werden automatisch angepasst oder du kannst eine Breite in der Einstellung Breite auf der Registerkarte Spalten festlegen.) 

Wenn ein Tabellenblock zum ersten Mal in deine Vorlage gezogen wird, hat er eine Zeile mit zwei Spalten. Verwende die Registerkarte Tabelleneinstellungen, um zusätzliche Zeilen und Spalten hinzuzufügen, und wechsle dann zurück zur Registerkarte Inhalt, um den Inhalt der Tabelle zu konfigurieren. 

Verwende den Bereich Zellenauswahl, um den Inhalt einer bestimmten Zelle zu öffnen. Wähle im Bereich Zelleninhalt zwischen Text oder Bild und füge dann deinen Inhalt hinzu. Bitte beachte: Wenn du zwischen den Inhaltstypen Text und Bild hin- und herwechselst, kann der Inhalt, der sich zuvor in dieser Zelle befand, verloren gehen. Verwende die Schaltfläche „Rückgängig“, um deine Änderungen rückgängig zu machen. 

Um die Farben, Schriftarten, Rahmen und das Layout der Tabelle zu bearbeiten, öffne die Registerkarte Tabelleneinstellungen. 

Tabellenblöcke werden auch verwendet, um dynamische Inhalte anzuzeigen, z. B. die Details einer Liste von Artikeln im Warenkorb der Empfänger*innen. Erfahre mehr über dynamische Tabellenblöcke. 

HTML 

Füge mithilfe des HTML-Blocks benutzerdefinierten Code zu deiner Vorlage hinzu. Verwende diesen Blocktyp, wenn du eigens codierte Elemente, Funktionen von Drittanbietern wie den Countdown-Timer oder benutzerdefinierte CSS hinzufügen möchtest. Wenn in deiner E-Mail Probleme mit benutzerdefiniertem Code auftreten, solltest du dir unseren Artikel zur Fehlerbehebung bei benutzerdefiniertem Code in Vorlagen anschauen.

Zitat aus Bewertung

Wenn du Klaviyo Reviews nutzt, kannst du echte Kundenbewertungen anzeigen, um den Wert deiner Marke zu belegen und mehr Conversions zu erreichen. 

Der Zitatblock für Bewertungen bietet eine Auswahl von Bewertungen, die du in deinen Nachrichten verwenden kannst. Wenn du noch keine Bewertung auswählen kannst, kann das folgende Gründe haben: 

• Es gibt nicht genügend hochwertige Bewertungen in deinem Konto, aus denen du auswählen kannst. Schaue zu einem späteren Zeitpunkt noch einmal vorbei, um Bewertungen auszuwählen. 
• Deine Bewertungen wurden noch nicht bearbeitet. Wenn du eine brandneue Bewertung veröffentlichen möchtest, warte bitte ein paar Stunden, bevor du es erneut versuchst.
• Die Bewertungen in deinem Konto sind nicht verifiziert. Um verifiziert zu werden, muss eine Bewertung über einen personalisierten Link in einem Klaviyo-Flow für Bewertungsanfragen eingereicht oder in einer hochgeladenen CSV-Datei mit Bewertungen von einer anderen Plattform als verifiziert markiert werden. Nicht verifizierte Bewertungen, einschließlich Bewertungen, die direkt auf deiner Website eingereicht werden, können nicht in einen Block mit Zitaten aus Bewertungen aufgenommen werden.

Spalten

Es gibt zwei verschiedene Blöcke, mit denen du Spalten in deine E-Mail-Vorlagen ziehen kannst: den per Split geteilten Block und das Spalten-Layout. Bei einem geteilten Block bist du auf Text- oder Bildinhalte in zwei Spalten beschränkt, kannst aber die Breite jeder Spalte genau einstellen. 

Bei einem Spalten-Layout kannst du in jeder Spalte jede Art von Inhalt hinzufügen, bist aber auf eine Handvoll vorausgewählter Spaltenbreitenoptionen beschränkt. Das Spalten-Layout erlaubt zwischen einer und vier Spalten. 

Nachdem du in deiner Vorlage Spalten hinzugefügt hast, kannst du sie mit Inhaltsblöcken füllen, die du in jeder Spalte ablegst. Du bist nicht auf einen Inhaltsblock pro Spalte beschränkt: Füge so viele Inhaltsblöcke hinzu, wie du möchtest, und stapele sie übereinander. 

Video

Im Videoblock kannst du das Erscheinungsbild eines in eine E-Mail eingebetteten Videos festlegen. Wenn Empfänger*innen auf die Wiedergabeschaltfläche klicken, wird eine neue Registerkarte geöffnet, in der das Video abgespielt wird. 

Um einen Videoblock hinzuzufügen, kopiere zunächst die URL des Videos aus YouTube, Vimeo, TikTok oder einer Videoplattform deiner Wahl. Wenn das Video von Youtube stammt, wählt Klaviyo automatisch ein Thumbnail-Bild aus. 

Wenn dein Video aus einer anderen Quelle stammt, musst du auch einen Video-Thumbnail hochladen. Auf dem Thumbnail des Videos wird eine Schaltfläche zum Abspielen eingeblendet, die du in den Blockeinstellungen deaktivieren kannst.

Warum wird das Video nicht direkt in der E-Mail abgespielt? 

Die meisten großen E-Mail-Programme (wie Gmail) werten eingebettete Inhalte wie Videos als Sicherheitsrisiko. Diese E-Mail-Clients entfernen eingebetteten Code oft vollständig, sodass Empfänger*innen beim Öffnen deiner E-Mail keine Inhalte sehen. 

Wir möchten alle unsere Kunden zum Erfolg führen. Da unsere Tests gezeigt haben, dass Videos nicht in allen wichtigen E-Mail-Clients zuverlässig gerendert werden, unterstützen wir keine direkt eingebetteten Videos.

Universeller Inhalt

Mit dem Sternsymbol kannst du Blöcke oder Abschnitte in Vorlagen speichern, um sie auch in anderen Vorlagen zu verwenden. Wenn du einen Block oder Abschnitt speicherst, wird er auf der Registerkarte Universell deiner E-Mail-Vorlagenblöcke angezeigt. Wenn du Bearbeitungen an einem universellen Block oder Abschnitt vornimmst, kannst du diese Bearbeitungen auf alle Instanzen des gespeicherten Inhalts anwenden.

Erfahre mehr über die Verwendung universeller gespeicherter Inhalte.

Rückgängig machen und wiederherstellen

Wenn dir bei der Bearbeitung deiner Vorlage ein Fehler unterläuft, hilft dir die Schaltfläche „Rückgängig machen“. Du kannst auch die Schaltfläche „Wiederherstellen“ verwenden, um die Änderung rückgängig zu machen. Deine Vorlage wird während der gesamten Bearbeitungszeit automatisch gespeichert und die Schaltflächen „Rückgängig machen“/„Wiederherstellen“ protokollieren deine Änderungen, solange du die Vorlage bearbeitest. Allerdings werden frühere Änderungen nur während deiner Bearbeitungssitzung gespeichert. Wenn du die Vorlage verlässt und später zurückkehrst, ist die Schaltfläche „Rückgängig machen“ deaktiviert, bis du weitere Änderungen vornimmst. 

Vorschau deiner E-Mail 

Nutze die Schaltfläche Vorschau und Test, um zu sehen, wie deine E-Mail im Posteingang der Empfänger*innen angezeigt wird. Wenn du eine E-Mail auf der Registerkarte „E-Mail-Vorlagen“ erstellst, stelle sicher, dass du deine E-Mail so in der Vorschau anzeigst, wie sie versendet werden soll. Verwende die folgende Tabelle, um die beste Möglichkeit für die Vorschau zu finden. 

Weitere Ressourcen

• Referenz zur Personalisierung von Nachrichten
• So erstellst du eine Basisvorlage
• Kurs: Erste Schritte mit dem E-Mail-Vorlagen-Editor