Een hybride e-mailtemplate maken

Wat je leert

Leer hoe je aangepaste HTML-template maakt die compatibel is met de slepen-en-neerzetten-editor van Klaviyo (oftewel hybride templates). Door deze stappen te volgen, kun je een volledig aangepaste HTML-e-mail ontwerpen, terwijl je toegang behoudt tot functies die alleen beschikbaar zijn in de slepen-en-neerzetten-editor (bijv. productblokken of universele contentblokken).

Voeg een codefragment toe aan je HTML-template

Voeg per e-mailtemplate maar één van de onderstaande codefragmenten toe. Met één codefragment kun je meerdere drag-and-drop-blokken toevoegen, dus je hoeft niet meerdere codefragmenten toe te voegen.

Als je bijvoorbeeld een afbeeldingsblok en een tabelblok wilt toevoegen met de drag-and-drop-editor, volg je gewoon de onderstaande stappen in Een aanpasbaar afbeeldingsblok toevoegen. Zodra je je template uploadt naar Klaviyo en deze gebruikt in een campagne of flow, kun je blokken boven of onder het afbeeldingsblok toevoegen.

Een bewerkbaar tekstblok toevoegen

1. Maak een aangepaste HTML-template met de HTML-editor van je voorkeur.
2. Voeg het volgende codefragment toe aan je HTML-template. Plaats het waar je maar wilt om je tekstblok toe te voegen in je template.
   

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. Navigeer in Klaviyo naar Content > Templates.
2. Selecteer het tabblad E-mailtemplates.
3. Klik op Importeren.
4. Voer een naam in voor je template, upload je HTML-bestand en importeer het.
5. Als je de template opent via je tabblad template, zie je de code van je template in de HTML-editor van Klaviyo.
   

1. Om het template te openen in de drag-and-drop-editor van Klaviyo, voeg je het toe aan een campagne of flow.
2. Selecteer Slepen en neerzetten als het templatetype.
   

1. Let op het tekstblok met de tekst Hello world! Dit is je bewerkbare tekstblok.
2. Sleep extra blokken boven of onder het tekstblok en zet ze neer waar je wilt.

Een aanpasbaar afbeeldingsblok toevoegen

1. Maak een aangepaste HTML-template met de HTML-editor van je voorkeur.
2. Voeg het volgende codefragment toe aan je HTML-template. Zorg dat je het plaatst waar je je afbeeldingsblok wilt toevoegen nadat je je template hebt geïmporteerd.
   

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. Optioneel kun je een vooraf ingestelde afbeelding in de div toevoegen. Als je ervoor kiest om dit te doen, ziet je code er zo uit:
   

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. Navigeer in Klaviyo naar Content > Templates.
2. Selecteer het tabblad E-mailtemplates.
3. Klik op Importeren.
4. Voer een naam in voor je template, upload je HTML-bestand en importeer het.
5. Als je de template opent via je tabblad template, zie je de code van je template in de HTML-editor van Klaviyo.
   

1. Om toegang te krijgen tot de template in Klaviyo’s editor voor slepen en neerzetten, voeg je deze toe aan een campagne of flow. Selecteer in de contentstap de template die je hebt geïmporteerd.
2. Let op het afbeeldingsblok, dat ofwel een knop bevat om een afbeelding te uploaden of de afbeelding die je hebt toegevoegd.
3. Sleep extra blokken naar wens boven of onder het afbeeldingsblok.
   

Een universeel contentblok toevoegen

Dit proces wordt ondersteund voor universele contentblokken, niet voor universele secties.

1. Maak een aangepaste HTML-template met de HTML-editor van je voorkeur.
2. Voeg het volgende codefragment toe aan je HTML-template. Zorg dat je het plaatst waar je je afbeeldingsblok wilt toevoegen nadat je je template hebt geïmporteerd.
   

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. Vervang block_id_1 door de ID van je universele contentblok. Zo vind je de ID van een blok met universele content:
   1. Ga naar Content > Universele content.
   2. Open een universeel contentblok om het te bewerken.
   3. De URL voor deze pagina heeft deze indeling: https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
   4. Kopieer de blok-ID uit de URL.
2. Navigeer in Klaviyo naar Content > Templates.
3. Selecteer het tabblad E-mailtemplates.
4. Klik op Importeren.
5. Voer een naam in voor je template, upload je HTML-bestand en importeer het.
6. Als je de template opent via je tabblad template, zie je de code van je template in de HTML-editor van Klaviyo.
   

1. Om toegang te krijgen tot de template in Klaviyo’s editor voor slepen en neerzetten, voeg je deze toe aan een campagne of flow. Selecteer in de contentstap de template die je hebt geïmporteerd.
2. Let op de universele contentblokken.

Je kunt meerdere universele contentblokken toevoegen met één codefragment. Voeg hiervoor meteen na de eerste nog een div -element toe in het codefragment hierboven, met de ID van een ander blok.

Voeg een blok van een ander type toe (bijv. productblok, tabelblok)

1. Maak een aangepaste HTML-template met de HTML-editor van je voorkeur.
2. Voeg het volgende codefragment toe aan je HTML-template. Plaats het waar je je blok(ken) wilt toevoegen nadat je je template hebt geïmporteerd.
   

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. Navigeer in Klaviyo naar Content > Templates.
2. Selecteer het tabblad E-mailtemplates.
3. Klik op Importeren.
4. Voer een naam in voor je template, upload je HTML-bestand en importeer het.
5. Als je de template opent via je tabblad template, zie je de code van je template in de HTML-editor van Klaviyo.
   

1. Om toegang te krijgen tot de template in Klaviyo’s editor voor slepen en neerzetten, voeg je deze toe aan een campagne of flow. Selecteer in de contentstap de template die je hebt geïmporteerd.
2. Let op het tekstblok met de tekst Hello world! Sleep nog een blok (bijv. een productblok) onder dit blok.
3. Verwijder het tekstblok en voeg desgewenst extra aangepaste blokken toe.
   

Voorbeeldcode voor hybride e-mailtemplate

Het onderstaande voorbeeld toont een werkend HTML-bestand met het hybride codefragment voor een tekstblok. Gebruik deze code om de functionaliteit van de hybride editor te 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>

Emoji's en hybride e-mailtemplates

Vanaf februari 2024 worden alle emoji's ondersteund in alle Klaviyo Email-editors (d.w.z. de drag-and-drop-editor, hybrid editor, teksteditor en aangepaste HTML-editor).

Resultaat

Na het voltooien van deze stappen kun je bepaalde onderdelen van een aangepaste HTML-template toevoegen en bewerken. Houd er rekening mee dat je geen drag-and-dropblokken kunt toevoegen of bewerken in welk deel van de aangepaste template dan ook, behalve op de plek waar het oorspronkelijke blok is geplaatst.