Auf dieser Seite
Einen Newsletter von einem leeren Blatt zu starten ist einschüchternd. Du starrst auf den leeren Editor und fragst dich, wie du deinen Content strukturieren, welches Layout du nutzen und wie du ihn professionell aussehen lassen sollst, ohne Stunden ins Design zu stecken.
Newsletter-Templates lösen dieses Problem. Vorlagen bieten eine bewährte Struktur und ein professionelles Design, das du mit deinem eigenen Content, Branding und deinen Bildern anpassen kannst. Die besten Templates sind mobil-responsiv, über E-Mail-Clients hinweg kompatibel und mit Fokus auf Conversion designt.
Dieser Leitfaden deckt 15 kostenlose Newsletter-Template-Designs ab, organisiert nach Branche und Anwendungsfall. Für jeden Template-Typ erklären wir Design-Prinzipien, empfohlene Content-Struktur und Tipps zur Anpassung.
Was ein Newsletter-Template effektiv macht
Bevor wir zu konkreten Templates kommen, ist es wichtig zu verstehen, was ein gutes von einem großartigen Template unterscheidet.
Technische Anforderungen
| Anforderung | Warum es wichtig ist |
|---|---|
| Mobile-responsiv | 60 %+ der E-Mails werden auf Mobilgeräten geöffnet |
| Cross-Client-Kompatibilität | Wird in Gmail, Outlook, Apple Mail etc. korrekt gerendert |
| Schnelles Laden | Bilder insgesamt unter 1 MB; Template unter 100 KB |
| Dark-Mode-Support | Zunehmende Verbreitung in E-Mail-Clients |
| Barrierefreiheit | Screenreader-kompatibel, ausreichender Kontrast |
| Web-sichere Fonts | Konsistentes Rendering über Plattformen hinweg |
Design-Prinzipien
Visuelle Hierarchie. Der wichtigste Inhalt sollte am prominentesten sein. Nutze Größe, Farbe und Platzierung, um das Auge von oben nach unten zu führen.
Scanbares Layout. Die meisten E-Mail-Empfänger:innen scannen, statt zu lesen. Nutze Überschriften, Bullet Points, kurze Absätze und klare Abschnittstrennungen, damit der Content gut verdaulich wird.
Konsistentes Branding. Dein Newsletter sollte sofort erkennbar sein. Nutze Markenfarben, Logo und Typografie konsequent über jede Ausgabe hinweg.
Einspaltig auf Mobile. Mehrspaltige Layouts können auf Mobilgeräten brechen. Setze ein einspaltiges Layout ein oder sorge dafür, dass mehrspaltige Abschnitte auf kleineren Bildschirmen sauber stapeln.
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> 15 kostenlose Newsletter-Template-Designs
1. Das klassische Firmenupdate
Am besten geeignet für: B2B-Unternehmen, Agenturen, Professional Services
Dieses Template folgt einer geradlinigen Struktur:
- Firmenlogo und Kopfzeile
- Kurze redaktionelle Einleitung (2–3 Sätze)
- 3–4 Content-Blöcke mit Überschriften, kurzen Beschreibungen und CTAs
- Fußzeile mit Social-Links und Abmeldelink
Design-Hinweise: Sauberes, professionelles Layout mit viel Weißraum. Nutze deine Primärmarkenfarbe für Überschriften und CTA-Buttons. Begrenze Bilder auf ein Hero-Bild und kleine Thumbnails für Content-Blöcke.
Content-Struktur:
- Persönliche Begrüßung von einem Teammitglied
- Hervorgehobener Artikel oder Ankündigung
- 2–3 sekundäre Content-Items
- Quick-Links- oder Ressourcen-Bereich
- Fußzeile mit Kontaktinformationen
2. Das E-Commerce-Produkt-Showcase
Am besten geeignet für: Online-Shops, Retail-Marken, DTC-Unternehmen
Produktfokussiertes Layout, das Sales treibt:
- Hero-Banner mit hervorgehobenem Produkt oder Promotion
- Produkt-Grid (2×2 oder 3×1) mit Bildern, Namen, Preisen und Shop-Buttons
- Kundenbewertungs- oder Testimonial-Bereich
- Sekundäre Promotion oder Neuheiten
Design-Hinweise: Große, hochwertige Produktbilder sind entscheidend. Nutze ein Grid-Layout, das auf Mobile zu einer Spalte stapelt. Preise und CTA-Buttons müssen sofort sichtbar sein.
Für E-Commerce-Marken, die Tajo mit Brevo nutzen, lassen sich diese Templates dynamisch mit personalisierten Produktempfehlungen basierend auf Browsing- und Kaufhistorie jeder:s Abonnent:in befüllen. Siehe unseren Leitfaden zum E-Commerce-E-Mail-Marketing für Personalisierungsstrategien.
3. Der Content-Digest
Am besten geeignet für: Medienunternehmen, Content Creator, Publikationen
Ein content-lastiges Template zur Präsentation mehrerer Artikel:
- Hervorgehobener Artikel mit großem Bild und Teaser
- Liste von 5–8 weiteren Artikeln mit Titeln und einzeiligen Zusammenfassungen
- Kategorie-Labels pro Artikel
- „Am beliebtesten”- oder „Redaktionstipp”-Callout
Design-Hinweise: Priorisiere Lesbarkeit mit sauberer Typografie und großzügigem Zeilenabstand. Nutze konsistente Formatierung für jeden Artikel, damit Leser:innen den Digest schnell überfliegen können.
4. Der persönliche Newsletter
Am besten geeignet für: Solopreneur:innen, Thought Leader, Berater:innen
Ein minimalistisches, textfokussiertes Template, das sich wie ein persönlicher Brief anfühlt:
- Autor:innen-Foto und -Name
- Langform-Text (500–800 Wörter)
- Minimale Bilder und Designelemente
- Einfache Textlinks statt gestylter Buttons
- Persönliche Verabschiedung
Design-Hinweise: Dieses Template lebt von Einfachheit. Nutze ein einspaltiges Layout, Standard-Fonts und minimales Styling. Ziel ist, dass es sich wie eine persönliche E-Mail anfühlt – nicht wie Marketing-Kommunikation.
5. Das SaaS-Produkt-Update
Am besten geeignet für: Software-Unternehmen, Tech-Startups, Entwickler:innen-Tools
Feature-fokussiertes Layout zur Kommunikation von Produktupdates:
- Versionsnummer oder Update-Titel in der Kopfzeile
- Feature-Highlight mit Screenshot oder GIF
- Bullet-Liste mit Verbesserungen und Fixes
- „Was als Nächstes kommt”-Teaser
- CTA, um neue Features auszuprobieren
Design-Hinweise: Zeige Produkt-Screenshots oder Interface-Bilder statt nur darüber zu reden. Nutze ein sauberes, modernes Design, das zur Ästhetik deiner Software passt.
6. Die Event-Einladung
Am besten geeignet für: Event-Organisator:innen, Konferenzen, Webinar-Hosts
Ein Single-Purpose-Template zur Registrierungs-Maximierung:
- Eventname und visuelles Branding
- Datum, Uhrzeit und Ort (oder virtuelle Plattform)
- Speaker-Highlights mit Fotos und Kurzbios
- Programm-Überblick
- Prominenter Registrierungs-CTA
- Early-Bird-Preise oder Dringlichkeit durch begrenzte Plätze
Design-Hinweise: Der CTA-Button sollte mindestens zweimal erscheinen – einmal above the fold, einmal nach den Details. Nutze Countdown-Elemente oder Dringlichkeit, wenn passend.
7. Das Weekly Roundup
Am besten geeignet für: Branchen-Newsletter, kuratierte Content-Publisher:innen
Ein strukturiertes Template zum Kuratieren von Content aus dem Web:
- Redaktionsnotiz (2–3 Sätze)
- 5–10 kuratierte Links mit Quellenangabe, Titel und kurzem Kommentar
- Nummerierte oder kategorisierte Abschnitte
- „Sponsor”- oder „Hervorgehoben”-Abschnitt bei Monetarisierung
- Leser:innen-Umfrage oder Feedback-Prompt
Design-Hinweise: Klare Nummerierung und konsistente Formatierung pro kuratiertem Item helfen Leser:innen bei der Navigation. Nutze dezente Linien oder Hintergrundfarben zur Abschnittstrennung.
8. Der Non-Profit-Impact-Bericht
Am besten geeignet für: Wohltätigkeitsorganisationen, NGOs, Social Enterprises
Ein Template zum Teilen von Impact-Geschichten und zum Generieren von Spenden:
- Wirkungsüberschrift („Wir haben 1.000 Familien diesen Monat geholfen”)
- Geschichte mit Foto (eine:e Begünstigte:r oder ein Projekt)
- Fortschrittsbalken in Richtung Kampagnenziel
- Ehrenamts- oder Eventmöglichkeiten
- Spenden-CTA-Button
Design-Hinweise: Starte mit emotionalem Impact durch Fotografie und echte Geschichten. Nutze Datenvisualisierung (Fortschrittsbalken, Statistiken), um konkrete Ergebnisse zu zeigen.
9. Die saisonale Promotion
Am besten geeignet für: Retail, Hospitality, saisonale Unternehmen
Ein visuell reichhaltiges Template für Feiertags- und Saison-Kampagnen:
- Vollformatiges saisonales Hero-Bild
- Promo-Angebot mit klaren Konditionen
- Kuratierte Produktauswahl oder Geschenkeguide
- Deadline- oder Countdown-Element
- Mehrere CTAs über das Template verteilt
Design-Hinweise: Kräftige Farben und saisonale Bildsprache erzeugen Dringlichkeit. Sorge dafür, dass das Angebot ohne Scrollen klar ist. Teste das Template gründlich, weil bildlastige E-Mails Rendering-Probleme verursachen können.
10. Die Bildungsserie
Am besten geeignet für: Online-Kurse, Coaching-Businesses, Bildungseinrichtungen
Ein strukturiertes Template zum Vermitteln von Bildungscontent:
- Lektionsnummer und Serientitel
- Key-Take-away oder Lernziel
- Hauptinhalt mit klaren Abschnitten
- Übung oder Handlungsaufgabe
- Fortschrittsanzeige (Lektion 3 von 8)
- CTA zur nächsten Lektion oder verwandten Ressource
Design-Hinweise: Nutze eine konsistente Struktur über alle Lektionen der Serie, damit Abonnent:innen wissen, was sie erwartet. Eine Fortschrittsanzeige motiviert zum Abschluss.
11. Das Immobilien-Listing
Am besten geeignet für: Makler:innen, Immobilienverwaltungen
Ein immobilienfokussiertes Template mit reichen visuellen Elementen:
- Hervorgehobenes Listing mit großer Fotogalerie
- Objektdetails (Preis, Schlafzimmer, Bäder, Quadratmeter)
- 3–4 weitere Listings im Grid-Format
- Marktupdate oder Nachbarschafts-Spotlight
- Agent:innen-Kontaktinfos mit Foto
Design-Hinweise: Hochwertige Objektfotografie ist essenziell. Wichtige Details (Preis, Größe, Lage) sollten ohne Klick sofort sichtbar sein.
12. Das Restaurant- oder Food-Business
Am besten geeignet für: Restaurants, Lieferservices, Catering-Unternehmen
Ein visuell appetitanregendes Template:
- Hero-Bild des Gerichts der Woche oder der Menü-Highlights
- Wochenspecials oder neue Menüpunkte
- Reservierungs- oder Bestell-CTA
- Highlight einer Kund:innen-Bewertung
- Standort- und Öffnungszeiten
Design-Hinweise: Food-Fotografie sollte professionell und appetitlich sein. Warme Farben und großzügige Abstände einsetzen. Der Haupt-CTA (Bestellen, Reservieren, Besuchen) muss unübersehbar sein.
13. Fitness und Wellness
Am besten geeignet für: Fitnessstudios, Personal Trainer:innen, Wellness-Marken
Ein energiegeladenes Template mit Fokus auf Motivation und Handlung:
- Motivierendes Hero-Bild
- Workout der Woche oder Wellness-Tipp
- Kursplan oder anstehende Events
- Mitglieder-Spotlight oder Transformations-Geschichte
- Buchungs- oder Mitgliedschafts-CTA
Design-Hinweise: Action-orientierte Fotografie und kräftige Typografie verwenden. Ton motivierend halten, ohne aufdringlich zu wirken.
14. Agentur-Portfolio-Showcase
Am besten geeignet für: Kreativagenturen, Freelancer:innen, Design-Studios
Ein Portfolio-Style-Template zur Präsentation aktueller Arbeiten:
- Hervorgehobenes Projekt mit großen visuellen Elementen und kurzer Case Study
- 2–3 weitere aktuelle Projekte im Grid
- Kund:innen-Testimonial
- Team- oder Hiring-Updates
- Kontakt-CTA für potenzielle Kund:innen
Design-Hinweise: Lass die Arbeit für sich sprechen – mit großen, hochwertigen Visuals. Halte Text minimal und fokussiere auf Ergebnisse statt Prozessbeschreibungen.
15. Der Community-Newsletter
Am besten geeignet für: Mitgliederorganisationen, Online-Communities, lokale Unternehmen
Ein community-fokussiertes Template, das Engagement fördert:
- Community-News und Ankündigungen
- Mitglieder-Spotlight oder -Interview
- Kalender für kommende Events
- Diskussionsanstöße oder Umfrage
- User-generated-Content-Bereich
- Beitritts-/Engagement-CTA
Design-Hinweise: Ergänze Mitglieder-Fotos und -Namen (mit Zustimmung), um Community-Gefühl aufzubauen. Warme, inklusive Tonalität und Einladungen zu Antworten und Teilnahme.
Wo findest du kostenlose Newsletter-Templates?
E-Mail-Marketing-Plattformen
Die meisten E-Mail-Marketing-Plattformen bringen kostenlose Templates in ihren Tarifen mit:
| Plattform | Kostenlose Templates | Anpassungs-Level | Free-Plan verfügbar |
|---|---|---|---|
| Brevo | 60+ | Drag-and-Drop-Editor | Ja |
| Mailchimp | 100+ | Drag-and-Drop-Editor | Ja (eingeschränkt) |
| HubSpot | 45+ | Drag-and-Drop-Editor | Ja |
| MailerLite | 80+ | Drag-and-Drop-Editor | Ja |
| Constant Contact | 200+ | Drag-and-Drop-Editor | Nein |
Brevos Template-Bibliothek eignet sich besonders gut für E-Commerce-Unternehmen – mit Templates für Produktankündigungen, Bestellbestätigungen und Promotion-Kampagnen, die sich über Tajo in deine Store-Daten integrieren.
Template-Quellen von Drittanbietern
- Litmus Community: Kostenlose, getestete Templates mit Cross-Client-Kompatibilitätsdaten
- Really Good Emails: Kuratierte Galerie echter Newsletter-Beispiele zur Inspiration
- Stripo: Kostenloser E-Mail-Template-Builder mit 1.500+ Designs
- BeeFree: Drag-and-Drop-Editor mit 200+ kostenlosen responsiven Templates
- MJML: Open-Source-Framework zum Bauen responsiver E-Mail-Templates per Code
Templates für deine Marke anpassen
Essenzielle Anpassungen
Jedes Template braucht diese Modifikationen vor dem Einsatz:
- Logo und Markenfarben: Default-Branding durch eigenes ersetzen
- Typografie: Markenfonts nutzen (mit web-sicheren Fallbacks)
- Fußzeilen-Informationen: Mit deinen Firmendaten und rechtlichen Anforderungen aktualisieren
- Social-Media-Links: Deine echten Profile einfügen
- Abmeldelink: Gesetzlich vorgeschrieben bei jeder Marketing-E-Mail
Fortgeschrittene Anpassungen
Sobald du dich mit einem Template wohl fühlst, erwäge diese Erweiterungen:
- Dynamische Content-Blöcke: Unterschiedlichen Content an unterschiedliche Abonnent:innen-Segmente ausspielen
- Personalisierungs-Tokens: Namen, Standorte oder Präferenzen einfügen
- Bedingte Abschnitte: Basierend auf Abonnent:innen-Attributen Abschnitte ein- oder ausblenden
- Interaktive Elemente: Umfragen, Surveys oder AMP-getriebene Interaktivität ergänzen
Best Practices für Newsletter-Templates
Vor dem Versand testen. Verschicke Test-E-Mails mindestens an Gmail, Outlook, Apple Mail und Yahoo. Nutze Tools wie Litmus oder Email on Acid für umfassendes Cross-Client-Testing.
Bilder optimieren. Komprimiere alle Bilder, um die Ladezeit zu senken. Hinterlege Alt-Text bei jedem Bild für den Fall, dass der Client Bilder blockiert.
Dateigröße niedrig halten. Die gesamte E-Mail-Größe (HTML + Bilder) sollte unter 100 KB fürs HTML und unter 1 MB für den Gesamtinhalt bleiben. Größere E-Mails riskieren, von Gmail abgeschnitten oder von Spam-Filtern blockiert zu werden.
Konsistenz wahren. Nutze dieselbe Template-Struktur für jede Newsletter-Ausgabe. Abonnent:innen entwickeln Lesegewohnheiten rund um vertraute Layouts, und Konsistenz schafft Vertrauen.
Plain-Text einbinden. Stelle immer eine Plain-Text-Alternative bereit für Clients, die kein HTML rendern. Die meisten E-Mail-Plattformen generieren sie automatisch, aber prüfe sie auf Lesbarkeit.
Teste regelmäßig deine E-Mail-Zustellbarkeit. Ein schönes Template ist wertlos, wenn es im Spam landet. Überwache Absender-Reputation und Authentifizierung (SPF, DKIM, DMARC) neben deinen Design-Bemühungen.
Los geht’s
Wähle ein Template, das zu deiner Branche und deinem Content-Stil passt. Starte mit minimalen Anpassungen – Markenfarben, Logo und Fußzeile – und verschicke deine erste Ausgabe. Während du über Öffnungsraten und Klickdaten lernst, was bei deiner Zielgruppe ankommt, iteriere Design und Content-Struktur.
Das beste Newsletter-Template ist nicht das visuell beeindruckendste. Es ist das, das deine Zielgruppe konstant liest, regelmäßig durchklickt und auf das sie sich freut.
Häufig gestellte Fragen
Wo finde ich kostenlose Newsletter-Templates?
Kostenlose Newsletter-Templates gibt es über E-Mail-Marketing-Plattformen wie Brevo, Mailchimp und HubSpot sowie über Template-Marktplätze wie Litmus Community, Email on Acid und Really Good Emails. Die meisten Plattformen bieten 50+ kostenlose Templates, die du anpassen kannst.
Was macht ein gutes Newsletter-Template aus?
Ein gutes Newsletter-Template ist mobil-responsiv, wird in allen E-Mail-Clients korrekt gerendert, hat eine klare visuelle Hierarchie, nutzt web-sichere Schriften und enthält gut strukturierte Abschnitte für Content. Es sollte schnell mit optimierten Bildern laden und Dark Mode unterstützen.
Darf ich kostenlose Newsletter-Templates kommerziell nutzen?
Ja, die meisten kostenlosen Newsletter-Templates aus E-Mail-Marketing-Plattformen sind für die kommerzielle Nutzung lizenziert. Templates von Drittanbietern können unterschiedliche Lizenzen haben – prüfe die Bedingungen, bevor du sie für geschäftliche Kommunikation nutzt.