Du wirst lernen
Lerne, wie du eigene HTML-Vorlagen erstellst, die mit dem Drag-and-Drop-Editor von Klaviyokompatibel sind (d.h. hybride Vorlagen). Wenn du diese Schritte befolgst, kannst du eine vollständig benutzerdefinierte HTML-E-Mail entwerfen und gleichzeitig auf Funktionen zugreifen, die nur im Drag-and-Drop-Editor verfügbar sind (z. B. Produktblock oder universeller Inhalt)
Wir empfehlen die Verwendung von benutzerdefiniertem HTML nur für technisch versierte Marketer oder für alle, die Zugang zu einem Entwickler haben. Unser Produkt unterstützt zwar benutzerdefiniertes HTML, aber unser Support-Team kann dir bei der Erstellung deiner benutzerdefinierten Vorlage nicht weiterhelfen als mit den allgemeinen Hinweisen in dieser Dokumentation. Brauchst du Hilfe? Wende dich an einen Klaviyo Partner.
Um die Sicherheit deiner Daten zu gewährleisten, kann das Support-Team von Klaviyo deine HTML-Dateien nicht öffnen.
Füge ein Code-Fragment zu deiner HTML-Vorlage hinzu
Füge pro E-Mail-Vorlage nur eines der unten aufgeführten Code-Fragmente hinzu. Mit einem Code-Fragment kannst du mehrere Drag-and-Drop-Blöcke hinzufügen, sodass du nicht mehrere Code-Fragmente hinzufügen musst.
Wenn du z. B. ein Bild und einen Tabellenblock mit dem Drag-and-Drop-Editor hinzufügen möchtest, befolge einfach die unten stehenden Schritte zum Hinzufügen eines anpassbaren Bildblocks. Sobald du deine Vorlage auf Klaviyo hochgeladen und in einer Kampagne oder einem Flow verwendet hast, kannst du einen Block über oder unter dem Bildblock hinzufügen.
Einen bearbeitbaren Textblock hinzufügen Einen bearbeitbaren Textblock hinzufügen
- Erstelle eine eigene HTML-Vorlage mit deinem bevorzugten HTML-Editor.
- Füge das folgende Code-Fragment zu deiner HTML-Vorlage hinzu. Platziere ihn dort, wo du deinen Textblock in deiner Vorlage einfügen möchtest.
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> <div class="klaviyo-block klaviyo-text-block"> Hallo Welt!</div> </td> - In Klaviyo navigierst du zu Inhalt > Vorlage.
- Klick importieren.
- Gib einen Namen für deine Vorlage ein, lade deine HTML-Datei hoch und importiere sie.
- Wenn du die Vorlage über deinen Vorlage-Tab öffnest, siehst du den Code deiner Vorlage im HTML-Editor von Klaviyo.
- Um die Vorlage im Drag-and-Drop-Editor von Klaviyoaufzurufen, fügst du sie einer Kampagne oder einem Flow hinzu.
- Wähle als Vorlagentyp "Drag and Drop" aus.
- Beachte den Textblock mit der Aufschrift Hallo Welt! Dies ist dein bearbeitbarer Textblock.
- Ziehe einen zusätzlichen Block über oder unter den Textblock, wie gewünscht.
Hinzufügen eines anpassbaren Bildes BlockHinzufügen eines anpassbaren Bildes Block
- Erstelle eine eigene HTML-Vorlage mit deinem bevorzugten HTML-Editor.
- Füge das folgende Code-Fragment zu deiner HTML-Vorlage hinzu. Achte darauf, dass du ihn dort platzierst, wo du deinen Bildblock nach dem Import deiner Vorlage hinzufügen möchtest.
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> <div class="klaviyo-block klaviyo-image-block"></div> </td>- Optional kannst du ein voreingestelltes Bild innerhalb des Divs hinzufügen. Wenn du dich dafür entscheidest, wird dein Code wie folgt aussehen:
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> <div class="klaviyo-block klaviyo-image-block"> <a href="http://klaviyo.com>< img src="example.com/my_image.png" alt="Mein Bild" /></a>
</div> </td>
- Optional kannst du ein voreingestelltes Bild innerhalb des Divs hinzufügen. Wenn du dich dafür entscheidest, wird dein Code wie folgt aussehen:
- In Klaviyo navigierst du zu Inhalt > Vorlage.
- Klick importieren.
- Gib einen Namen für deine Vorlage ein, lade deine HTML-Datei hoch und importiere sie.
- Wenn du die Vorlage über deinen Vorlage-Tab öffnest, siehst du den Code deiner Vorlage im HTML-Editor von Klaviyo.
- Um die Vorlage im Drag-and-Drop-Editor von Klaviyoaufzurufen, fügst du sie einer Kampagne oder einem Flow hinzu.
- Wähle als Vorlagentyp "Drag and Drop" aus.
- Beachte den Bildblock, der entweder eine Schaltfläche zum Hochladen eines Bildes oder das von dir eingefügte Bild enthält.
- Ziehe weitere Blöcke über oder unter den Bildblock, wie gewünscht.
Einen Block eines anderen Typs hinzufügen (z. B. Produktblock, Tabellenblock, universeller Inhalt) Einen Block eines anderen Typs hinzufügen (z. B. Produktblock, Tabellenblock, universeller Inhalt)
- Erstelle eine eigene HTML-Vorlage mit deinem bevorzugten HTML-Editor.
- Füge das folgende Code-Fragment zu deiner HTML-Vorlage hinzu. Platziere ihn dort, wo du deine Blöcke nach dem Importieren deiner Vorlage hinzufügen möchtest.
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> <div class="klaviyo-block klaviyo-text-block"> Hallo Welt!</div> </td> - In Klaviyo navigierst du zu Inhalt > Vorlage.
- Klick importieren.
- Gib einen Namen für deine Vorlage ein, lade deine HTML-Datei hoch und importiere sie.
- Wenn du die Vorlage über deinen Vorlage-Tab öffnest, siehst du den Code deiner Vorlage im HTML-Editor von Klaviyo.
- Um die Vorlage im Drag-and-Drop-Editor von Klaviyoaufzurufen, fügst du sie einer Kampagne oder einem Flow hinzu.
- Wähle als Vorlagentyp "Drag and Drop" aus.
- Beachte den Textblock mit der Aufschrift Hallo Welt! Ziehe einen anderen Block (z. B. einen Produktblock oder universellen Inhalt) unter diesen Block.
- Lösche den Textblock und füge nach Belieben weitere benutzerdefinierte Blöcke hinzu.
Beispiel für eine hybride E-Mail-Vorlage
Das folgende Beispiel zeigt eine funktionale HTML-Datei mit dem hybriden Code-Fragment für einen Textblock. Verwende diesen Code, um die Funktionalität des Hybrid-Editors zu testen.
<html>
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Eine einfache Hybrid-E-Mail</title>
<style>
body {
background-color: #f6f6f6;
font-family: sans-serif;
margin: 20px;
}
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.container {
margin: 0 auto !important;
width: 600px;
}
.wrapper {
box-sizing: border-box;
padding: 15px;
}
Tabelle {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<table class="main">
<tr>
<td class="wrapper"> Dies ist eine sehr einfache HTML-E-Mail</td>
</tr>
<tr>
<td class="wrapper">
<table>
<tr>
<td align=center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
<div class="klaviyo-block klaviyo-text-block">
Hallo Welt!
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="wrapper">{% unsubscribe %}</td>
</tr>
</table>
</div>
</body>
</html>
Emoji und hybride E-Mail Vorlage
Ab Februar 2024 werden alle Emoji in allen Klaviyo E-Mail-Editoren unterstützt (d. h. im Drag-and-Drop-Editor, im Hybrid-Editor, im Nur-Text-Editor und im benutzerdefinierten HTML-Editor).
ErgebnisErgebnis
Nachdem du diese Schritte durchgeführt hast, kannst du bestimmte Bereiche einer benutzerdefinierten HTML-Vorlage hinzufügen und bearbeiten. Beachte, dass du in keinem Bereich der benutzerdefinierten Vorlage Blöcke per Drag-and-Drop hinzufügen oder bearbeiten kannst, außer dort, wo der ursprüngliche Block platziert wurde.
Zusätzliche Ressourcen