De email builder uitgelegd
Wat is de Email Builder Inline Editor?
Maak sneller en makkelijker e-mails met de inline editor in de Email Builder voor Templates en Campagnes. De editor werkt snel en intuïtief, zodat je direct kunt zien hoe je e-mail eruit komt te zien.
Wat is de Email Builder Inline Editor?
De Email Builder Inline Editor werkt volgens het WYSIWYG-principe (What You See Is What You Get). Je ziet direct hoe je e-mail eruit komt te zien terwijl je tekst vet maakt, afbeeldingen toevoegt of koppen een andere kleur geeft. Zo kun je snel en efficiënt professionele e-mails maken.
Met de inline editor heb je volledige controle over je content. De editor heeft ook AI-ondersteuning om sneller aansprekende e-mailteksten te maken.
Let op:
We hebben standaard padding ingesteld voor een uniforme structuur in je e-mails. Je kunt de ruimte rond content nu zelf aanpassen. De standaardinstellingen zijn: Top: 12 Bottom: 12 Links: 24 Rechts: 24 Hiermee heb je meer controle over de lay-out van je e-mail.
De Email Builder en Inline Editor gebruiken
Ga naar "Marketing" > "Emails" > "Templates"
Hier maak je een nieuwe template.
Of pas je een bestaande aan door op de naam van de template te klikken.
Je kunt ook een email sjabloon of email template kopiëren en die aanpassen. Klik dan op de 3 puntjes naast de naam van de template en daarna in het popup menu op Clone.
De interface gebruiken
In de Email Builder vind je links een werkbalk met verschillende functies:
Met de knop 'Elementen toevoegen' voeg je nieuwe content toe aan je e-mail, zoals tekst, afbeeldingen en andere onderdelen.
Via 'Elementen beheren' zie je een overzicht van alle elementen in je e-mail. Hier kun je ze selecteren en aanpassen.
Met 'Vormgeving' bepaal je de algemene stijl van je e-mail, zoals achtergrondkleur, scheidingslijnen, aangepaste CSS en mobiele weergave.
Deze functies geven je volledige controle over het ontwerp van je e-mail.
Elementen toevoegen
Als je op 'Elementen toevoegen' klikt, krijg je een lijst met content types die je kunt toevoegen:
Tekst
Alle elementen kun je in je email slepen, daarna verschijnen instel opties van dat element.
Met het tekstelement maak je koppen, alinea's en bijschriften. In de editor pas je lettertype, kleur en uitlijning aan.
Afbeelding
Voor foto's en andere afbeeldingen gebruik je het afbeeldingselement. Upload direct vanaf je computer of voeg een link toe.
Upload: Voeg een afbeelding toe vanaf je apparaat. Maximum grootte is 10MB voor hoge resolutie foto's.
URL: Voeg een afbeelding toe via een externe link of uit de mediabibliotheek van je CRM.
Alt tekst: Deze tekst beschrijft je afbeelding voor screenreaders of als de afbeelding niet laadt.
Link: Optioneel kun je een URL toevoegen waar mensen naartoe gaan als ze op de afbeelding klikken.
Breedte en hoogte: Bepaal de afmetingen. Kies vaste waardes of automatische aanpassing op basis van de originele verhoudingen.
Ruimte: Pas de ruimte rond je afbeelding aan met padding aan alle kanten.
Uitlijning: Kies tussen links, midden of rechts uitlijnen in het containervak.
Knop
Met knoppen maak je interactieve elementen. Link naar een webpagina, start een download of voer een andere actie uit.
Knoptekst: Vul hier de tekst in die je op de knop wilt tonen. Bijvoorbeeld 'Volg ons' voor een link naar social media.
Lettertype en grootte: Kies een lettertype en grootte die past bij je e-mail. Arial 14px is een veel gebruikte combinatie.
Tekstkleur: Kies de kleur van je knoptekst met een hexadecimale code, zoals '#ffffff' voor wit.
Acties:
- URL: De meest gebruikte optie. Voer de URL in waar je naartoe wilt linken
- Mail: Opent het e-mailprogramma van de ontvanger. Je kunt een standaard e-mailadres invullen
- Bestand downloaden: Koppel een downloadlink aan de knop
- Telefoon: Voor mobiele gebruikers. De ontvanger kan direct bellen naar het ingevulde nummer
- Anders: Voor andere acties die niet onder bovenstaande opties vallen
Uitlijning: Kies tussen links, midden of rechts uitlijnen
Volledige breedte: Schakel deze optie in als je knop de hele breedte moet vullen
Achtergrondkleur: Kies de achtergrondkleur met een hexadecimale code, zoals '#000000' voor zwart
Afgeronde hoeken: Pas de radius aan voor rondere hoeken. Een waarde van 75 geeft een pilvorm
Ruimte: Bepaal de ruimte tussen knoptekst en rand met padding-waardes
Scheidingslijn
Met een scheidingslijn maak je duidelijke secties in je e-mail. Je kunt de kleur, breedte en stijl aanpassen.
Hoogte: Bepaal de dikte van de lijn. Een waarde van 2 geeft een medium lijn
Breedte (%): Stel in hoe breed de lijn moet zijn. 100% is de volledige containerbreedte
Lijntype: Kies tussen doorgetrokken, gestippeld of gestreept
Uitlijning: Plaats de lijn links, midden of rechts
Kleur: Kies een kleur met een hexadecimale code, zoals '#FED7E2' voor zachtroze
Ruimte: Pas de ruimte rond de lijn aan met padding-waardes
Social media
Voeg social media-iconen toe met links naar je profielen
Social media toevoegen: Klik het platform aan en voer je profielnaam of URL in. Je kunt onder andere Facebook, Instagram en Twitter toevoegen.
Vormgeving: Je kunt kiezen uit verschillende stijlen en vormen voor de iconen. Pas ook de weergave aan: alleen icoon, alleen tekst of beide.
Layout aanpassen:
- Uitlijning: Links, midden of rechts
- Lettertype en kleur: Voor de platformnamen
- Grootte: Van de iconen
- Ruimte: Tussen de iconen en andere elementen
Bekijk in browser/ preview in browser
Nieuwe e-mailtemplates hebben standaard een "Preview in browser" link bovenaan.
Voor bestaande campagnes/templates:
- Open een campagne/template in e-mailmarketing
- Voeg het Preview URL element toe
- Pas de tekststijl aan via de link-opties
Testen:
- Bekijk de preview en klik op de preview-link voor de browserversie
- Of verstuur een test e-mail en klik op de browser-link
Footer
In de footer plaats je belangrijke informatie zoals contactgegevens, adres en uitschrijflink.
Tekst bewerken:
- Klik op de tekst om de editor te openen
- Pas lettertype, grootte en kleur aan
- Maak tekst vet, cursief of onderstreept
- Voeg links toe naar je website of voorwaarden
- Stel uitlijning en regelafstand in
Code
Met het Code-element kun je aangepaste HTML toevoegen voor geavanceerde layouts.
Let op:
Het Code-blok is bedoeld voor gebruikers die bekend zijn met HTML. We raden aan om eerst de basis van HTML te leren via onze handleidingen: HTML Email Basics Using Code Blocks
Test je e-mails altijd voordat je ze verstuurt, omdat e-mailprogramma's HTML en CSS verschillend kunnen weergeven.
Video
Voeg video's toe aan je e-mails door ze te koppelen aan je gehoste video-content.
Videoplatform: Kies waar je video staat. Dit kan YouTube, Vimeo, Wistia of HTML5 video zijn.
Video URL: Plak de directe link naar je video.
Thumbnail: Deze afbeelding zien mensen voordat ze de video afspelen. Upload een eigen thumbnail (max 10MB) of gebruik een URL, bijvoorbeeld uit je Mediabibliotheek.
Afmetingen: Stel de breedte en hoogte in. Met 'auto' past de video zich automatisch aan.
Afspeelknop grootte: Kies tussen Klein, Middel of Groot.
Afspeelknop transparantie: Pas aan hoe zichtbaar de afspeelknop is.
Ruimte: Bepaal de ruimte rond je video met padding-waardes.
Winkelwagen
Met het Winkelwagen-element toon je productdetails, prijzen en links naar je webshop.
Zo pas je dit aan:
Ruimte: Stel de padding in voor boven, onder, links en rechts.
Lettertype: Kies een lettertype dat past bij je e-mail.
Tekstkleur: Pas de kleur aan, bijvoorbeeld zwart (#000).
Achtergrondkleur: Kies een achtergrond die de tekst goed leesbaar maakt.
Per product kun je weergeven:
Productnaam: Zoals het op je website staat
Prijs: De prijs per stuk
Aantal: Hoeveel er besteld is
Totaal: Prijs x Aantal
RSS Header
De RSS Header haalt automatisch informatie uit de tags van je RSS Feed voor je e-mail.paign.
Dit zijn de RSS tags die je kunt gebruiken:
<title> wordt {{rss_feed.title}}
<description> wordt {{rss_feed.description}}
<link> wordt {{rss_feed.url}}
<lastBuildDate> wordt {{rss_feed.date}}
Je kunt kiezen tussen 'Basis' en 'Aangepast' bij het RSS Header blok.
'Basis' voegt deze niet-bewerkbare tekst toe:
<h1 class="h1">{{rss_feed.title}}</h1> {{rss_feed.description}}<br /> <br />
'Aangepast' voegt deze bewerkbare tekst toe:
Updates van {{rss_feed.url}} <h1>{{rss_feed.title}}</h1> <strong>{{rss_feed.description}}</strong><br /> <br /> <strong>In de editie van {{rss_feed.date}}:</strong><br />
Je kunt deze RSS variabelen ook in het onderwerp van je e-mail gebruiken.
RSS Items
Met RSS Items haal je automatisch content uit je RSS feed naar je e-mail. Dit kunnen blogposts, nieuws-updates of artikelen zijn.
Je hebt deze opties voor RSS Items:
Samenvattingen: Toont een kort stukje tekst van elk RSS item. Lezers kunnen doorklikken naar je website voor het volledige artikel.
Samenvattingen met afbeelding: Zoals hierboven, maar met een afbeelding bij elk item voor meer visuele impact.
Titel: Toont alleen de titel van elk RSS item.
Volledige content: Importeert de hele tekst van elk RSS item in je e-mail.
Aangepast: Kies zelf welke informatie je wilt tonen en hoe.
Deze elementen kun je automatisch importeren:
Titel ({{rss_item.title}})
Samenvatting of beschrijving ({{rss_item.content}})
Link naar het originele artikel ({{rss_item.url}})
Publicatiedatum ({{rss_item.date}})
Auteur ({{rss_item.author}})
Je bepaalt zelf hoe de items worden weergegeven. Kies voor alleen de titel, een samenvatting, of voeg een link toe naar het volledige artikel.
Je kunt ook de ruimte rond de items aanpassen en kiezen of je afbeeldingen wilt tonen.
Layouts
Met layouts bepaal je hoe je e-mail er uit ziet. Je kunt kiezen tussen één kolom of meerdere kolommen.
Dit zijn de verschillende layouts die je kunt gebruiken:
1 kolom: Een enkele kolom waarin alle content onder elkaar staat. Dit is de meest gebruikte layout en zorgt voor goede leesbaarheid op mobiele apparaten.
2 kolommen: Hiermee verdeel je je content in twee verticale kolommen. Perfect voor het tonen van een afbeelding naast een tekst of twee artikelen naast elkaar.
1/3 : 2/3 en 2/3 : 1/3: Deze layouts verdelen je content in twee ongelijke kolommen. Bij 1/3 : 2/3 neemt één kolom 1/3 van de breedte in en de andere 2/3. Bij 2/3 : 1/3 is dit andersom. Gebruik dit als je één stuk content meer wilt benadrukken.
1/4 : 3/4 en 3/4 : 1/4: Vergelijkbaar met bovenstaande, maar hier neemt één kolom 1/4 van de ruimte in en de andere 3/4. Ideaal voor bijvoorbeeld een klein menu naast een groot contentgebied.
4 kolommen: Verdeelt je content in vier gelijke kolommen. Handig voor het tonen van meerdere afbeeldingen of artikelen naast elkaar.
Tekst opmaken
Met de inline editor bewerk je snel tekst. Als je tekst selecteert, verschijnen direct alle opmaakopties:
- Kopteksten aanpassen
- Lettertype, tekstgrootte en kleur wijzigen
- Tekst vet, cursief, onderstreept of doorgestreept maken
- Links toevoegen met aangepaste tekst en URL
Links toevoegen/bewerken: Hier kun je een nieuwe link toevoegen of een bestaande link aanpassen.
Link URL: Het webadres waar je naartoe wilt linken. Dit kan een webpagina of downloadbaar bestand zijn. Controleer altijd of de URL werkt.
Weergavetekst: De tekst die klikbaar wordt in je e-mail, zoals "Lees meer" of "Download". Houd deze tekst kort en duidelijk.
Titel: Een optionele tooltip die verschijnt als iemand over de link zweeft. Hiermee kun je extra context geven over waar de link naartoe gaat.
Link in nieuw venster: Als je deze optie aan zet, opent de link in een nieuw browsertabblad. Handig als je wilt dat lezers je e-mail kunnen blijven lezen.
Link lijst: Een overzicht van je eerder gebruikte links voor snelle toegang.
Je kunt ook de uitlijning en regelafstand aanpassen of opsommingstekens toevoegen.
Dit zijn de verschillende opsommingstekens:
Disc: Een gevulde cirkel (standaard).
Circle: Een lege cirkel voor sub-punten.
Square: Een gevuld vierkant als alternatief.
Decimal: Nummers (1, 2, 3) voor volgorde.
Lower Alpha: Kleine letters (a, b, c) voor sub-punten.
Lower Greek: Kleine Griekse letters als alternatief.
Lower Roman: Kleine Romeinse cijfers (i, ii, iii).
Upper Alpha: Hoofdletters (A, B, C) voor hoofdpunten.
Upper Roman: Grote Romeinse cijfers (I, II, III).
Geavanceerde opties
Opmaak wissen:
Met 'Opmaak wissen' verwijder je alle opmaak van je tekst. Dit is vooral praktisch als je tekst kopieert van ergens anders.
Persoonlijke gegevens:
Voeg gegevens van je ontvangers toe zoals hun naam of locatie om je e-mails persoonlijker te maken.
Trigger-links:
Voeg links toe waarmee ontvangers direct actie kunnen ondernemen, zoals het bevestigen van hun inschrijving of het bekijken van een aanbieding.
Content AI:
De 'ContentAI' functie helpt je bij het maken van teksten. Geef een titel, beschrijving en zoekwoorden op en de AI maakt passende content voor je.
Context: Hier geef je aan waar je content over moet gaan. Dit helpt de AI om de juiste richting te kiezen. Hoe specifieker je bent, hoe beter het resultaat.
Titel: Vul hier het hoofdonderwerp in van de content die je wilt maken, zoals een blogtitel of onderwerp van een e-mail.
Beschrijving: Geef een korte uitleg van wat je wilt dat de content bevat, inclusief specifieke details of invalshoeken.
Trefwoorden: Voeg relevante woorden toe die de AI kan verwerken in de tekst. Dit helpt ook voor SEO-doeleinden.
Schrijfstijl: Kies tussen verschillende stijlen zoals professioneel, vriendelijk of formeel. De AI past de tekst hierop aan.
Aantal variaties: Kies hoeveel verschillende versies je wilt (maximaal 5) zodat je de beste kunt kiezen.
Elementen beheren
Met 'Elementen beheren' bepaal je wat zichtbaar is op desktop en mobiel.
Je kunt per element instellen of het getoond wordt op desktop, mobiel of beide.
Voor mobiel kun je elementen verbergen of aanpassen als ze niet goed werken op kleine schermen. Ook kun je de lay-out aanpassen voor betere mobiele weergave.
Op desktop heb je meer ruimte voor extra elementen die op mobiel minder goed werken, zoals hover-effecten.
Je kunt elk element apart bewerken en de eigenschappen aanpassen.
Als een element niet in je e-mail past, kun je het verwijderen via 'Elementen beheren'.
Als je over een sectie, kolom of element zweeft en erop klikt in het menu, scrollt het scherm automatisch naar dat onderdeel.
Vormgeving aanpassen
Bij 'Vormgeving' pas je het uiterlijk van je template aan.
Template:
Hier kies je kleuren, voeg je een achtergrondafbeelding toe en stel je de breedte van je e-mail in.
Achtergrondkleur: Dit is de kleur achter je e-mailinhoud. Kies een kleur die past bij je boodschap en die de leesbaarheid verbetert.
Body kleur: De kleur van het gebied waar je tekst en afbeeldingen staan. Zorg voor voldoende contrast met je content.
Content breedte: Standaard staat dit op 600 pixels. Je kunt dit aanpassen aan je ontwerp, maar let op dat brede content niet altijd goed werkt op mobiel.
Achtergrondafbeelding: Upload een afbeelding voor je e-mailachtergrond. Stel ook een achtergrondkleur in als backup, want niet alle e-mailprogramma's tonen achtergrondafbeeldingen.
Gebruik geoptimaliseerde afbeeldingen voor snelle laadtijd en goede weergave.
Achtergrondafbeelding URL: Voer een URL in van een online afbeelding of uit je Voluit Suite mediabibliotheek. Gebruik een veilige (HTTPS) URL voor correcte weergave.
Knop:
Hier pas je de stijl van je actieknoppen aan.
Hoeken: Bepaal hoe rond je knoppen zijn. Een waarde van 9 geeft afgeronde hoeken.
Knopkleur: Kies een kleur die past bij je huisstijl.
Lettertype: Kies het type en de grootte van je knoptekst.
Tekststijl:
Je kunt aparte kleuren instellen voor vetgedrukte, schuine en onderstreepte tekst in je knop.
Scheidingslijn:
Voeg lijnen toe om je e-mailinhoud te structureren.
Hoogte: Standaard is dit 2 pixels. Pas aan voor dikkere of dunnere lijnen.
Kleur: Kies een kleur die past bij je e-mailontwerp.
Stijl: Bepaal het uiterlijk van je scheidingslijn.
Aangepaste CSS:
Voeg eigen CSS-stijlen toe voor verdere aanpassingen. Let op: CSS werkt anders in e-mails dan op websites door verschillende e-mailprogramma's.
Handige bronnen voor e-mail CSS:
- CSS Tricks: Informatie over CSS in e-mails
- Litmus: Tips voor e-mailcodering
- Smashing Magazine: HTML E-mail Handleiding: Overzicht van HTML en CSS in e-mails
- MDN Web Docs: CSS: Uitleg over CSS custom properties
- E-mail Design Workshop: Basis CSS voor e-mails
- Can I email...: Check welke CSS-eigenschappen werken in e-mailprogramma's
Mobiele weergave
De Email Builder heeft een apart gedeelte voor mobiele weergave. Hier bepaal je welke koppen, tekst en knoppen zichtbaar zijn op mobiele apparaten.
Deze instellingen zijn alleen van toepassing op de mobiele weergave van je e-mailtemplate en werken in e-mailclients die media queries ondersteunen.
Koptekst H1:
Lettergrootte: Maak je hoofdkop groot genoeg om op te vallen, maar niet zo groot dat deze het scherm domineert. Een goed evenwicht is belangrijk voor kleine schermen.
Uitlijning: Centreren werkt vaak goed voor mobiel omdat dit past bij de verticale weergave.
Regelhoogte: Gebruik 1.5 voor goede leesbaarheid op kleine schermen.
Koptekst H2:
Lettergrootte: Kleiner dan H1, maar groot genoeg om de hiërarchie duidelijk te maken.
Uitlijning: Centreren werkt meestal goed, pas aan waar nodig.
Regelhoogte: Zorg voor voldoende ruimte tussen regels voor leesbaarheid.
Koptekst H3:
Lettergrootte: Kies een formaat dat H3 onderscheidt van H1/H2 maar leesbaar blijft.
Uitlijning: Stem af op je ontwerp, houd het consistent met andere koppen.
Regelhoogte: Zorg voor goede leesbaarheid met voldoende regelafstand.
Paragraaf:
Lettergrootte: Gebruik een iets groter formaat dan op desktop voor betere leesbaarheid.
Uitlijning: Links uitlijnen voor teksten die van links naar rechts lezen.
Regelhoogte: Voldoende regelafstand houdt lange teksten leesbaar.
Knop:
Lettergrootte: Maak tekst groot genoeg om makkelijk te kunnen klikken.
Pas deze instellingen aan op basis van je content en doelgroep voor de beste mobiele weergave.
Tips voor mobiele e-mails
Let op deze punten voor gebruiksvriendelijke mobiele e-mails:
Enkele kolom: Gebruik één kolom voor betere leesbaarheid op kleine schermen.
Afbeeldingen: Kies kleine bestanden voor snelle laadtijd. Gebruik responsieve afbeeldingen die zich aanpassen aan schermgrootte. Voeg alt-tekst toe.
Knoppen: Maak knoppen minimaal 44x44px voor goede clickability op touchscreens.
Tekst: Hou het kort. Gebruik bulletpoints en tussenkopjes voor overzicht.
Responsief ontwerp: Zorg dat je e-mail zich aanpast aan elk schermformaat.
Testen: Test je e-mails op verschillende apparaten en e-mailclients.
Witruimte: Gebruik witruimte voor betere leesbaarheid.
Lettertype: Tekst minimaal 14px, koppen 22px. Vermijd decoratieve fonts.
Call-to-action: Plaats duidelijke CTA's in het midden van het scherm.
Onderwerpregel: Kort en pakkend. Test verschillende versies.
Tekst boven afbeeldingen: Gebruik tekst als belangrijkste communicatiemiddel.
Uitschrijven: Maak uitschrijven makkelijk vindbaar.
Toegankelijkheid: Zorg voor goede contrast en alt-teksten bij afbeeldingen.
Onthoud dat de beste praktijken voor mobiele e-mailconfiguratie kunnen verschillen per doelgroep en type content. Test verschillende benaderingen om te zien wat het beste werkt.
Veelgestelde vragen
V: Hoe kan ik verschillende e-mailelementen testen?
A: De email builder heeft een A/B test functie waarmee je verschillende onderdelen zoals onderwerpregel, inhoud en CTA's kunt testen om te zien wat het beste werkt bij je doelgroep.