E-mail marketing: HTML-sjablonen en -campagnes importeren

Met geïmporteerde HTML-e-mailsjablonen en campagnes in Voluit Suite hergebruik je bestaande ontwerpen zonder ze helemaal opnieuw op te bouwen. Met de code-editor (Code Editor) plak je HTML-code rechtstreeks in een e-mailsjabloon of campagne. Daarna bekijk je een voorbeeld van de e-mail. Zo behoud je de herkenbare stijl van je merk en maak je sneller nieuwe e-mails. In dit artikel lees je hoe je HTML-e-mails voorbereidt, importeert, opslaat en test.

Wat betekent HTML-e-mails importeren?

Een HTML-e-mail importeren betekent dat je bestaande HTML-code toevoegt aan de e-mailbouwer (Email Builder) van Voluit Suite. In plaats van de e-mail opnieuw op te bouwen met losse ontwerpelementen, gebruik je de code-editor om de HTML-structuur en opmaak rechtstreeks te bewerken.

Dit is handig als je e-mails vanuit een ander platform overzet, zelf ontworpen e-mails opnieuw wilt gebruiken of de stijl van je merk in verschillende campagnes wilt behouden.

Je kunt HTML-e-mails op twee plekken importeren:

E-mailsjablonen: herbruikbare ontwerpen die je als basis voor toekomstige campagnes kunt gebruiken.
E-mailcampagnes: e-mails die je kunt aanpassen en naar specifieke ontvangers kunt versturen of inplannen.

De code-editor geeft je rechtstreeks toegang tot de HTML. Gebruik deze editor als je de broncode van de e-mail al hebt.

Voordelen van HTML-e-mails importeren

Bestaande HTML-e-mails importeren scheelt werk en helpt de structuur en uitstraling van je ontwerp te behouden.

Tijd besparen: hergebruik bestaande ontwerpen zonder elk onderdeel opnieuw op te bouwen.
Een herkenbare merkstijl behouden: behoud de bedoelde kleuren, indeling, afbeeldingen en typografie, voor zover de e-mailprogramma's die ondersteunen.
E-mails overzetten: neem ontwerpen van een ander platform mee naar Voluit Suite met de HTML-broncode.
HTML rechtstreeks aanpassen: bewerk de structuur en opmaak van de e-mail in de code-editor.
Herbruikbare sjablonen maken: sla geïmporteerde HTML op als sjabloon voor toekomstige e-mailcampagnes.
Campagnes sneller maken: begin met bestaande HTML in plaats van met een leeg ontwerp.

De code-editor

Met de code-editor maak en bewerk je e-mails met HTML. Je hoeft dus niet alleen met sleepbare ontwerpelementen te werken. Kies de editor die past bij wat je wilt aanpassen:

Code-editor (Code Editor): voor als je de volledige HTML-code van een e-mail hebt en de broncode rechtstreeks wilt bewerken.
Ontwerpeditor (Design Editor): voor visueel bewerken met sleepbare elementen, zoals tekst, afbeeldingen, knoppen en indelingen.
Code-element (Code Element): om een stukje HTML of CSS toe te voegen aan een e-mail die je in de ontwerpeditor hebt gemaakt.
Editor voor platte tekst (Plain Text Editor): voor e-mails met alleen tekst en zonder uitgebreide visuele indeling.

Heb je bijvoorbeeld een volledige HTML-nieuwsbrief uit een ander platform? Gebruik dan de code-editor. Wil je alleen een klein HTML-onderdeel toevoegen aan een e-mail die je visueel hebt opgebouwd? Dan kun je het code-element gebruiken.

Let op: e-mailprogramma's ondersteunen HTML en CSS niet allemaal op dezelfde manier. Daardoor wordt een geïmporteerd ontwerp niet in elke inbox precies hetzelfde weergegeven.

E-mailsjablonen of e-mailcampagnes?

E-mailsjablonen en campagnes hebben verschillende doelen. Kies voordat je HTML importeert of je het ontwerp wilt bewaren voor hergebruik of wilt klaarmaken voor een specifieke campagne.

E-mailsjablonen

Een e-mailsjabloon is een herbruikbare indeling met bijvoorbeeld je huisstijl, inhoud, opmaak en ontwerpelementen.

Gebruik een sjabloon als:

je regelmatig e-mails met een vergelijkbare indeling verstuurt;
je een nieuwsbrief- of promotieontwerp opnieuw wilt gebruiken;
je een vaste basis wilt voor toekomstige campagnes;
je herkenbare e-mailontwerpen wilt behouden.

E-mailcampagnes

Een campagne is een e-mail die je voor specifieke ontvangers wilt versturen of inplannen.

Gebruik een campagne als:

je een eenmalige marketingaankondiging voorbereidt;
je een promotionele e-mail naar geselecteerde contacten wilt sturen;
je HTML-e-mail klaarstaat voor een specifieke campagne;
je ontvangers en verzendinstellingen wilt instellen.

Voorbeeld: wil je een aangepaste HTML-nieuwsbrief elke maand opnieuw gebruiken? Importeer die dan als sjabloon. Heb je een HTML-e-mail voor een aankomende promotie? Dan kun je die rechtstreeks in een campagne importeren.

HTML-e-mailsjablonen importeren

Als je HTML als e-mailsjabloon importeert, kun je het ontwerp in Voluit Suite bewaren en later opnieuw gebruiken. Zo hoef je veelgebruikte indelingen niet telkens opnieuw te maken.

Volg deze stappen om een HTML-e-mailsjabloon te importeren:

Log in op je account in Voluit Suite.
Ga naar Marketing → E-mails (Emails) → Sjablonen (Templates).
Klik op + Nieuw (+ New) om een e-mailsjabloon te maken.
Kies de optie om een nieuw e-mailsjabloon vanaf nul te maken. Krijg je eerst een scherm met sjabloonkeuzes te zien? Kies dan een leeg sjabloon.
Kies bij de editorselectie Bewerken met Vibe Editor (Edit with Vibe Editor) om rechtstreeks met HTML te werken.
Plak je bestaande HTML-code in het HTML-bewerkingsveld zodra de code-editor opent.
Bekijk het voorbeeld van de e-mail. Controleer of de indeling, tekst, afbeeldingen en opmaak er goed uitzien.
Pas de HTML-code zo nodig aan en controleer het voorbeeld opnieuw.
Klik op Sjabloon opslaan (Save Template) of gebruik de beschikbare opslagknop.

Je geïmporteerde HTML-sjabloon is nu klaar om te controleren, te testen en te gebruiken voor toekomstige e-mailcampagnes.

HTML-e-mailcampagnes importeren

Als je HTML rechtstreeks in een e-mailcampagne importeert, kun je een bestaand ontwerp klaarmaken voor een specifieke doelgroep of marketingactie. Dit is handig als je HTML al klaar is en de e-mail wilt instellen zonder eerst een apart herbruikbaar sjabloon te maken.

Volg deze stappen om een HTML-e-mailcampagne te importeren:

Log in op je account in Voluit Suite.
Ga naar Marketing → E-mails (Emails) → Campagnes (Campaigns).
Klik op + Nieuw (+ New) om een campagne te maken.
Kies een lege campagne in plaats van een opgeslagen sjabloon.
Kies bij de editorselectie Code-editor (Code Editor).
Plak je bestaande HTML-code in de code-editor.
Bekijk het voorbeeld en controleer of de e-mail er goed uitziet.
Pas zo nodig de HTML aan, bijvoorbeeld de tekst, links, afbeeldingen en opmaak.
Sla de campagne op met de beschikbare opslagknop.
Bekijk en test de e-mail voordat je verdergaat met Verzenden of inplannen (Send or Schedule).
Stel de afzendergegevens, ontvangers en verzendinstellingen in. Controleer de campagne voordat je de e-mail verstuurt.

Let op: door HTML in een campagne te importeren, wordt de e-mail niet automatisch verstuurd. Je moet het verzenden of inplannen van de campagne zelf afronden.

Geïmporteerde HTML-e-mails bekijken en testen

Bekijk een geïmporteerde HTML-e-mail voordat je die verstuurt. Zo kun je problemen met de indeling of opmaak opsporen. Testen is vooral belangrijk bij zelfgeschreven HTML, omdat e-mailprogramma's HTML, CSS, afbeeldingen en andere onderdelen verschillend kunnen weergeven.

Klik rechtsboven in de e-mailbouwer op Voorbeeld (Preview).
Bekijk de indeling op Desktop, Tablet en Mobiel (Mobile).
Controleer de opmaak, afbeeldingen, knoppen, tekstuitlijning en witruimte.

Een testmail versturen

Klik naast Voorbeeld op het menu met drie puntjes.
Kies Testmail (Test Email).
Vul de gevraagde gegevens voor de testmail in:
- E-mailadres afzender (Sender Email)
- Naam afzender (Sender Name)
- E-mailadres ontvanger (Receiver Email)
- Voorbeeldtekst (Preview Text)
- Onderwerp (Email Subject)
Klik op Testmail versturen (Send Test Email).
Open de testmail in je inbox en controleer het bericht.

Problemen met geïmporteerde HTML-e-mails oplossen

Een geïmporteerde HTML-e-mail kan aanpassingen nodig hebben, omdat e-mailprogramma's HTML en CSS niet allemaal op dezelfde manier weergeven. Met deze controles kun je veelvoorkomende weergaveproblemen oplossen voordat je de e-mail verstuurt.

Afbeeldingen worden niet weergegeven: controleer of de afbeeldingslinks kloppen en openbaar toegankelijk zijn. Gebruik HTTPS-links.

De indeling van de e-mail is verstoord: controleer of de HTML-tags ontbreken of verkeerd zijn genest. Kijk ook of de gebruikte CSS werkt in gangbare e-mailprogramma's.

Lettertypen of opmaak zien er anders uit: controleer of het ontvangende e-mailprogramma de gebruikte CSS ondersteunt. Gebruik geschikte vervangende lettertypen.

Links of knoppen werken niet: controleer of elke link naar de juiste bestemming verwijst. Gebruik volledige URL's, inclusief het voorvoegsel https://.

Personalisatievelden worden niet goed weergegeven: controleer of de HTML samenvoegvelden van je vorige e-mailplatform bevat. Vervang niet-ondersteunde platformvariabelen door de juiste aangepaste waarden in Voluit Suite.

Het voorbeeld komt niet overeen met de ontvangen e-mail: bekijk de e-mail in verschillende inboxen. Controleer of onderdelen van de HTML of CSS niet worden ondersteund.

Veelgestelde vragen

V: Kan ik HTML uit elk e-mailmarketingplatform importeren?

Antwoord: Ja, als je de geschikte HTML-broncode van de e-mail kunt ophalen. Soms moet je platformgebonden HTML aanpassen voordat die goed wordt weergegeven in Voluit Suite.

V: Wordt mijn e-mail automatisch bijgewerkt als het oorspronkelijke ontwerp verandert?

Antwoord: Nee. Bij het handmatig importeren van HTML wordt de e-mail niet automatisch gesynchroniseerd. Verandert de oorspronkelijke HTML, pas de inhoud dan ook aan in Voluit Suite.

V: Kan ik geïmporteerde HTML-e-mails gebruiken in automatiseringen?

Antwoord: Opgeslagen e-mailsjablonen kun je gebruiken in ondersteunde automatiseringen van Voluit Suite. Controleer de e-mailactie in de automatisering en test de personalisatie voordat je de automatisering activeert.

V: Moet ik kunnen programmeren om een HTML-e-mail te importeren?

Antwoord: Je hoeft geen HTML vanaf nul te schrijven als je de juiste broncode al hebt. Basiskennis van HTML en CSS helpt wel als je opmaakproblemen wilt oplossen of het ontwerp wilt aanpassen.

V: Waarom ziet mijn e-mail er anders uit in Gmail en Outlook?

Antwoord: E-mailprogramma's geven HTML en CSS verschillend weer en ondersteunen niet allemaal dezelfde functies. Gebruik code die geschikt is voor e-mail en verstuur testmails naar de inboxen die je doelgroep gebruikt.

V: Kan ik een volledige HTML-e-mail importeren met het code-element?

Antwoord: Het code-element is bedoeld voor kleine HTML- of CSS-onderdelen in een indeling die je met de ontwerpeditor hebt gemaakt. Voor een volledige, zelfgeschreven e-mail gebruik je de volledige code-editor.

V: Wat kan ik doen als een eerder gebruikte e-mail kapotte personalisatietags bevat?

Antwoord: Controleer de HTML op samenvoegvelden of dynamische waarden van het oorspronkelijke e-mailplatform. Vervang die door de juiste aangepaste waarden in Voluit Suite en test het resultaat voordat je de e-mail verstuurt.