So erstellst du eine hybride E-Mail-Vorlage

Übersicht

Erfahre, wie du benutzerdefinierte HTML-Vorlagen erstellst, die mit Klaviyos Drag-and-drop-Editor kompatibel sind (d. h. Hybrid-Vorlagen). Wenn du diese Schritte befolgst, kannst du eine vollständig benutzerdefinierte HTML-E-Mail gestalten und dabei Zugriff auf Funktionen behalten, die nur im Drag-and-drop-Editor verfügbar sind (z. B. Produktblöcke oder Blöcke für universelle Inhalte).

Füge deiner HTML-Vorlage ein Code-Fragment hinzu

Füge pro E-Mail-Vorlage nur eines der unten aufgeführten Code-Fragmente hinzu. Ein Code-Fragment ermöglicht es dir, mehrere Drag-and-drop-Blöcke hinzuzufügen, sodass du nicht mehrere Code-Fragmente hinzufügen musst.

Wenn du zum Beispiel mit dem Drag-and-drop-Editor einen Bild- und einen Tabellenblock hinzufügen möchtest, folge einfach den untenstehenden Schritten unter Füge einen anpassbaren Bildblock hinzu. Sobald du deine Vorlage in Klaviyo hochgeladen und sie in einer Kampagne oder einem Flow verwendest, kannst du Blöcke oberhalb oder unterhalb des Bildblocks hinzufügen.

Einen bearbeitbaren Textblock hinzufügen

1. Erstelle eine benutzerdefinierte HTML-Vorlage mit deinem bevorzugten HTML-Editor.
2. Füge das folgende Code-Fragment zu deiner HTML-Vorlage hinzu. Platziere ihn dort, wo du deinen Textblock in deiner Vorlage hinzufügen möchtest.
   

text Copy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

1. Navigiere in Klaviyo zu Inhalt > Vorlagen.
2. Wähle die Registerkarte E-Mail-Vorlagen.
3. Klicke auf Importieren.
4. Gib einen Namen für deine Vorlage ein, lade deine HTML-Datei hoch und importiere sie.
5. Wenn du die Vorlage über deinen Tab Vorlage öffnest, siehst du den Code deiner Vorlage im HTML-Editor von Klaviyo.
   

1. Um auf die Vorlage im Drag-and-drop-Editor von Klaviyo zuzugreifen, füge sie zu einer Kampagne oder einem Flow hinzu.
2. Wähle Drag-and-Drop als Vorlagentyp aus.
   

1. Beachte den Textblock mit Hello world! Dies ist dein bearbeitbarer Textblock.
2. Ziehe nach Wunsch zusätzliche Blöcke oberhalb oder unterhalb des Textblocks per Drag-and-drop.

Füge einen anpassbaren Bildblock hinzu

1. Erstelle eine benutzerdefinierte HTML-Vorlage mit deinem bevorzugten HTML-Editor.
2. Füge das folgende Code-Fragment zu deiner HTML-Vorlage hinzu. Achte darauf, es an der Stelle zu platzieren, an der du deinen Bildblock hinzufügen möchtest, nachdem du deine Vorlage importiert hast.
   

text Copy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block"></div>
</td>

1. Optional kannst du ein voreingestelltes Bild innerhalb des div hinzufügen. Wenn du dich dafür entscheidest, sieht dein Code so aus:
   

text Copy

<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="My Image" /></a>    </div>
</td>

1. Navigiere in Klaviyo zu Inhalt > Vorlagen.
2. Wähle die Registerkarte E-Mail-Vorlagen.
3. Klicke auf Importieren.
4. Gib einen Namen für deine Vorlage ein, lade deine HTML-Datei hoch und importiere sie.
5. Wenn du die Vorlage über deinen Tab Vorlage öffnest, siehst du den Code deiner Vorlage im HTML-Editor von Klaviyo.
   

1. Um auf die Vorlage im Drag-and-drop-Editor von Klaviyo zuzugreifen, füge sie einer Kampagne oder einem Flow hinzu. Wähle im Schritt „Inhalt“ die importierte Vorlage aus.
2. Beachte den Bildblock, der entweder eine Schaltfläche zum Hochladen eines Bildes oder das von dir eingefügte Bild enthält.
3. Ziehe zusätzliche Blöcke nach Wunsch über oder unter den Bildblock und lege sie dort ab.
   

Einen universellen Inhaltsblock hinzufügen

Dieser Prozess wird für universelle Inhaltsblöcke unterstützt, nicht für universelle Abschnitte.

1. Erstelle eine benutzerdefinierte HTML-Vorlage mit deinem bevorzugten HTML-Editor.
2. Füge das folgende Code-Fragment zu deiner HTML-Vorlage hinzu. Achte darauf, es an der Stelle zu platzieren, an der du deinen Bildblock hinzufügen möchtest, nachdem du deine Vorlage importiert hast.
   

text Copy

<td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">     <div data-klaviyo-universal-block="block_id_1">&nbsp;<div></td>

1. Ersetze block_id_1 durch die ID deines universellen Inhaltsblocks. So findest du die ID eines universellen Inhaltsblocks:
   1. Navigiere zu Inhalt > universeller Inhalt.
   2. Öffne einen universal content block, um ihn zu bearbeiten.
   3. Die URL für diese Seite hat folgendes Format: https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
   4. Kopiere die Block-ID aus der URL.
2. Navigiere in Klaviyo zu Inhalt > Vorlagen.
3. Wähle die Registerkarte E-Mail-Vorlagen.
4. Klicke auf Importieren.
5. Gib einen Namen für deine Vorlage ein, lade deine HTML-Datei hoch und importiere sie.
6. Wenn du die Vorlage über deinen Tab Vorlage öffnest, siehst du den Code deiner Vorlage im HTML-Editor von Klaviyo.
   

1. Um auf die Vorlage im Drag-and-drop-Editor von Klaviyo zuzugreifen, füge sie einer Kampagne oder einem Flow hinzu. Wähle im Schritt „Inhalt“ die importierte Vorlage aus.
2. Beachte die universellen Inhaltsblöcke.

Du kannst mehrere Blöcke für universelle Inhalte mit einem einzigen Code-Fragment hinzufügen. Füge dazu im obigen Code-Fragment direkt nach dem ersten ein weiteres div -Element hinzu und verwende die ID eines anderen Blocks.

Füge einen Block eines anderen Typs hinzu (z. B. Produktblock, Tabellenblock)

1. Erstelle eine benutzerdefinierte HTML-Vorlage mit deinem bevorzugten HTML-Editor.
2. Füge das folgende Code-Fragment zu deiner HTML-Vorlage hinzu. Platziere ihn nach dem Import deiner Vorlage an der Stelle, an der du deine(n) Block/Blöcke hinzufügen möchtest.
   

text Copy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

1. Navigiere in Klaviyo zu Inhalt > Vorlagen.
2. Wähle die Registerkarte E-Mail-Vorlagen.
3. Klicke auf Importieren.
4. Gib einen Namen für deine Vorlage ein, lade deine HTML-Datei hoch und importiere sie.
5. Wenn du die Vorlage über deinen Tab Vorlage öffnest, siehst du den Code deiner Vorlage im HTML-Editor von Klaviyo.
   

1. Um auf die Vorlage im Drag-and-drop-Editor von Klaviyo zuzugreifen, füge sie einer Kampagne oder einem Flow hinzu. Wähle im Schritt „Inhalt“ die importierte Vorlage aus.
2. Beachte den Textblock mit Hello world! Ziehe einen weiteren Block (z. B. einen Produktblock) unter diesen Block.
3. Lösch den Textblock und füge nach Bedarf zusätzliche benutzerdefinierte Blöcke hinzu.
   

Beispielcode für eine hybride E-Mail-Vorlage

Das folgende Beispiel zeigt eine funktionsfähige HTML-Datei mit dem Hybrid-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>A simple hybrid email</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;
      }
      table {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <table class="main">
        <tr>
          <td class="wrapper">This is a very simple HTML email</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">
                    Hello world!
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="wrapper">{% unsubscribe %}</td>
        </tr>
      </table>
    </div>
  </body>
</html>

Emojis und hybride E-Mail-Vorlagen

Seit Februar 2024 werden alle Emojis in allen Klaviyo Email-Editoren unterstützt (d. h. im Drag-and-drop-Editor, Hybrid-Editor, Nur-Text-Editor und benutzerdefinierten HTML-Editor).

Ergebnis

Nach Abschluss dieser Schritte kannst du bestimmte Bereiche einer benutzerdefinierten HTML-Vorlage hinzufügen und bearbeiten. Beachte, dass du in keinem Bereich der benutzerdefinierten Vorlage Drag-and-drop-Blöcke hinzufügen oder bearbeiten kannst, außer dort, wo der ursprüngliche Block platziert wurde.