HTML gebruiken in e-mail templates

Wil je meer flexibiliteit en controle over de opmaak van je e-mails? Dan kun je HTML gebruiken in je templates. HTML (HyperText Markup Language) is de codetaal die wordt gebruikt om webpagina's en e-mails te structureren en op te maken.

HTML in MarktMentor

MarktMentor's drag-en-drop editor biedt een HTML-blok waarmee je je eigen HTML-code kunt toevoegen aan je templates. Dit geeft je de mogelijkheid om:

Complexe layouts te creëren: Bouw e-mails met meerdere kolommen, tabellen en andere geavanceerde elementen.
Dynamische inhoud toe te voegen: Gebruik variabelen en scripts om gepersonaliseerde en dynamische content te tonen.
Je eigen stijl toe te passen: Pas de stijl van je e-mails aan met CSS (Cascading Style Sheets).

Voorbeeld: Productafbeelding met titel

Een veelvoorkomend gebruik van HTML in MarktMentor is het toevoegen van een productafbeelding met titel. Dit zorgt ervoor dat de klant direct een visuele weergave van het product ziet in de e-mail.

Hieronder een voorbeeld van de HTML-code die je kunt gebruiken:

HTML

<table style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; min-height: 5rem; border-radius: 10px;overflow: hidden; vertical-align: middle; width: 100%; border: 5px solid #236FA1;"> <tbody> <tr style="display: block; padding: 10px;"> <td width="80px" align="center"> <img width="80" style="margin-right: 10px; display: block; max-width: 80px; max-height: 80px;" src="https://dashboard.marktmentor.nl/placeholder-product.png" alt=""/> </td> <td style="vertical-align: top; font-family: sans-serif; font-size: 16px;"> <p><strong>{{product.title}}</strong></p> </td> </tr> </tbody> </table>

HTML aanpassen

Je kunt de HTML-code aanpassen aan je eigen wensen en huisstijl. Enkele voorbeelden:

Lettertype: Verander het lettertype door de font-family stijl aan te passen, bijvoorbeeld: font-family: Arial, sans-serif;.
Lettergrootte: Verander de lettergrootte door de font-size stijl aan te passen, bijvoorbeeld: font-size: 14px;.
Kleur: Verander de tekstkleur door de color stijl aan te passen, bijvoorbeeld: color: #FF0000; (rood).
Afbeelding: Vervang de URL van de afbeelding (src) door de URL van je eigen afbeelding of een variabele zoals {{ product.image }}.
Rand: Pas de stijl van de rand aan door de border stijl te wijzigen, bijvoorbeeld: border: 2px dashed #0000FF; (blauwe stippellijn).

Tips voor het gebruik van HTML

Kennis van HTML: Zorg ervoor dat je basiskennis hebt van HTML voordat je HTML-code toevoegt aan je templates.
Test je e-mails: Controleer altijd hoe de HTML-code wordt weergegeven in verschillende e-mailprogramma's en op verschillende apparaten.
Gebruik HTML spaarzaam: Gebruik HTML alleen voor elementen die je niet kunt toevoegen met de drag-en-drop editor.