E-Mail-Vorlagen-Guide: Lifecycle-Frameworks, Layout-Muster, Copy-Blöcke und QA-Checkliste (2026)
Baue wiederverwendbare E-Mail-Vorlagen für Willkommens-, Newsletter-, Promotion-, transaktionale, Warenkorb-, Nachkauf-, Re-Engagement-, Ankündigungs- und Umfragekampagnen.
E-Mail-Vorlagen sind das Betriebssystem des E-Mail-Marketings. Eine gute Vorlage lässt ein Team schneller versenden, ohne jede Kampagne von Grund auf neu zu bauen. Eine schwache Vorlage erzeugt das Gegenteil: inkonsistentes Branding, kaputte mobile Layouts, schlechte Personalisierung, fehlende Compliance-Elemente und Kampagnen, die schwer zu testen sind.
Dieser Guide ersetzt die alte Listenlogik durch ein praktisches Vorlagensystem. Er behält die nützlichen Kampagnenkategorien, Willkommens-E-Mails, Newsletter, Promotions, transaktionale E-Mails, Warenkorbabbruch, Nachkauf, Re-Engagement, Ankündigungen und Umfragen, und macht daraus wiederverwendbare Frameworks mit Copy-Blöcken, Layout-Hinweisen, dynamischen Datenregeln und QA-Checks.
E-Mail-Vorlagensystem
Denk in Vorlagenfamilien, nicht in isolierten Nachrichten.
| Vorlagenfamilie | Aufgabe | Wiederverwendbare Blöcke | Risiko für QA |
|---|---|---|---|
| Willkommen | Neue Abonnent:innen oder Konten orientieren | Begrüßung, Wertversprechen, nächster Schritt, Präferenzen | Die erste E-Mail überladen |
| Newsletter | Wiederkehrende Inhalte verpacken | Hauptstory, sekundäre Links, Editor-Notiz | Generische Ausgabentitel |
| Promotion | Ein Angebot präsentieren | Angebot, Deadline, Produktraster, Bedingungen | Falsche Dringlichkeit oder unklare Ausschlüsse |
| Transaktional | Status oder Kontoaktion bestätigen | Status, Details, nächster Schritt, Support | Kritische Updates mit Marketing mischen |
| Warenkorb und Browse | Kaufabsicht zurückholen | Produktblock, Support-Hinweis, Checkout-CTA | Falsche Produkt- oder Inventardaten |
| Nach dem Kauf | Nach der Bestellung helfen | Lieferung, Einrichtung, Pflege, Bewertung, Cross-Sell | Zu früh nach einer Bewertung fragen |
| Re-Engagement | Inaktiven Abonnent:innen eine Wahl geben | Präferenzupdate, Opt-down, Grund zu bleiben | Schuldgetriebene Copy |
| Ankündigung | Änderung erklären | Was geändert wurde, warum es zählt, nötige Aktion | Wichtige Details verstecken |
| Umfrage | Feedback sammeln | Frage, Bewertungsskala, Incentive, Datenschutzhinweis | Zu viel in einer E-Mail fragen |
Jede Familie sollte eine Basisvorlage, eine Kurzversion und einen Plain-Text-Fallback haben. Die Basisvorlage deckt normale Kampagnen ab. Die Kurzversion funktioniert für dringende oder transaktionale Updates. Der Plain-Text-Fallback schützt Zustellbarkeit und Lesbarkeit, wenn Clients Bilder oder Formatierung blockieren.
Vier Layouts, live
Jedes Panel unten ist das echte E-Mail-HTML der Vorlage, in einem Rahmen mit echter Breite. Ziehen Sie die Breite auf 375 px herunter und sehen Sie zu, wie die Spalten umbrechen.
Folgt Ihrem Design — wechseln Sie es oben, um das andere zu sehen.
HTML von The Letter lesen
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Letter</title>
<style>
body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
a { text-decoration:underline; }
@media only screen and (max-width:620px) {
.wrap { width:100% !important; }
.stack { display:block !important; width:100% !important; max-width:100% !important; }
.gutter { padding-left:20px !important; padding-right:20px !important; }
.cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
.h1 { font-size:26px !important; line-height:32px !important; }
.thumb { width:100% !important; height:auto !important; max-width:100% !important; }
/* A digest row is the one two-column layout that should NOT stack: the
thumbnail shrinks and stays beside the headline, because a roundup is
read by scanning and a full-width decorative image per story destroys
that. */
.row-thumb { width:80px !important; }
.row-thumb img { width:80px !important; height:80px !important; }
.hide-sm { display:none !important; }
}
@media (prefers-color-scheme: dark) {
.d-bg { background-color:#151515 !important; }
.d-card { background-color:#1c1c1c !important; }
.d-ink { color:#f2f2f2 !important; }
.d-mute { color:#a8a8a8 !important; }
.d-rule { border-color:#3a3a3a !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f0efec;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Das Zitat, das Sie in Ihrer Notiz-App aufbewahren, leistet mehr als Ihr Redaktionsplan.</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f0efec;">
<tr><td align="center" style="padding:32px 12px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">
<tr><td style="padding:0;">
<img src="/_astro/letter-masthead.BcPkHvz4.png" width="600" height="250" alt="Meridian-Press-Kopf: konzentrische blaue Bögen, von einem diagonalen Band gekreuzt" style="width:100%;height:auto;max-width:600px;">
</td></tr>
<tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;">Meridian Press · Ausgabe 47</p>
</td></tr>
<tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
<h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">Das Archiv ist das Produkt</h1>
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Vor drei Wochen suchte ich einen Text, den ich 2019 geschrieben hatte, und fand ihn nicht. Nicht auf der Website, nicht im Export, nicht in der Suche der Plattform selbst. Zwölfhundert Ausgaben, und der einzige funktionierende Index war mein Gedächtnis.</p>
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Das ist der Teil, den einem niemand über sechs Jahre Newsletter erzählt. Das Versenden ist leicht. Das Aufbewahren nicht.</p>
</td></tr>
<tr><td class="gutter" style="padding:8px 88px 28px 88px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td class="quote" style="border-left:3px solid #0084d1;padding:4px 0 4px 0;padding-left:20px;font-family:Georgia,'Times New Roman',Times,serif;">
<p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">Alles, was Sie veröffentlichen, ist eine Einzahlung. Fast niemand baut die Auszahlung.</p>
</td></tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Diese Woche habe ich den Rückkatalog deshalb als echtes Archiv neu gebaut, mit Schlagwörtern, Volltextsuche und dauerhaften URLs. Es dauerte neun Tage. Die Abonnentenzahl bewegte sich nicht. Die Verweildauer verdreifachte sich.</p>
<p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Alles steht unten, auch die Teile, die nicht funktioniert haben.</p>
</td></tr>
<tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">Die ganze Ausgabe lesen →</a>
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 88px;border-top:1px solid #e4e2de;"></td></tr>
<tr><td class="gutter" style="padding:24px 88px 40px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:22px;color:#6b6b6b;">Jeden Donnerstag von Hand geschrieben. Antworten Sie, ich lese mit.</p>
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Meridian Press, 14 Harbour Lane, Bristol BS1 4TT<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Abmelden</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Im Browser ansehen</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Folgt Ihrem Design — wechseln Sie es oben, um das andere zu sehen.
HTML von The Digest lesen
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Digest</title>
<style>
body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
a { text-decoration:underline; }
@media only screen and (max-width:620px) {
.wrap { width:100% !important; }
.stack { display:block !important; width:100% !important; max-width:100% !important; }
.gutter { padding-left:20px !important; padding-right:20px !important; }
.cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
.h1 { font-size:26px !important; line-height:32px !important; }
.thumb { width:100% !important; height:auto !important; max-width:100% !important; }
/* A digest row is the one two-column layout that should NOT stack: the
thumbnail shrinks and stays beside the headline, because a roundup is
read by scanning and a full-width decorative image per story destroys
that. */
.row-thumb { width:80px !important; }
.row-thumb img { width:80px !important; height:80px !important; }
.hide-sm { display:none !important; }
}
@media (prefers-color-scheme: dark) {
.d-bg { background-color:#131313 !important; }
.d-card { background-color:#1b1b1b !important; }
.d-ink { color:#f3f3f3 !important; }
.d-mute { color:#a5a5a5 !important; }
.d-rule { border-color:#333333 !important; }
.d-chip { background-color:#10352f !important; color:#7fd8c6 !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f4f3f0;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Sechs Dinge, die Ihren Dienstag wert sind. Zwei davon drehen sich um Preise.</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f4f3f0;">
<tr><td align="center" style="padding:28px 12px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;border-radius:6px;">
<tr><td class="gutter" style="padding:30px 32px 22px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0;font-size:20px;line-height:26px;font-weight:800;color:#141414;">The Tuesday Digest</p>
<p class="d-mute" style="margin:4px 0 0 0;font-size:14px;line-height:20px;color:#6b6b6b;">26. August 2026 · 6 Themen · 9 Min.</p>
</td>
<td valign="middle" align="right" class="hide-sm">
<span class="d-chip" style="display:inline-block;background:#e2f4ef;color:#00614f;border-radius:999px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;padding:6px 12px;">AUSGABE 212</span>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:2px solid #141414;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:0 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
<tr>
<td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
<img src="/_astro/digest-1.gDWNYw1C.png" width="112" height="112" alt="Abstrakte türkise Bögen, von einem diagonalen Band gekreuzt" style="width:112px;height:112px;border-radius:4px;">
</td>
<td valign="top" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:#007d6a;">01 · PREISE</p>
<p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
<a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">Drei Unternehmen stellten auf nutzungsbasierte Preise um, zwei kehrten zurück</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Beide Rückkehrer sagen dasselbe: Die Supportlast stieg früher als der Umsatz.</p>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:0 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
<tr>
<td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
<img src="/_astro/digest-2.ch7Avmad.png" width="112" height="112" alt="Abstrakte türkise Ringe mit versetztem Fokuspunkt" style="width:112px;height:112px;border-radius:4px;">
</td>
<td valign="top" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:#007d6a;">02 · ZUSTELLBARKEIT</p>
<p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
<a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">Gmails Regeln für Massenversender sind ein Jahr alt. Das hat sich wirklich geändert</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Die Beschwerderate ist der einzige Schwellenwert, dem überhaupt jemand nahekam. Der Rest war ohnehin Pflicht.</p>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:0 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
<tr>
<td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
<img src="/_astro/digest-3.DP0eG3wj.png" width="112" height="112" alt="Abstrakte konzentrische türkise Bögen auf gebrochenem Weiß" style="width:112px;height:112px;border-radius:4px;">
</td>
<td valign="top" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:#007d6a;">03 · HANDWERK</p>
<p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
<a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">Ein Newsletter-Archiv ist ein Suchprodukt, keine Linkliste</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Neun Tage Arbeit, kein Abonnentenwachstum, dreifache Verweildauer. Interessant ist der Zielkonflikt.</p>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:24px 32px 34px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 14px 0;font-size:15px;line-height:24px;color:#555555;">Drei weitere weiter unten, darunter der über Rechnungsstellung, auf den alle antworten.</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#007d6a" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#007d6a;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Alle sechs lesen</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 32px;border-top:1px solid #eceae6;"></td></tr>
<tr><td class="gutter" style="padding:20px 32px 30px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">The Tuesday Digest, 9 Fitzroy Street, Manchester M1 2AL<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Abmelden</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Einstellungen verwalten</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Im Browser ansehen</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Folgt Ihrem Design — wechseln Sie es oben, um das andere zu sehen.
HTML von The Storefront lesen
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Storefront</title>
<style>
body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
a { text-decoration:underline; }
@media only screen and (max-width:620px) {
.wrap { width:100% !important; }
.stack { display:block !important; width:100% !important; max-width:100% !important; }
.gutter { padding-left:20px !important; padding-right:20px !important; }
.cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
.h1 { font-size:26px !important; line-height:32px !important; }
.thumb { width:100% !important; height:auto !important; max-width:100% !important; }
/* A digest row is the one two-column layout that should NOT stack: the
thumbnail shrinks and stays beside the headline, because a roundup is
read by scanning and a full-width decorative image per story destroys
that. */
.row-thumb { width:80px !important; }
.row-thumb img { width:80px !important; height:80px !important; }
.hide-sm { display:none !important; }
}
@media (prefers-color-scheme: dark) {
.d-bg { background-color:#141210 !important; }
.d-card { background-color:#1d1a18 !important; }
.d-ink { color:#f5f2ef !important; }
.d-mute { color:#aaa39d !important; }
.d-rule { border-color:#38322d !important; }
.d-tile { background-color:#241f1c !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#efece8;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Vier neue Drucke. Der mit dem Hafen hat 40 Exemplare und hält die Woche nicht durch.</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#efece8;">
<tr><td align="center" style="padding:24px 12px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">
<tr><td class="gutter" style="padding:22px 24px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td class="d-ink" style="font-size:17px;line-height:22px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#141414;">Northlight</td>
<td align="right" class="d-mute hide-sm" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;line-height:20px;color:#6b6b6b;">Herbstkollektion · 04</td>
</tr></table>
</td></tr>
<tr><td style="padding:0;">
<img src="/_astro/shop-hero.r4mykM_E.png" width="600" height="360" alt="Vier neue Northlight-Drucke: überlagerte rostrote Bögen auf warmem Gebrochenweiß" style="width:100%;height:auto;max-width:600px;">
</td></tr>
<tr><td class="gutter" style="padding:30px 40px 0 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<h1 class="h1 d-ink" style="margin:0 0 12px 0;font-size:30px;line-height:38px;font-weight:800;color:#141414;">Vier Drucke. Je vierzig Exemplare.</h1>
<p class="d-mute" style="margin:0 0 22px 0;font-size:16px;line-height:26px;color:#555555;">Jeder Druck dieser Kollektion ist von Hand gezogen, nummeriert und weg, sobald er weg ist. Hier wird nichts nachgedruckt.</p>
</td></tr>
<tr><td class="gutter" style="padding:0 40px 26px 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Kollektion ansehen</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
<tr><td class="gutter" style="padding:0 32px 8px 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-1.B7Z7OyM8.png" width="272" height="272" alt="Harbour, ein abstrakter Druck in Rostrot" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Harbour</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">50 × 70 cm · Giclée auf Baumwollbütten</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£85</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">In den Warenkorb</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-2.CMBKLJ38.png" width="272" height="272" alt="Dusk, ein abstrakter Druck in Bernstein" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Dusk</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">50 × 70 cm · Giclée auf Baumwollbütten</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£85</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">In den Warenkorb</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
</tr>
<tr>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-3.C9XLoBz6.png" width="272" height="272" alt="Tide, ein abstrakter Druck in Violett" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Tide</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">40 × 50 cm · Giclée auf Baumwollbütten</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£65</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">In den Warenkorb</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-4.jL_6WDwF.png" width="272" height="272" alt="Quarry, ein abstrakter Druck in Tiefgrün" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Quarry</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">40 × 50 cm · Giclée auf Baumwollbütten</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£65</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">In den Warenkorb</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:6px 40px 30px 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#faf9f7;border-radius:4px;">
<tr><td style="padding:16px 20px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0;font-size:15px;line-height:24px;color:#242424;"><strong>Kostenloser Versand innerhalb Großbritanniens ab 75 £.</strong> Rahmenoptionen an der Kasse. Rückgabe innerhalb von 30 Tagen, ungerahmt.</p>
</td></tr>
</table>
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 40px;border-top:1px solid #ebe7e2;"></td></tr>
<tr><td class="gutter" style="padding:20px 40px 30px 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Northlight Print Co., Unit 4 Wharf Road, Leeds LS10 1JQ<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Abmelden</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Im Browser ansehen</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Folgt Ihrem Design — wechseln Sie es oben, um das andere zu sehen.
HTML von The Brief lesen
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Brief</title>
<style>
body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
a { text-decoration:underline; }
@media only screen and (max-width:620px) {
.wrap { width:100% !important; }
.stack { display:block !important; width:100% !important; max-width:100% !important; }
.gutter { padding-left:20px !important; padding-right:20px !important; }
.cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
.h1 { font-size:26px !important; line-height:32px !important; }
.thumb { width:100% !important; height:auto !important; max-width:100% !important; }
/* A digest row is the one two-column layout that should NOT stack: the
thumbnail shrinks and stays beside the headline, because a roundup is
read by scanning and a full-width decorative image per story destroys
that. */
.row-thumb { width:80px !important; }
.row-thumb img { width:80px !important; height:80px !important; }
.hide-sm { display:none !important; }
}
@media (prefers-color-scheme: dark) {
.d-bg { background-color:#121212 !important; }
.d-card { background-color:#1a1a1a !important; }
.d-ink { color:#f2f2f2 !important; }
.d-mute { color:#a6a6a6 !important; }
.d-rule { border-color:#333333 !important; }
.d-tile { background-color:#232323 !important; }
.d-track { background-color:#2c2c2c !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f1f0f4;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Die Antwortrate steigt um 4 Punkte und wir wissen immer noch nicht, warum. Beste Vermutung im Inneren.</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f1f0f4;">
<tr><td align="center" style="padding:26px 12px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;border-radius:6px;">
<tr><td style="padding:0;background:#141414;border-radius:6px 6px 0 0;">
<img src="/_astro/brief-band.CsaAK-Uv.png" width="600" height="150" alt="Ledger-Weekly-Kopf: violette Bögen auf fast Schwarz" style="width:100%;height:auto;max-width:600px;border-radius:6px 6px 0 0;">
</td></tr>
<tr><td class="gutter" style="padding:26px 32px 18px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p style="margin:0 0 4px 0;font-size:12px;line-height:16px;letter-spacing:.1em;text-transform:uppercase;color:#8f83ff;">Ledger Weekly · Woche 35</p>
<h1 class="h1 d-ink" style="margin:0;font-size:26px;line-height:34px;font-weight:800;color:#141414;">Die Antwortrate bewegte sich und niemand hat etwas ausgeliefert</h1>
</td></tr>
<tr><td class="gutter" style="padding:0 26px 8px 26px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
<tr><td style="padding:18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">31.4%</p>
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Öffnungsrate</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 1,2 Pkt.</p>
</td></tr>
</table>
</td>
<td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
<tr><td style="padding:18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">8.9%</p>
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Klickrate</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#b8442d;">▼ 0,4 Pkt.</p>
</td></tr>
</table>
</td>
<td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
<tr><td style="padding:18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">6.1%</p>
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Antwortrate</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 4,0 Pkt.</p>
</td></tr>
</table>
</td>
</tr></table>
</td></tr>
<tr><td class="gutter" style="padding:20px 32px 0 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 18px 0;font-size:16px;line-height:26px;color:#242424;">Am Versand hat sich nichts geändert. Gleiche Liste, gleicher Donnerstag, gleiche Vorlage. Die einzige Variable, die wir finden: Die Betreffzeile stellte zum ersten Mal seit elf Ausgaben eine Frage.</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;">Antworten nach Segment</p>
</td></tr>
<tr><td class="gutter" style="padding:0 32px 22px 32px;">
<table role="presentation" class="chart" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Zahlende Abonnenten</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="100%" style="width:100%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">11.2%</td>
</tr>
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Gratis, 90 Tage aktiv</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="57%" style="width:57%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">6.4%</td>
</tr>
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Gratis, inaktiv</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="16%" style="width:16%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">1.8%</td>
</tr>
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Testphase</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="44%" style="width:44%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">4.9%</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px 28px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#141414" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#141414;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Die vollständige Auswertung lesen</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 32px;border-top:1px solid #e9e7ee;"></td></tr>
<tr><td class="gutter" style="padding:20px 32px 28px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Ledger Weekly, 2 Cathedral Square, Edinburgh EH1 2QN<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Abmelden</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Im Browser ansehen</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Globale Vorlagenblöcke
Jede wiederverwendbare E-Mail-Vorlage sollte diese Blöcke definieren, bevor Teams Kampagnen-Copy schreiben.
Header
Nutze eine konsistente Absenderidentität, Logo-Darstellung und optionale Navigation. Bei transaktionalen Vorlagen sollte die Navigation minimal bleiben, damit das Statusupdate offensichtlich ist.
Empfohlene Header-Felder:
- Logo oder Markenname.
- Absenderidentität, die zum E-Mail-Typ passt.
- Optionale Navigation für Marketing-Vorlagen.
- Vorschau-sicherer erster Text nach dem Preheader.
Preheader
Der Preheader ist Teil der Vorlage, kein Nachgedanke. Füge ein editierbares Feld und einen Fallback hinzu. Lass keinen rechtlichen Footer-Text oder Bild-Alt-Text in die Inbox-Vorschau lecken.
Hero- oder Lead-Block
Der Lead-Block beantwortet eine Frage: Warum ist diese E-Mail hier?
| E-Mail-Typ | Der Lead-Block sollte sagen |
|---|---|
| Willkommen | Was als Nächstes passiert |
| Promotion | Was das Angebot ist und wann es endet |
| Transaktional | Welcher Status sich geändert hat |
| Newsletter | Warum diese Ausgabe wichtig ist |
| Warenkorb | Was gespeichert wurde oder welche Hilfe verfügbar ist |
| Umfrage | Welches Feedback gewünscht ist und warum |
CTA-Block
Nutze für die meisten Vorlagen einen primären CTA. Ergänze sekundäre Links nur, wenn sie eine andere nützliche Aufgabe erfüllen, etwa „Bestellung ansehen“, „Präferenzen aktualisieren“ oder „Support kontaktieren“.
Dynamischer Content-Block
Dynamische Blöcke sind stark, wenn sie korrekte Daten nutzen. Riskant werden sie, wenn Daten veraltet, fehlend oder für den Inbox-Kontext zu sensibel sind.
Häufige dynamische E-Commerce-Blöcke:
- Produktbild und Produktname.
- Warenkorbsumme oder Anzahl gespeicherter Artikel.
- Bestellnummer und Status.
- Loyalty-Guthaben oder Stufe.
- Empfohlene Produkte.
- Replenishment-Timing.
- Store-Standort oder Lieferkontext.
Footer
Marketing-Vorlagen brauchen Abmelde- und Präferenzkontrollen. Transaktionale Vorlagen brauchen trotzdem klare Support- und Unternehmensidentität. Nutze eine Footer-Komponente, damit Teams erforderliche Elemente nicht vergessen.
Willkommens-E-Mail-Vorlagen
Willkommens-Vorlagen sollten Abonnent:innen beim ersten Schritt helfen. Halte die erste E-Mail fokussiert und lass die Willkommensserie den Rest übernehmen.
Einfaches Willkommen
Nutze das, wenn jemand einer Liste beitritt, ein Konto erstellt oder Inhalte anfragt.
| Block | Copy-Muster |
|---|---|
| Betreff | Willkommen bei [Brand] |
| Preheader | Starte mit deinen Präferenzen und dem ersten Schritt |
| Lead | „Du bist angemeldet. Das erhältst du ab jetzt.“ |
| Body | 2-3 Bulletpoints zu Wert, Frequenz und nächster Aktion |
| CTA | Präferenzen setzen, Setup starten oder Ressourcen ansehen |
| Footer | Preference Center und Abmeldung |
Beispiel-Body:
Willkommen bei [Brand]. Du erhältst [topic or benefit] [cadence]. Starte damit, deine Präferenzen zu wählen, damit wir dir die relevantesten Updates senden können.
E-Commerce-Willkommen
Nutze das, wenn Käufer:innen nach dem Stöbern, Kaufen oder Opt-in für Angebote beitreten.
| Block | Copy-Muster |
|---|---|
| Betreff | Deine Vorteile als Abonnent:in sind bereit |
| Preheader | Wähle Präferenzen und sieh, was neu ist |
| Lead | „Danke, dass du dabei bist. Das kannst du erwarten.“ |
| Body | Neuheiten, gespeicherte Präferenzen, Loyalty- oder Supportlinks |
| CTA | Neuheiten shoppen oder Präferenzen setzen |
| QA | Rabatt-, Deadline- oder Loyalty-Sprache prüfen |
Zwinge nicht in jede Willkommens-E-Mail einen Rabatt. Wenn es ein Angebot gibt, nenne die Bedingungen klar und stelle sicher, dass die Checkout-Erfahrung zur E-Mail passt.
Produkt-Onboarding-Willkommen
Nutze das für SaaS, Apps, Mitgliedschaften und Tools.
| Block | Copy-Muster |
|---|---|
| Betreff | Deine Setup-Checkliste ist bereit |
| Preheader | Schließe die ersten Schritte in wenigen Minuten ab |
| Lead | „Dein Konto ist aktiv. Starte mit diesen Schritten.“ |
| Body | Schritt 1, Schritt 2, Schritt 3 mit einem CTA |
| CTA | Setup abschließen |
| QA | Setup-Link für neue, teilweise aktive und wiederkehrende Nutzer:innen testen |
Newsletter-Vorlagen
Eine Newsletter-Vorlage sollte die Ausgabe leicht scannbar machen. Die Vorlage ist wiederverwendbar, aber Betreff und Lead sollten sich in jeder Ausgabe ändern.
Redaktioneller Digest
Am besten für wöchentliche oder monatliche Inhalte.
| Block | Copy-Muster |
|---|---|
| Betreff | Diese Woche in [topic] |
| Preheader | Die Updates, die deine Zeit wert sind |
| Lead | Ein-Satz-Editor-Notiz |
| Hauptblock | Featured Article oder wichtigster Takeaway |
| Sekundärblock | 3-5 kurze Links mit Kontext |
| CTA | Vollständigen Guide lesen, alle Updates ansehen oder antworten |
Nutze das, wenn das Team mehrere Stories kuratiert. Halte Zusammenfassungen kurz und ergänze „Warum das wichtig ist“-Kontext, damit die E-Mail nicht nur eine Linkliste ist.
Produkt-Newsletter
Am besten für E-Commerce-, Marketplace- oder produktgeführte Marken.
| Block | Copy-Muster |
|---|---|
| Betreff | Neu eingetroffen in [category] |
| Preheader | Picks basierend auf deinen gespeicherten Präferenzen |
| Lead | Kollektion oder Thema |
| Produktraster | 3-6 Produkte, jeweils mit Bild, Name, Preis, CTA |
| Supportblock | Hilfe zu Größen, Versand oder Rückgaben |
| CTA | Kollektion ansehen |
Prüfe Produktraster sorgfältig. Bestätige Produktverfügbarkeit, Bild-URLs, Preise, Varianten und Tracking-Parameter vor dem Versand.
Persönlicher Newsletter
Am besten für Gründer:innen, Creator, Consultants und Thought Leaders.
| Block | Copy-Muster |
|---|---|
| Betreff | Eine konkrete Beobachtung oder Frage |
| Preheader | Die praktische Lektion drin |
| Lead | Persönliche Notiz mit Bezug zum Thema |
| Body | Eine nützliche Idee, ein Beispiel oder eine Lektion |
| Links | Lese-, Tool- oder Ressourcenempfehlungen |
| CTA | Antworten, weiterlesen oder Gespräch buchen |
Die Vorlage sollte einfach bleiben. Der Wert kommt aus Stimme und Erkenntnis, nicht aus einem dichten Layout.
Promotion-Vorlagen
Promotion-Vorlagen sollten Angebotsmechanik offensichtlich machen. Mehrdeutigkeit erzeugt Supporttickets und enttäuschte Klicks.
Zeitlich begrenztes Angebot
| Block | Copy-Muster |
|---|---|
| Betreff | [Offer] endet [day] |
| Preheader | Berechtigte Produkte und Bedingungen sind drin |
| Lead | Angebot, Deadline und Zielgruppe |
| Produktblock | Hervorgehobene Produkte oder Kategorien |
| Bedingungenblock | Ausschlüsse, Deadline, Code, Region, Kanal |
| CTA | Angebot shoppen |
Nutze „letzte Chance“ nur, wenn es wirklich die letzte Erinnerung ist. Nutze echte Deadlines mit Zeitzone, wenn der Zeitpunkt wichtig ist.
Produktlaunch
| Block | Copy-Muster |
|---|---|
| Betreff | Neu: [product or collection] |
| Preheader | Schau, was neu ist und für wen es gedacht ist |
| Lead | Produktversprechen |
| Body | 3 Vorteile, Beweis, Produktbilder, Verfügbarkeit |
| CTA | Neues Produkt entdecken |
| QA | Bestand, Launch-Zeit, Varianten und Landingpage bestätigen |
Launch-Vorlagen sollten Kontext enthalten: was sich geändert hat, für wen es gedacht ist und warum es jetzt zählt.
Loyalty- oder VIP-Angebot
| Block | Copy-Muster |
|---|---|
| Betreff | Dein [tier/reward] ist bereit |
| Preheader | Geeignete Produkte und Guthabendetails ansehen |
| Lead | Prämienstatus |
| Body | Guthaben, Prämie, Ablaufdatum, Einlösung |
| CTA | Prämie nutzen |
| QA | Loyalty-Daten und Einlöseregeln prüfen |
Erwähne Loyalty-Guthaben oder Stufe nur, wenn die Daten korrekt sind. Ergänze eine Fallback-Version für Kontakte ohne Guthaben.
Transaktionale Vorlagen
Transaktionale Vorlagen brauchen zuerst Klarheit. Diese Vorlagen sollten nicht wie vage Promotions aussehen.
Bestellbestätigung
| Block | Copy-Muster |
|---|---|
| Betreff | Bestellung bestätigt: [order number] |
| Preheader | Wir senden Tracking, sobald sie verschickt wird |
| Lead | Bestätigungsstatus |
| Details | Bestellnummer, Artikelübersicht, Lieferadresse, Zahlungsübersicht |
| CTA | Bestellung ansehen |
| Support | Support kontaktieren oder Details aktualisieren, wenn erlaubt |
Halte Promotion-Cross-Sells sekundär. Die primäre Aufgabe der Kund:innen ist, zu prüfen, ob die Bestellung korrekt ist.
Versandupdate
| Block | Copy-Muster |
|---|---|
| Betreff | Deine Bestellung ist unterwegs |
| Preheader | Lieferung verfolgen und aktuelle ETA sehen |
| Lead | Versandstatus |
| Details | Versanddienst, Trackingnummer, ETA, Artikel |
| CTA | Paket verfolgen |
| Support | Lieferhilfe und Adresshinweise |
Wenn Trackingdaten fehlen, nutze einen Fallback, der keine leeren Felder zeigt.
Konto- oder Sicherheitshinweis
| Block | Copy-Muster |
|---|---|
| Betreff | Dein Passwort wurde geändert |
| Preheader | Wenn du das nicht warst, handle jetzt |
| Lead | Was geändert wurde |
| Details | Zeitpunkt, Konto, nächster Schritt |
| CTA | Konto sichern |
| Support | Support kontaktieren oder Sicherheitseinstellungen prüfen |
Füge Sicherheitsvorlagen keine Promotion-Inhalte hinzu. Die Nachricht sollte unverwechselbar sein.
Warenkorb-, Browse- und E-Commerce-Recovery-Vorlagen
Recovery-Vorlagen hängen von Datenqualität ab. Wenn Produkt-, Inventar- oder Preisdaten nicht zuverlässig sind, nutze eine weichere Version auf Kategorieebene.
Warenkorbabbruch
| Block | Copy-Muster |
|---|---|
| Betreff | Dein Warenkorb ist gespeichert |
| Preheader | Bewertungen und Checkout sind einen Tap entfernt |
| Lead | Erinnerung an gespeicherten Warenkorb |
| Produktblock | Artikelbild, Name, Variante, Preis, Menge |
| Supportblock | Hilfe zu Größen, Rückgaben, Zahlung oder Versand |
| CTA | Zurück zum Warenkorb |
| QA | Artikelverfügbarkeit und Checkout-Link prüfen |
Browse Abandonment
| Block | Copy-Muster |
|---|---|
| Betreff | Mehr [category]-Picks für dich |
| Preheader | Basierend auf deinem letzten Store-Besuch |
| Lead | Hilfreiche Empfehlung |
| Produktblock | Angesehenes Produkt oder verwandte Kategorie |
| CTA | Weiterstöbern |
| QA | Sensibles Browse-Verhalten nicht überpersonalisieren |
Back-in-Stock
| Block | Copy-Muster |
|---|---|
| Betreff | Wieder verfügbar: [product] |
| Preheader | Der Artikel, nach dem du gefragt hast, ist wieder da |
| Lead | Verfügbarkeitsupdate |
| Produktblock | Produkt, Variante, bestandssensitiver Hinweis |
| CTA | Produkt ansehen |
| QA | Bestand bestätigen, bevor die Automation sendet |
Nachkauf-Vorlagen
Nachkauf-E-Mails sollten Kund:innen helfen, Wert zu bekommen, bevor sie mehr verlangen.
Produkterklärung
| Block | Copy-Muster |
|---|---|
| Betreff | So startest du mit [product] |
| Preheader | Setup, Pflege und häufige Fragen |
| Lead | Kund:innen beim Nutzen des Kaufs helfen |
| Body | Setup-Schritte, Pflegetipps, Supportlinks |
| CTA | Guide lesen |
Bewertungsanfrage
| Block | Copy-Muster |
|---|---|
| Betreff | Wie hat [product] funktioniert? |
| Preheader | Teile Feedback, wenn du Zeit hattest, es zu nutzen |
| Lead | Um Bewertung bitten |
| Body | Warum Feedback hilft, Bewertungslink, optionale Incentive-Bedingungen |
| CTA | Bewertung abgeben |
| QA | Nur nach Lieferung und angemessenem Nutzungsfenster auslösen |
Replenishment
| Block | Copy-Muster |
|---|---|
| Betreff | Zeit, [product] nachzubestellen? |
| Preheader | Basierend auf deinem vorherigen Kaufzeitpunkt |
| Lead | Hilfreiche Nachbestell-Erinnerung |
| Body | Produkt, Menge, Abo-Option, Support |
| CTA | Nachbestellen |
| QA | Unterdrücken, wenn Kund:innen bereits nachbestellt haben |
Re-Engagement-Vorlagen
Re-Engagement-Vorlagen sollten Abonnent:innen Kontrolle geben. Viele inaktive Abonnent:innen brauchen keinen lauteren Rabatt, sondern andere Inhalte oder weniger E-Mails.
Präferenz-Reset
| Block | Copy-Muster |
|---|---|
| Betreff | Wähle, was du erhältst |
| Preheader | Themen, Kanäle und Frequenz wählen |
| Lead | Um Präferenzupdate bitten |
| Body | Themenoptionen, Frequenzoptionen, Opt-down |
| CTA | Präferenzen aktualisieren |
Winback-Angebot
| Block | Copy-Muster |
|---|---|
| Betreff | Noch interessiert an [category]? |
| Preheader | Präferenzen wählen oder sehen, was neu ist |
| Lead | Relevanzprüfung |
| Body | Neue Produkte, veränderter Wert, optionales Incentive |
| CTA | Neuheiten ansehen |
| QA | Kürzliche Käufer:innen, kürzliche Beschwerdefälle und abgemeldete Kontakte unterdrücken |
Sunset-Hinweis
| Block | Copy-Muster |
|---|---|
| Betreff | Sollen wir weiter [topic] senden? |
| Preheader | Interesse bestätigen oder E-Mails pausieren |
| Lead | Klare Wahl |
| Body | Warum Abonnent:innen die Nachricht erhalten, Optionen |
| CTA | Angemeldet bleiben |
| Secondary | Abmelden oder pausieren |
Ankündigungs-Vorlagen
Ankündigungen funktionieren, wenn sie beantworten, was sich geändert hat, warum es zählt und was als Nächstes zu tun ist.
Produktupdate
| Block | Copy-Muster |
|---|---|
| Betreff | Neu: [feature or integration] |
| Preheader | Was sich geändert hat und wie du es nutzt |
| Lead | Feature-Zusammenfassung |
| Body | Use Case, Verfügbarkeit, Setup-Schritte |
| CTA | Feature testen |
Policy- oder AGB-Update
| Block | Copy-Muster |
|---|---|
| Betreff | Wichtiges Update zu [policy] |
| Preheader | Prüfe, was sich am [date] ändert |
| Lead | Was sich geändert hat |
| Body | Zusammenfassung, Gültigkeitsdatum, Link zu vollständigen Bedingungen |
| CTA | Update prüfen |
| QA | Legal Review, Lokalisierung und Datumsgenauigkeit |
Wartung oder Incident
| Block | Copy-Muster |
|---|---|
| Betreff | Geplante Wartung am [date] |
| Preheader | Erwartete Auswirkungen und Timing |
| Lead | Status und Timing |
| Body | Betroffene Services, erwartete Dauer, Supportpfad |
| CTA | Statusseite ansehen |
Umfrage- und Feedback-Vorlagen
Umfragevorlagen sollten die Bitte klein halten und erklären, warum sie wichtig ist.
NPS- oder Zufriedenheitsumfrage
| Block | Copy-Muster |
|---|---|
| Betreff | Wie war deine Erfahrung? |
| Preheader | Eine kurze Frage hilft uns, besser zu werden |
| Lead | Feedback-Anfrage |
| Body | Bewertungsfrage, optionaler Kommentar-Prompt |
| CTA | Feedback geben |
| QA | Dieselben Kund:innen nicht übermäßig befragen |
Produktfeedback
| Block | Copy-Muster |
|---|---|
| Betreff | Hilf mit, [product] zu verbessern |
| Preheader | Sag uns, was als Nächstes besser werden sollte |
| Lead | Produktspezifische Bitte |
| Body | Thema, erwartete Dauer, Datenschutzhinweis |
| CTA | Feedback teilen |
Regeln für responsives Design
E-Mail-Clients unterscheiden sich stark. Vorlagen sollten zuverlässig robust sein.
Nutze diese Grundregeln:
- Mobile-first mit Single-Column-Fallback designen.
- Die Hauptbotschaft sichtbar halten, ohne sich auf Bilder zu verlassen.
- Aussagekräftigen Alt-Text für wichtige Bilder nutzen.
- Buttons groß genug für bequemes Tippen machen.
- Winzigen grauen Text für wichtige Bedingungen vermeiden.
- Essenzielle Copy als Live-Text statt als Text im Bild verwenden.
- Dark-Mode-Kontrast lesbar halten.
- Gmail, Apple Mail, Outlook und die wichtigsten mobilen Clients deiner Liste testen.
- Eine Plain-Text-Version einfügen.
Barrierefreiheit und Compliance
Vorlagen sollten Barrierefreiheit und rechtliche Anforderungen von Anfang an unterstützen.
Ergänze diese wiederverwendbaren Checks:
- Logische Überschriftenreihenfolge.
- Aussagekräftiger Linktext.
- Alt-Text für sinnvolle Bilder.
- Ausreichender Farbkontrast.
- Kein reiner Bild-Call-to-Action.
- Klare Abmelde- und Präferenzlinks für Marketing-E-Mails.
- Korrekte Absenderidentität.
- Physische Postadresse, wo erforderlich.
- Nicht täuschende Betreffzeile und Preheader.
- Lokalisierte Footer-Sprache für nicht-englische Versionen.
Die CAN-SPAM-Hinweise der FTC machen täuschende Betreffzeilen und erforderliche Abmeldebehandlung zu mehr als einem Designthema. Baue Compliance in die Vorlagenkomponenten ein, damit Kampagnenersteller:innen nicht manuell daran denken müssen.
Dynamische Vorlagen mit Tajo und Brevo
Tajo hilft Shopify-Teams, echte E-Commerce-Daten in Brevo-Vorlagen zu nutzen. Dadurch kann die Vorlage sich an den Lifecycle-Kontext anpassen, ohne manuelle Exporte.
Nützliche dynamische Vorlagenfelder:
| Workflow | Dynamische Felder |
|---|---|
| Warenkorbrückgewinnung | Kund:in, Warenkorbartikel, Checkout-URL, Produktbild, Variante |
| Browse Abandonment | Angesehenes Produkt, Kategorie, verwandte Produkte |
| Nach dem Kauf | Bestellung, Lieferstatus, Produkt, Pflegeguide |
| Loyalty | Punkte, Stufe, Prämienberechtigung |
| Replenishment | Produkt, letztes Kaufdatum, erwartetes Nachbestellfenster |
| Back-in-Stock | Produkt, Variante, Inventarstatus |
| Winback | Letzte Kaufkategorie, Präferenzen, Engagement-Status |
Dynamische Vorlagen brauchen Fallback-Logik. Wenn Bild, Preis, Variante oder Loyalty-Guthaben fehlt, sollte die E-Mail trotzdem professionell rendern.
Vorlagen-QA-Checkliste
Nutze diese Liste, bevor du eine neue Vorlage oder eine größere Vorlagenänderung freigibst:
- Betreffzeilen- und Preheader-Felder existieren und haben Fallbacks.
- Header, Footer und Abmeldeblöcke rendern korrekt.
- Der primäre CTA ist klar und getrackt.
- Jeder Link funktioniert und hat korrekte UTM-Parameter.
- Personalisierungsfelder funktionieren mit echten, fehlenden und langen Werten.
- Dynamische Produkte haben Fallback-Verhalten.
- Die Vorlage rendert mobil und auf Desktop.
- Dark Mode ist lesbar.
- Bilder haben nützlichen Alt-Text.
- Eine Plain-Text-Version existiert.
- Rechtlicher Footer, Adresse, Abmeldung und Präferenzlinks sind vorhanden, wo erforderlich.
- Transaktionale Vorlagen halten kritische Statusupdates klar.
- Unterdrückungsregeln und Einwilligungsregeln passen zum E-Mail-Typ.
Abschließende Empfehlung
Baue E-Mail-Vorlagen wie ein Produktsystem. Starte mit Lifecycle-Aufgaben, definiere wiederverwendbare Blöcke, verbinde dynamische Daten sorgfältig und mache QA zu einem Teil der Vorlage statt zum hektischen letzten Schritt vor dem Versand.
Für E-Commerce-Teams mit Shopify, Brevo und Tajo sind die stärksten Vorlagen an echten Kund:innenkontext gebunden: Warenkorb gespeichert, Produkt angesehen, Bestellung versendet, Prämie bereit, Nachbestellung fällig oder Präferenzupdate nötig. Dieser Kontext macht Vorlagen nützlich, ohne sie fragil oder überpersonalisiert zu machen.
Verwandte Artikel
- Bibliothek für E-Mail-Betreffzeilen-Beispiele: Vorlagen nach Kampagnentyp, Absicht und QA-Risiko (2026)
- E-Mail-Betreffzeilen-Playbook: Inbox-Fit, Tests, Beispiele und Compliance-QA (2026)
- E-Mail-Design-Guide: Layout, Barrierefreiheit, Komponenten, Rendering-QA und Test-Workflow (2026)
- E-Mail-Marketing-Kampagnen: Der komplette Guide zu Planung, Umsetzung und Optimierung
- Transaktionale E-Mail-Beispiele: Muster, Vorlagen und QA-Checkliste (2026)