Hoe maak je een hybride e-mail?template

Ongeveer 6 minuten lezen

Bijgewerkt 7 jul 2025, 10:03 EST

Leer hoe je aangepaste HTML-sjablonen kunt maken die compatibel zijn met Klaviyo's drag-and-drop editor (hybride sjablonen). Door deze stappen te volgen, kun je een volledig aangepaste HTML e-mail ontwerpen terwijl je toegang houdt tot functies die alleen beschikbaar zijn in de drag-and-drop editor (bijv. productblok of universeel inhoudsblok).

We raden het gebruik van aangepaste HTML alleen aan voor technisch onderlegde marketeers, of voor iedereen die toegang heeft tot een ontwikkelaar. Hoewel ons product support aangepaste HTML gebruikt, kan ons supportteam je niet helpen bij het maken van je eigen sjabloon, afgezien van de algemene richtlijnen in deze documentatie. Hulp nodig? bereiken uit naar een Klaviyo partner.

Om de veiligheid van je gegevens te waarborgen, kan Klaviyo's supportteam je HTML-bestanden niet openen.

Voeg een codefragment toe aan je HTML template

Voeg slechts één van de onderstaande codefragmenten toe per e-mailtemplate. Met één codefragment kun je meerdere blokken met slepen en neerzetten toevoegen, dus je hoeft niet meerdere codefragmenten toe te voegen.

Als je bijvoorbeeld een afbeelding en een tabelblok wilt toevoegen met de slepen-en-neerzetten-editor, volg dan de stappen Een aanpasbaar afbeeldingsblok toevoegen hieronder. Zodra je je template hebt geüpload naar Klaviyo en gebruikt in een campagne of flow, kun je blok boven of onder het afbeeldingsblok toevoegen.

Een bewerkbaar tekstblok toevoegen

Maak een aangepaste HTML template met de HTML-editor van je voorkeur.

Voeg het volgende codefragment toe aan je HTML template. Plaats het waar je je tekstblok wilt toevoegen in je template.

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

Navigeer in Klaviyo naar de sjabloon Content > .
Selecteer de tab E-mailtemplate.
Klik op Importeren.
Voer een naam in voor je template, upload je HTML-bestand en importeer het.
Als je het tabblad template opent vanuit je sjabloon, zie je de code van templatein de HTML-editor van Klaviyo.
Om toegang te krijgen tot de template in Klaviyo's sleep-en neerzet-editor, voeg je deze toe aan een campagne of flow.
Selecteer Slepen en neerzetten als type template.
Let op het tekstblok met de tekst Hello world! Dit is je bewerkbare tekstblok.
Sleep naar wens extra blokken boven of onder het tekstblok.

Een aanpasbaar afbeeldingsblok toevoegen

Maak een aangepaste HTML template met de HTML-editor van je voorkeur.

Voeg het volgende codefragment toe aan je HTML template. Zorg ervoor dat je het plaatst waar je je afbeeldingsblok wilt toevoegen nadat je template hebt geïmporteerd.

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

Optioneel kun je een vooraf ingestelde afbeelding toevoegen binnen de div. Als je daarvoor kiest, ziet je code er als volgt uit:

<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="Mijn afbeelding" /></a>
    </div>
</td>

Navigeer in Klaviyo naar de sjabloon Content > .
Selecteer de tab E-mailtemplate.
Klik op Importeren.
Voer een naam in voor je template, upload je HTML-bestand en importeer het.
Als je het tabblad template opent vanuit je sjabloon, zie je de code van templatein de HTML-editor van Klaviyo.
Om toegang te krijgen tot de template in Klaviyo's drag-and-drop editor, voeg je deze toe aan een campagne of flow. Selecteer in de stap Inhoud de template die je hebt geïmporteerd.
Let op het afbeeldingsblok, dat een knop bevat om een afbeelding te uploaden of de afbeelding die je hebt toegevoegd.
Sleep naar wens een extra blok boven of onder het afbeeldingsblok.

Een universeel inhoudsblok toevoegen

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

Maak een aangepaste HTML template met de HTML-editor van je voorkeur.
Voeg het volgende codefragment toe aan je HTML template. Zorg ervoor dat je het plaatst waar je je afbeeldingsblok wilt toevoegen nadat je template hebt geïmporteerd.
```
<td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> 
    <div data-klaviyo-universal-block="block_id_1"> & nbsp;<div>
</td>
```
Vervang block_id_1 door het ID van je universele inhoudsblok. Om de ID van een universeel inhoudsblok te vinden:
1. Navigeer naar Inhoud > universele inhoud.
2. Open een universeel inhoudsblok om het te bewerken.
3. De URL voor deze pagina heeft dit formaat: https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
4. Kopieer de blok-ID van de URL.
Navigeer in Klaviyo naar de sjabloon Content > .
Selecteer de tab E-mailtemplate.
Klik op Importeren.
Voer een naam in voor je template, upload je HTML-bestand en importeer het.
Als je het tabblad template opent vanuit je sjabloon, zie je de code van templatein de HTML-editor van Klaviyo.
Om toegang te krijgen tot de template in Klaviyo's drag-and-drop editor, voeg je deze toe aan een campagne of flow. Selecteer in de stap Inhoud de template die je hebt geïmporteerd.
Let op de universele inhoud blok(ken).

Je kunt meerdere universele inhoudsblokken toevoegen met één codefragment. Om dit te doen, voeg je direct na het eerste div-element in het bovenstaande codefragment nog een div-element toe met een andere blok-ID.

Een blok van een ander type toevoegen (bijv. productblok, tabelblok)

Maak een aangepaste HTML template met de HTML-editor van je voorkeur.

Voeg het volgende codefragment toe aan je HTML template. Plaats het waar je je blok(ken) wilt toevoegen na het importeren van je template.

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

Navigeer in Klaviyo naar de sjabloon Content > .
Selecteer de tab E-mailtemplate.
Klik op Importeren.
Voer een naam in voor je template, upload je HTML-bestand en importeer het.
Als je het tabblad template opent vanuit je sjabloon, zie je de code van templatein de HTML-editor van Klaviyo.
Om toegang te krijgen tot de template in Klaviyo's drag-and-drop editor, voeg je deze toe aan een campagne of flow. Selecteer in de stap Inhoud de template die je hebt geïmporteerd.
Let op het tekstblok met de tekst Hello world! Sleep een ander blok (bijvoorbeeld een productblok) onder dit blok.
Verwijder het tekstblok en voeg naar wens extra aangepaste blokken toe.

Voorbeeld hybride e-mailtemplate code

Het onderstaande voorbeeld toont een functioneel HTML-bestand met het hybride codefragment voor een tekstblok. Gebruik deze code om de hybride editor functionaliteit te testen.

  <html>
  <head>
    < meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>Een eenvoudige hybride 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;
      }
      tabel   /style   /head   body   div class= container    table class= main    tr  td class= wrapper  Dit is een heel eenvoudige HTML e-mail /td   /tr
>
 <>
 <"" {
        width: 100%;
      }
    <>
 <>
 <>
 <"">
 <"">
 <> <""><>
 </style>
  </head>
  <body>
    <tr>
          </td>
        </tr>
        <tr>
          <table>
              <tr>
                < td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> 
 < div class="klaviyyo-block klaviyo-text-block"> 
 Hallo wereld!
                  <>>
 <>
 <>
</div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          < td class="wrapper"{% unsubscribe %}</td>
        </tr>
      < /table xml-ph-0032@d></table>
    </div>
  </body>
</html>

Emoji's en hybride e-mailtemplate

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

Resultaat

Na het uitvoeren van deze stappen kun je bepaalde gebieden van een aangepaste HTML template toevoegen en bewerken. Merk op dat je geen blok met slepen en neerzetten kunt toevoegen of bewerken in enig gebied van de aangepaste template, behalve waar het oorspronkelijke blok was geplaatst.

Extra hulpbronnen

Was dit artikel nuttig?

Gebruik dit formulier alleen voor feedback op artikelen. Meer informatie over hoe je contact opneemt met support.

Ontdek meer van Klaviyo

Community

Maak contact met collega's, partners en Klaviyo-experts om inspiratie op te doen, inzichten te delen en antwoorden te krijgen op al je vragen.

Naar de community

Live training

Neem deel aan een live sessie met Klaviyo-experts voor meer informatie over best practices, het instellen van belangrijke functies en andere onderwerpen.

Nu aanmelden

Support

Krijg ondersteuning via je account.

E-mailsupport (gratis proefperiodes en betaalde accounts) 24/7 beschikbaar

Chat-/virtuele assistentie
Beschikbaarheid varieert per locatie en type abonnement

Inloggen