Kostenlose HTML-E-Mail-Vorlagen (tabellenbasiert und Dark-Mode-fähig)
Kostenlose HTML-E-Mail-Vorlagen
Kostenlose HTML-E-Mail-Vorlagen: 8 tabellenbasiert, Dark-Mode-fähig, zum Kopieren | We.Inc
Acht kostenlose HTML-E-Mail-Vorlagen, die du direkt auf der Seite bearbeiten und ansehen kannst: Willkommen, Beleg, Passwort zurücksetzen, Newsletter, E-Mail bestätigen, Versandbestätigung, Event-Einladung und Feedback. Tabellenlayout, robuste Buttons, Dark-Mode-Unterstützung und eine Test-Checkliste.
Eine zuverlässige HTML-E-Mail nutzt verschachtelte Tabellen für das Layout, Inline-Styles, eine Inhaltsbreite von etwa 600 Pixeln, Buttons aus gepolsterten Links statt aus Bildern und Alt-Text für jedes Bild. Die acht Vorlagen unten folgen diesen Regeln, unterstützen Dark Mode, wo die Programme es zulassen, und lassen sich vor dem Kopieren live bearbeiten und ansehen.
Die acht Vorlagen
Vorlage
Versendet, wenn
Willkommen
Sich jemand registriert
Beleg
Eine Zahlung erfolgreich ist
Passwort zurücksetzen
Jemand das Zurücksetzen anfordert
Newsletter
Regelmäßige Neuigkeiten
E-Mail bestätigen
Nach der Registrierung
Bestellung versendet
Eine Bestellung das Lager verlässt
Event-Einladung
Du Kunden einlädst
Feedback-Anfrage
Nach einem Besuch oder einer Bestellung
Bearbeite den Code links in einer beliebigen Vorlage, und die Vorschau rechts aktualisiert sich. Die Vorschauen werden von deinem Browser gerendert, betrachte sie also als Orientierung: E-Mail-Programme unterscheiden sich, deshalb ist die Test-Checkliste unten so wichtig.
Wähle die Vorlage, die zu der E-Mail passt, die du brauchst.
Ändere Text, Links und Farben im Codefeld und beobachte die Vorschau.
Kopiere das HTML in die Option für eigenes HTML deiner E-Mail-Plattform.
Sende Tests an echte Postfächer auf Handy und Desktop, im hellen und im dunklen Modus.
Beschränke dich auf eine Hauptaktion pro E-Mail; ein zweiter Button halbiert die Aufmerksamkeit.
Schreibe den Preheader bewusst; sonst zeigen Programme den ersten Text, den sie finden.
Hoste Bilder auf deiner eigenen Domain oder deiner E-Mail-Plattform, mit absoluten https-URLs.
Nutze unseren HTML-E-Mail-Vorlagen-Builder, wenn du lieber ein Formular ausfüllst.
Häufige Fragen
Warum verwenden HTML-E-Mails immer noch Tabellen?
Manche E-Mail-Programme, vor allem ältere Desktop-Programme, rendern mit Engines, die modernes CSS-Layout ignorieren. Tabellen sind die einzige Layoutmethode, die in allen funktioniert.
Wie bringe ich eine E-Mail im Dark Mode zum Laufen?
Füge die color-scheme-Meta-Tags und eine prefers-color-scheme-Media-Query mit deinen dunklen Farben hinzu. Programme, die das unterstützen, verwenden sie; andere invertieren die Farben eventuell selbst, vermeide also Text in Bildern und teste beide Modi.
Darf ich diese Vorlagen kommerziell nutzen?
Ja. Wir haben sie für diese Seite geschrieben; kopiere, ändere und versende sie in jedem Projekt.
Was ist ein robuster Button?
Ein Button, der aus einem Link mit Innenabstand in einer farbigen Tabellenzelle besteht statt aus einem Bild. Er wird auch dann angezeigt und funktioniert, wenn Bilder blockiert sind.
Auch reiner Text zählt
Sende neben dem HTML eine Nur-Text-Version mit. Die meisten E-Mail-Plattformen erzeugen eine; lies sie einmal durch, denn ein Beleg oder ein Link zum Zurücksetzen muss auch ohne Formatierung verständlich sein.
Acht Vorlagen, live
Willkommens-E-Mail
Bedankt sich bei der Person, sagt, was als Nächstes passiert, und bietet eine klare Aktion an.
Beleg
Eine verschachtelte Tabelle hält Artikelnamen und Preise in jedem Programm ausgerichtet, auch in alten Desktop-Programmen.
Passwort zurücksetzen
Kurz, mit Ablaufzeit und dem Hinweis, was zu tun ist, wenn die Person es nicht angefordert hat. Füge den Link auch als Text ein, für Programme, die Buttons blockieren.
Newsletter
Eine Geschichte pro Block mit Überschrift, einem Satz und einem Link. Die Bild-URL hier ist ein Platzhalter, daher zeigt die Vorschau, was Leser bei blockierten Bildern sehen: den Alt-Text in einem Feld in der richtigen Größe.
E-Mail-Adresse bestätigen
Wird nach der Registrierung verwendet. Ein Code zusätzlich zum Button hilft Leuten, die die E-Mail auf einem anderen Gerät öffnen.
Bestellung versendet
Stellt den Tracking-Link an den Anfang; dafür hat der Leser die E-Mail geöffnet.
Event-Einladung
Datum, Uhrzeit und Ort in einem leicht überfliegbaren Block, danach die eine Aktion.
Feedback-Anfrage
Eine Frage mit Antworten per Fingertipp bringt weit mehr Rückmeldungen als ein Link zu einer langen Umfrage.
Warum der Code so aussieht
Regeln, damit HTML-E-Mails überall richtig dargestellt werden
Regel
Warum
Layout mit Tabellen (role="presentation")
Manche Desktop-Programme ignorieren noch immer flexbox, grid und viele Positionierungsregeln
Wichtige Styles inline setzen
Manche Programme und Webmail-Ansichten entfernen oder ignorieren style-Blöcke
Inhaltsbreite bei etwa 600px halten
Passt in den Lesebereich der meisten Programme
Buttons aus einem gepolsterten Link in einer farbigen Zelle bauen
Übersteht Programme, die Bilder blockieren und manches CSS ignorieren
Bei jedem Bild width, height und alt setzen
Bilder sind oft blockiert, bis der Leser sie freigibt
Einen versteckten Preheader hinzufügen
Steuert den Vorschautext, der nach der Betreffzeile angezeigt wird
color-scheme-Meta und prefers-color-scheme verwenden
Programme mit Dark-Mode-Unterstützung nutzen deine dunklen Farben, statt zu invertieren
In Marketing-E-Mails einen Abmeldelink einfügen
Vorgeschrieben durch Anti-Spam-Gesetze und große Mailbox-Anbieter
Bevor du sendest
Test-Checkliste
Test
So geht's
Echte Programme
Sende an Konten bei den großen Webmail-Diensten, an ein Desktop-Programm und an ein Handy
Bilder aus
Schalte das Laden von Bildern ab und prüfe, ob die E-Mail trotzdem verständlich ist
Dark Mode
Stelle Handy und Desktop-Programm auf den dunklen Modus um
Links
Klicke jeden Link an, auch den Abmeldelink
Nur-Text-Teil
Sende auch eine Textversion mit; manche Leser und Filter nutzen sie
Spam-Check
Authentifiziere deine Domain (SPF, DKIM, DMARC), bevor du in großen Mengen versendest