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).

Um eine bestehende HTML-Vorlage als Drag-and-drop-Vorlage neu zu erstellen, nutze die HTML-zu-Drag-and-drop-Conversion. Klaviyo nutzt KI, um das Design mit bearbeitbaren Blöcken nachzubilden. Überprüfe das konvertierte Layout und den Inhalt vor dem Senden. Verwende eine hybride Vorlage, wenn du dein benutzerdefiniertes HTML beibehalten und bearbeitbare Blöcke nur in bestimmten Bereichen hinzufügen möchtest.

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

Jedes Code-Fragment unten erstellt 1 bearbeitbaren Bereich. Du kannst mehrere Drag-and-drop-Blöcke innerhalb dieses Bereichs hinzufügen. Um separate Bereiche deiner Vorlage bearbeitbar zu machen, füge für jeden Bereich ein Code-Fragment hinzu.

Platziere jedes <td> -Snippet in einem <tr> innerhalb des Tabellenlayouts deiner E-Mail. Lege data-klaviyo-region-width-pixels auf die Breite dieses Bereichs in Pixeln fest; in den Beispielen wird 600 verwendet.

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.

Bevor du eine Marketing-E-Mail-Vorlage importierst, füge einen abmelden-Tag hinzu, z. B. {% unsubscribe %}. Speichere deine Vorlage als .html -Datei.

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.
   

textCopy

<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: gespeichert aus.
3. Klicke auf Erstellen > E-Mail-Vorlage importieren.
4. Gib einen Namen für deine Vorlage ein, lade deine HTML-Datei hoch, und klicke auf Vorlage importieren.
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. Wenn du aufgefordert wirst, einen Vorlagentyp auszuwählen, wähle Ziehen und ablegen aus.

1. Wähle in der Vorlagengalerie E-Mail: gespeichert aus, wähle die importierte Vorlage aus und klicke auf Vorlage verwenden.
2. Beachte den Textblock mit Hello world! Dies ist dein bearbeitbarer Textblock.
3. 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.
   

textCopy

<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 in div hinzufügen. Ersetze die Beispiel-Bild-URL unten durch eine öffentlich zugängliche Bild-URL und ersetze den Link und den Alternativtext durch deine eigenen:

textCopy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block">
        <a href="https://www.klaviyo.com/"><img src="https://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: gespeichert aus.
3. Klicke auf Erstellen > E-Mail-Vorlage importieren.
4. Gib einen Namen für deine Vorlage ein, lade deine HTML-Datei hoch, und klicke auf Vorlage importieren.
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. Wenn du aufgefordert wirst, einen Vorlagentyp auszuwählen, wähle Drag and drop aus.
2. Wähle in der Vorlagengalerie E-Mail: gespeichert aus, wähle die importierte Vorlage aus und klicke auf Vorlage verwenden.
3. Beachte den Bildblock, der entweder eine Schaltfläche zum Hochladen eines Bildes oder das von dir eingefügte Bild enthält.
4. 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 dort zu platzieren, wo du deinen Block mit universellem Inhalt nach dem Importieren deiner Vorlage hinzufügen möchtest.
   

textCopy

<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: gespeichert aus.
4. Klicke auf Erstellen > E-Mail-Vorlage importieren.
5. Gib einen Namen für deine Vorlage ein, lade deine HTML-Datei hoch, und klicke auf Vorlage importieren.
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 zu einer Kampagne oder einem Flow hinzu. Wenn du aufgefordert wirst, einen Vorlagentyp auszuwählen, wähle Drag and drop aus.
2. Wähle in der Vorlagengalerie E-Mail: gespeichert aus, wähle die importierte Vorlage aus und klicke auf Vorlage verwenden.
3. 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.
   

textCopy

<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: gespeichert aus.
3. Klicke auf Erstellen > E-Mail-Vorlage importieren.
4. Gib einen Namen für deine Vorlage ein, lade deine HTML-Datei hoch, und klicke auf Vorlage importieren.
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. Wenn du aufgefordert wirst, einen Vorlagentyp auszuwählen, wähle Drag and drop aus.
2. Wähle in der Vorlagengalerie E-Mail: gespeichert aus, wähle die importierte Vorlage aus und klicke auf Vorlage verwenden.
3. Beachte den Textblock mit Hello world! Ziehe einen weiteren Block (z. B. einen Produktblock) unter diesen Block.
4. 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).

Vorschau deiner Hybrid-E-Mail anzeigen

Sieh dir eine Vorschau deiner E-Mail auf dem Desktop und auf Mobilgeräten an und sende eine Test-E-Mail, bevor du sie an Empfänger*innen sendest. Überprüfe das Layout, die Bilder, die Links und alle dynamischen Inhalte in der Kampagne oder dem Flow, in der bzw. dem du sie verwenden möchtest. Warte, bis deine Änderungen fertig gespeichert sind, bevor du den Editor verlässt.

Ergebnis

Nachdem du diese Schritte abgeschlossen hast, kannst du Drag-and-Drop-Blöcke innerhalb der durch deine Code-Fragmente definierten Bereiche hinzufügen und bearbeiten. Das umgebende benutzerdefinierte HTML bleibt außerhalb dieser bearbeitbaren Bereiche.

Weitere Ressourcen