Gratis HTML-e-mailtemplates (op basis van tabellen en klaar voor dark mode)
Gratis HTML-e-mailtemplates
Gratis HTML-e-mailtemplates: 8 op basis van tabellen, klaar voor dark mode, kopiëren en plakken | We.Inc
Acht gratis HTML-e-mailtemplates die u op de pagina kunt bewerken en bekijken: welkom, bon, wachtwoordreset, nieuwsbrief, e-mail verifiëren, verzonden, uitnodiging voor een evenement en feedback. Tabel-layout, bulletproof knoppen, ondersteuning voor dark mode en een testchecklist.
Een betrouwbare HTML-e-mail gebruikt geneste tabellen voor de layout, inline styles, een inhoudsbreedte van ongeveer 600 pixels, knoppen gemaakt van links met padding in plaats van afbeeldingen, en alt-tekst op elke afbeelding. De acht templates hieronder volgen die regels, ondersteunen dark mode waar e-mailprogramma's dat toestaan, en kunnen live worden bewerkt en bekeken voordat u ze kopieert.
De acht templates
Template
Verstuurd wanneer
Welkom
Iemand zich aanmeldt
Bon
Een betaling slaagt
Wachtwoordreset
Iemand vraagt om een reset
Nieuwsbrief
Regelmatig nieuws
E-mail verifiëren
Na het aanmelden
Bestelling verzonden
Een bestelling vertrekt
Uitnodiging voor een evenement
Klanten uitnodigen
Verzoek om feedback
Na een bezoek of bestelling
Bewerk de code links van een template en de preview rechts wordt bijgewerkt. De previews worden door uw browser gerenderd, dus zie ze als richtlijn: e-mailprogramma's verschillen, en daarom is de testchecklist onderaan belangrijk.
Kies de template die past bij de e-mail die u nodig hebt.
Wijzig de tekst, links en kleuren in het codevak en bekijk de preview.
Kopieer de HTML naar de optie voor eigen HTML in uw e-mailplatform.
Stuur tests naar echte inboxen op telefoon en desktop, in lichte en donkere modus.
Houd één hoofdactie per e-mail; een tweede knop halveert de aandacht.
Schrijf de preheader bewust; anders tonen e-mailprogramma's de eerste tekst die ze vinden.
Host afbeeldingen op uw eigen domein of uw e-mailplatform, met absolute https-URL's.
Gebruik onze HTML-e-mailtemplatebouwer als u liever een formulier invult.
Veelgestelde vragen
Waarom gebruiken HTML-e-mails nog tabellen?
Sommige e-mailprogramma's, vooral oudere desktopprogramma's, renderen met engines die moderne CSS-layout negeren. Tabellen zijn de enige layoutmethode die in al die programma's werkt.
Hoe laat ik een e-mail werken in dark mode?
Voeg de color-scheme-metatags toe en een prefers-color-scheme-media query met uw donkere kleuren. Programma's die het ondersteunen gebruiken ze; andere kunnen zelf kleuren omkeren, dus vermijd tekst die in afbeeldingen zit en test beide modi.
Mag ik deze templates commercieel gebruiken?
Ja. We schreven ze voor deze pagina; kopieer, wijzig en verstuur ze in elk project.
Wat is een bulletproof knop?
Een knop gemaakt van een link met padding binnen een gekleurde tabelcel in plaats van een afbeelding. Hij blijft zichtbaar en werkt ook als afbeeldingen geblokkeerd zijn.
Platte tekst telt ook
Stuur naast de HTML een versie in platte tekst mee. De meeste e-mailplatforms maken er een aan; lees haar één keer door, want een bon of resetlink moet ook zonder opmaak duidelijk zijn.
Acht templates, live
Welkomstmail
Bedankt de persoon, vertelt wat er nu gebeurt en biedt één duidelijke actie.
Bon
Een geneste tabel houdt productnamen en prijzen in elk programma uitgelijnd, ook in oude desktopprogramma's.
Wachtwoordreset
Kort, met de vervaltijd en wat te doen als de persoon er niet om vroeg. Zet de link ook als tekst erbij, voor programma's die knoppen blokkeren.
Nieuwsbrief
Eén verhaal per blok met een kop, een zin en een link. De afbeeldings-URL hier is een placeholder, dus de preview toont wat lezers zien als afbeeldingen geblokkeerd zijn: de alt-tekst in een vak van de juiste grootte.
E-mailadres verifiëren
Gebruikt na het aanmelden. Een code naast een knop helpt mensen die de e-mail op een ander apparaat openen.
Bestelling verzonden
Zet de trackinglink voorop; daarvoor opende de lezer de e-mail.
Uitnodiging voor een evenement
Datum, tijd en plaats in een blok dat makkelijk te scannen is, daarna die ene actie.
Verzoek om feedback
Eén vraag met antwoorden die met één tik te geven zijn, levert veel meer reacties op dan een link naar een lange enquête.
Waarom de code er zo uitziet
Regels waardoor HTML-e-mail overal goed rendert
Regel
Waarom
Bouw de layout met tabellen (role="presentation")
Sommige desktopprogramma's negeren nog steeds flexbox, grid en veel positioneringsregels
Zet de belangrijke styles inline
Sommige programma's en webmailweergaven verwijderen of negeren style-blokken
Houd de inhoudsbreedte rond 600px
Past in het leesvenster van de meeste programma's
Maak knoppen van een link met padding in een gekleurde cel
Werkt ook in programma's die afbeeldingen blokkeren en sommige CSS negeren
Geef elke afbeelding een width, height en alt
Afbeeldingen zijn vaak geblokkeerd tot de lezer ze toestaat
Voeg een verborgen preheader toe
Bepaalt de previewtekst die na de onderwerpregel wordt getoond
Gebruik de color-scheme-meta en prefers-color-scheme
Programma's die dark mode ondersteunen gebruiken uw donkere kleuren in plaats van ze om te keren
Zet een afmeldlink in marketingmail
Verplicht volgens antispamwetgeving en door grote mailboxproviders
Voordat u verstuurt
Testchecklist
Test
Hoe
Echte programma's
Stuur naar accounts bij de grote webmaildiensten, een desktopprogramma en een telefoon
Afbeeldingen uit
Zet het laden van afbeeldingen uit en controleer of de e-mail nog te begrijpen is
Dark mode
Zet de telefoon en het desktopprogramma in de donkere modus
Links
Klik op elke link, ook de afmeldlink
Deel in platte tekst
Stuur ook een tekstversie mee; sommige lezers en filters gebruiken die
Spamcontrole
Authenticeer uw domein (SPF, DKIM, DMARC) voordat u in grote aantallen verstuurt