Gids voor de e-mailtemplate-editor

Wat je leert

Lees meer over Klaviyo’s e-mailtemplate-editor met slepen en neerzetten, inclusief hoe je templatestijlen gebruikt en elk bloktype configureert.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Over blokken en indelingen

Wanneer je de Klaviyo-editor voor e-mailtemplates opent, toont de zijbalk blok- en sectie-opties waaruit je kunt kiezen. Kies tussen basisblokken, lege blokken die worden gebruikt om e-mails helemaal vanaf nul op te bouwen, en universele content, content die je in andere templates hebt gemaakt en hebt opgeslagen voor later gebruik.

In het gedeelte Basis vind je een selectie blokken en indelingen. Gebruik blokken om content, zoals tekst, afbeeldingen of knoppen toe te voegen. Gebruik indelingen (d.w.z. secties en kolommen) om je blokken te groeperen en te configureren.

Blokken en secties kunnen worden gekloond, verwijderd of opgeslagen met de pictogrammen die verschijnen wanneer je over het blok of de sectie beweegt.

Klik en sleep om een blok of sectie te verplaatsen.

Templatestijlen

Het hoofdtabblad Stijlen bevat verschillende stylingopties die van toepassing zijn op je hele template. Om naar de hoofdinstellingen voor stijlen van een template te gaan, ga je met de knop Klaar uit alle blokken of secties waar je in werkt en klik je vervolgens op Stijlen.

Hier kun je de stijl en uitstraling van je e-mail bepalen. Als je de installatiewizard hebt doorlopen, bevat dit gedeelte al een aantal instellingen voor jouw stijl.

Hier kun je de volgende instellingen bewerken:

• E-mail
  • Template-achtergrond
    Kies een achtergrondkleur voor je template
  • Achtergrondafbeelding
    Voeg desgewenst een achtergrondafbeelding toe
  • Contentachtergrond
    Stel een achtergrondkleur in voor de content van je e-mail; deze kleur kan anders zijn dan de template-achtergrond en beslaat alleen de breedte van de content van je e-mail
  • Breedte
    De breedte van je e-mailcontent (600 px aanbevolen)
  • Hoekradius, marges, opvulling en rand
    Voeg tussenruimte en randen toe aan je template
• Tekst en koppen
  Stel stijlen in voor gewone tekst en vier kopstijlen en kies vervolgens in een tekstblok een tekststijl uit het dropdownmenu om deze toe te passen
• Lettertype
  Selecteer een lettertype, lettertypespatiëring, grootte, gewicht en kleur voor de tekststijl
• Letterafstand
  Horizontale afstand tussen letters
• Regelafstand
  Verticale afstand tussen regels tekst
• Tekstuitlijning
  Kies gecentreerd, links of rechts uitgelijnd
• Mobiel
  Kies of je optimalisatie voor mobiel wilt inschakelen (aanbevolen) of dezelfde stijlen en content wilt weergeven op zowel desktop als mobiel
• Overige
  • Valuta
    Selecteer een standaardvaluta voor de template, als deze verschilt van je accountinstellingen

De relatie tussen templatestijlen en blok- en sectiestijlen

Je templatestijlinstellingen worden eerst toegepast op je template, voordat specifieke instellingen voor blokken of secties worden toegepast. Als de stijlen van een blok of sectie conflicteren met je templatestijlen, worden de stijlen van het blok en de sectie toegepast. Als je bijvoorbeeld een achtergrondkleur voor content instelt in het hoofdgedeelte Stijlen en dan een blokspecifieke achtergrondkleur instelt, wordt de achtergrondkleur van het blok gebruikt voor het gebied van dat blok.

Secties en sectiestijlen

Alle content in de template-editor is georganiseerd in secties. Wanneer je een nieuwe template maakt, bevat deze standaard één of meer secties en kun je secties toevoegen of verwijderen wanneer je dat nodig hebt.

Om de instellingen van een sectie te openen, klik je op het gebied rechts of links van de content van die sectie. Merk op dat klikken op een blok de instellingen voor dat blok opent, en niet van de sectie waar het blok deel van uitmaakt.

Elke sectie heeft een tabblad Stijlen en een tabblad Weergaveopties. Gebruik de stijlen van de sectie om achtergrondafbeeldingen, opvulling en andere stijlen toe te voegen aan die sectie. Gebruik de weergaveopties van de sectie om te kiezen welke apparaattypen en ontvangers de secties kunnen zien.

Meer informatie over secties.

De instellingen voor stijl van de sectie worden toegepast op je template na je templatestijlen, maar vóór alle blok-specifieke stijlen. Als de templatestijlen conflicteren met je sectiestijlen, wordt de stijl van de sectie gebruikt. Als de instellingen van een blok conflicteren met je sectiestijlen, wordt de stijl van het blok gebruikt.

Blokken en blokstijlen

Voeg binnen secties blokken toe om je e-mail te vullen met content. De meeste contentblokken hebben een tabblad Stijlen, waar je het uiterlijk van het blok configureert, en een tabblad Weergaveopties, waar je kiest wie het blok ziet en op welke apparaattypen het wordt weergegeven. De specifieke stijlinstellingen die beschikbaar zijn, verschillen per bloktype, maar dezelfde weergaveopties zijn beschikbaar voor alle blokken.

Alle stijlsecties met kleuropties bevatten de kleurkiezer, die verschillende manieren biedt om een kleur te selecteren:

• Gebruik het kleurverloop om een tint en kleurschakering te selecteren.
• Kopieer en plak een HEX- of RGB-code.
• Kies uit je recent gebruikte kleuren of de kleuren die al aanwezig zijn in deze template.
• Gebruik de pipet om een kleur te kiezen op een willekeurige plek in het e-mailcanvas (momenteel niet beschikbaar voor tekst-, splitsing- of tabelblokken).
  

Lees meer over weergaveopties of lees verder om meer te leren over bloktypen en hoe je ze gebruikt.

Tekst

Gebruik een tekstblok om tekst toe te voegen aan je e-mail. Kies een tekststijl (normaal of kop 1 - 4) om de stijlinstellingen van de stijlen in je hoofdtemplate toe te passen of pas de tekstcontent aan via de instellingen van de teksteditor.

De e-maileditor van Klaviyo gebruikt de UTF-8-coderingsnorm, wat betekent dat onder andere Latijnse tekens, emoji's en dubbele byte-tekens worden ondersteund. 

Je kunt dynamische content aan je tekstblok toevoegen om het bericht voor elke ontvanger te personaliseren. Meer informatie over het personaliseren van berichten.

<style type="text/css">
    p, h1, h2, h3, h4, ol, li, ul { direction: rtl; }
</style> 

Vouw de sectie Content samen of scrol er voorbij om de stijlen van het blok aan te passen. Kies een achtergrondkleur voor het blok of de tekstinhoud en voeg opvulling toe.

Afbeelding

Gebruik een afbeeldingsblok om een afbeelding in te voegen in je e-mail. Je kunt afbeeldingen uit de volgende bronnen toevoegen:

• Afbeeldingenbibliotheek
  Voeg een afbeelding toe die je in het verleden hebt geüpload door in je afbeeldingenbibliotheek te zoeken
• Afbeelding uploaden
  Upload een JPEG, PNG of GIF vanaf je apparaat
• Afbeelding importeren
  Importeer een afbeelding met behulp van de URL van de afbeelding
• Dynamische afbeelding
  Geef een aangepaste afbeelding weer voor elke ontvanger met behulp van een dynamische afbeeldingsvariabele (bijv. door te verwijzen naar een afbeeldings-URL die opgeslagen is in de gebeurtenisgegevens van een ontvanger of als een profieleigenschap)

Zodra je je afbeelding hebt geselecteerd, pas je je afbeeldingsinstellingen aan, inclusief alt-tekst (een beschrijving van de afbeelding), een linkadres zodat de afbeelding klikbaar is, de breedte van de afbeelding, uitlijning en andere stijlen.

Splitsen

Gebruik een gesplitst blok om content weer te geven in twee kolommen van elke breedte. De content aan beide kanten van een gesplitst blok moet of een afbeelding of tekstcontent zijn. Standaard zal je gesplitste blok een 50/50 splitsing gebruiken. Ga naar het tabblad Splitsingsinstellingen om deze verhouding aan te passen. Je kunt ook de indeling Kolommen gebruiken om je content op te splitsen in twee of meer kolommen.

Knop

Met knoppenblokken maak je grote links die duidelijker zijn dan gewone tekstlinks - perfect voor een opvallende CTA (call-to-action). Omdat ze worden gebruikt voor CTA's, wil je er waarschijnlijk en elke e-mail maar een paar gebruiken.

Vul minimaal de velden Tekst en URL in. Tekst is wat de ontvanger op de knop ziet en de URL is waar de bezoeker naartoe wordt geleid als deze op de knop klikt. Pas het uiterlijk, de vorm en de grootte van de knop aan met de opties voor kleur, hoekradius en opvulling. Hieronder kun je ook het lettertype en andere stijlen van het blok aanpassen.

Kop/linkbalk

Gebruik het kop/linkbalk-blok om een logo en navigatiekoppelingen toe te voegen die naar verschillende content op je site verwijzen.

Als je in het blok neerzet, krijg je een aantal veelgebruikte indelingen voor kop- en linkbalken om uit te kiezen. Je kunt verschillende indelingen selecteren voor desktop en mobiel, om beter aan te sluiten bij de grootte van elk apparaat.

Voeg al je links toe aan de linkbalk. Je kunt de weergave-instellingen per apparaat instellen voor elke link, en we raden aan om alleen belangrijke links op mobiel weer te geven, omdat het scherm kleiner is.

Zodra je je links en logo hebt toegevoegd, kun je de laatste hand leggen met de onderstaande stijlopties. Je kunt het lettertype, de kleuren en de spatiëring voor het blok wijzigen. Zodra het klaar is, bekijk je een voorbeeld op zowel desktop als mobiel om het eindproduct te zien.

Slagschaduw

Gebruik een slagschaduw je bericht diepte te geven of een bepaald gedeelte te benadrukken. Kleuropties voor de schaduw zijn licht, donker en donkerder, en je kunt een achtergrondkleur en opvulling voor het blok instellen.

Scheidingslijn

Voeg een eenvoudige lijn toe tussen contentblokken. Kies uit ononderbroken, onderbroken en gestippelde lijnen. De kleur, grootte en opvulling zijn volledig aanpasbaar. Voorheen Horizontale lijn genoemd.

Social-link

Het blok met socialmedia-links is een eenvoudige manier om socialmedia-pictogrammen toe te voegen voor onder andere Instagram, Pinterest, Facebook en X (Twitter). Klaviyo biedt de standaard full-color pictogrammen voor verschillende sites, maar ook vereenvoudigde zwarte, witte of grijze opties.

Als je liever volledig aangepaste socialmedia-pictogrammen gebruikt, gebruik dan de optie Aangepast en upload je eigen afbeeldingsbestanden. In dat geval raden we je aan om afbeeldingen van 96 x 96 px te gebruiken. Om de afstand en uitlijning tussen de socialmedia-pictogrammen van Klaviyo en je aangepaste afbeeldingen te behouden, gebruik je pictogrammen van 50 px breed en centreer je deze verticaal en horizontaal in het afbeeldingsbestand.

Sleep de pictorgamlabels in de zijbalk om de pictorgammen een andere volgorde te geven. Je kunt de knop Spacer toevoegen gebruiken voor meer gedetailleerde controle over de ruimte tussen elk pictogram.

Tussenruimte

Het tussenruimteblok voegt een aanpasbare hoeveelheid ruimte toe tussen verticaal gestapelde blokken. Om de ruimte tussen blokken die naast elkaar staan (bijv. in een kolom) aan te passen, gebruik je opvulling links/rechts.

Product

Gebruik een productblok om aanbevolen artikelen uit de catalogus van je webshop toe te voegen. Wanneer je een productblok toevoegt, heb je twee opties: dynamisch of statisch.

Een dynamische feed wordt automatisch bijgewerkt en geconfigureerd via een productfeed. Lees voor meer informatie over het instellen van een productfeed ons artikel Hoe gebruik je productfeeds en aanbevelingen.

Een statisch productblok toont alleen de catalogusartikelen die je met de hand hebt geselecteerd in de template-editor, en wordt niet automatisch bijgewerkt of gericht op afzonderlijke ontvangers.

Met beide opties kun je, zodra je de feed of de artikelen hebt geselecteerd, het uiterlijk van het blok aanpassen. Productblokken kunnen alleen afbeeldingen tonen of ook de naam en prijs van elk artikel. Blader door alle opties op het tabblad Stijlen van het productblok om het blok volledig aan te passen.

Coupon

Gebruik een couponblok om een couponcode weer te geven in je e-mail. Als je een couponblok naar het canvas sleept, kun je op de + knop klikken om een coupon te kiezen uit je account. Je kunt zoeken op naam of filteren op categorie.

De geselecteerde couponcode wordt aan alle ontvangers getoond. Als de coupon nog niet aan de ontvanger is toegewezen, wordt deze automatisch toegewezen op het verzendmoment. Dit werkt net als het invoegen van een coupon met een template-tag, maar dan met ingebouwde opmaakopties.

Je kunt een koptekst toevoegen om de coupon van context te voorzien en het uiterlijk van het blok aanpassen, inclusief de coupon tekststijl, achtergrondkleur en rand.

Tabel

Tabelblokken helpen je bij het structureren van afbeeldingen en tekst binnen een e-mailtemplate. Het tabelblok geeft je de flexibiliteit om zoveel kolommen of rijen toe te voegen als je wilt (die automatisch op gelijke afstand van elkaar worden geplaatst, of je kunt een breedte instellen in de instelling Breedte op het tabblad Kolommen).

Wanneer een tabelblok voor het eerst naar je template wordt gesleept, heeft het één rij met twee kolommen. Gebruik het tabblad Tabelinstellingen om extra rijen en kolommen toe te voegen en ga dan terug naar het tabblad Content om de tabelcontent te configureren.

Gebruik het gedeelte Celkiezer om de content van een specifieke cel te openen. Gebruik het gedeelte Celcontent om te kiezen tussen Tekst- of Afbeeldingscontent en voeg dan je content toe. Houd er rekening mee dat als je heen en weer schakelt tussen de contenttypen Tekst en Afbeelding, je mogelijk content verliest die eerder in die cel stond; gebruik de knop Ongedaan maken om je wijzigingen terug te draaien.

Open het tabblad Tabelinstellingen om de kleuren, lettertypen, randen en indeling van de tabel te bewerken.

Tabelblokken worden ook gebruikt om dynamische content weer te geven, zoals de details van een lijst met artikelen in de winkelwagen van de ontvanger. Meer informatie over dynamische tabelblokken.

HTML

Voeg aangepaste code toe aan je template met behulp van het HTML-blok. Gebruik dit bloktype wanneer je elementen met aangepaste code, functies van derden zoals afteltimers of aangepaste CSS toevoegt. Als je problemen hebt met aangepaste code in je e-mails, bekijk dan hoe je problemen met aangepaste code in templates oplost.

Reviewcitaat

Als je Klaviyo Reviews gebruikt, zet dan echte klantreviews in om de waarde van je merk te bewijzen en conversie te stimuleren.

Het blok voor reviewcitaten biedt een selectie reviews om in je berichten te gebruiken. Als je nog geen review kunt selecteren, kan dat zijn omdat:

• Er niet genoeg reviews van hoge kwaliteit in je account beschikbaar zijn om te selecteren. Kom later terug voor een selectie van reviews.
• Je reviews nog niet zijn verwerkt. Als je een gloednieuwe review wilt gebruiken, probeer het dan over een paar uur opnieuw.
• De reviews in je account zijn niet geverifieerd. Om geverifieerd te worden, moet een review worden ingediend via een gepersonaliseerde link in een Klaviyo-flow voor reviewverzoeken of als geverifieerd worden gemarkeerd in een geüploade csv met reviews van een ander platform. Ongeverifieerde reviews, inclusief reviews die rechtstreeks op je site zijn geplaatst, komen niet in aanmerking voor opname in een blok met reviewcitaten.

Kolommen

Er zijn twee verschillende blokken die je kunt gebruiken om kolommen naar je e-mailtemplates te slepen: het gesplitste blok en de kolommenindeling. Met een splitsingsblok ben je beperkt tot tekst- en beeldcontent in twee kolommen, maar kun je de breedte van elke kolom precies aanpassen.

Met een kolomindeling kun je elk type content aan elke kolom toevoegen, maar ben je beperkt tot een handvol vooraf geselecteerde kolombreedtes. De kolomindeling is geschikt voor één tot vier kolommen.

Zodra je kolommen hebt toegevoegd aan je template, vul je iedere kolom met je contentblokken. Je bent niet beperkt tot slechts één contentblok per kolom: voeg zo veel contentblokken toe als je wilt, boven op elkaar gestapeld.

Video

Videoblokken geven de indruk van een video die is ingesloten in een e-mail. Als een ontvanger op de afspeelknop klikt, wordt er een nieuw tabblad geopend en wordt de video afgespeeld.

Om een videoblok toe te voegen, kopieer je de URL van de video van YouTube, Vimeo, TikTok of het videohostingplatform van je keuze. Als je video van YouTube komt, selecteert Klaviyo automatisch een thumbnailafbeelding.

Als je een video van een andere bron gebruikt, moet je ook een thumbnailafbeelding uploaden. Op de videothumbnail wordt een afspeelknop geplaatst, die je desgewenst kunt verwijderen in de blokinstellingen.

Waarom wordt de video niet rechtstreeks in de e-mail afgespeeld?

De meeste grote e-mailclients (zoals Gmail) zien ingesloten content zoals video's als een beveiligingsrisico. Deze e-mailclients verwijderen deze ingesloten code vaak volledig en voor je ontvangers wordt je content niet gerenderd wanneer ze je e-mail openen.

Klaviyo wil dat klanten succesvol zijn. Omdat uit onze tests blijkt dat video niet betrouwbaar wordt gerenderd in alle grote e-mailclients, bieden we geen ondersteuning voor rechtstreeks ingesloten video's.

Universele content

Je kunt blokken of secties in een template opslaan voor gebruik in andere templates met behulp van het sterretje. Als je een blok of sectie opslaat, verschijnt het in het tabblad Universeel van je e-mailtemplate-blokken. Wanneer je wijzigingen aanbrengt in een universeel blok of sectie, kun je kiezen om deze wijzigingen toe te passen op alle instanties van de opgeslagen content.

Meer informatie over het gebruik van opgeslagen universele content.

Ongedaan maken en opnieuw uitvoeren

Als je een fout maakt tijdens het bewerken van je template, gebruik je de knop Ongedaan maken om de fout ongedaan te maken. Je kunt ook de knop Opnieuw uitvoeren gebruiken om die wijziging ongedaan te maken. Je template wordt automatisch opgeslagen tijdens je bewerkingssessie en de knoppen Ongedaan maken/Opnieuw uitvoeren leggen je wijzigingen vast terwijl je de template bewerkt. Wijzigingen tijdens eerdere bewerkingssessies kun je echter niet meer ongedaan maken. Als je de template sluit en er later naar terugkeert, is de knop Ongedaan maken uitgeschakeld totdat je weer wijzigingen aanbrengt.

Een voorbeeld van je e-mail bekijken

Gebruik de knop Voorbeeld weergeven en testen om een voorbeeld te bekijken van hoe je e-mail eruitziet in de inbox van een ontvanger. Als je een e-mail maakt in het tabblad E-mailtemplates, zorg er dan voor dat je een voorbeeld van je e-mail bekijkt waarin je ziet hoe deze wordt ontvangen. Gebruik de onderstaande tabel om te bepalen wat de beste manier is om een voorbeeld te bekijken.