Newsletter-Vorlagen: kostenlose Downloads, Design-Tipps und beste Beispiele (2026)

Hol dir kostenlose Newsletter-Vorlagen und Design-Inspiration. Mit responsiven HTML-Vorlagen, Design-Best-Practices und Beispielen für jede Branche.

newsletter templates

Was ist die kurze Antwort?

Hol dir kostenlose Newsletter-Vorlagen und Design-Tipps. Brevo enthält responsive, anpassbare Vorlagen im kostenlosen Tarif, ganz ohne Code.

Mehr erfahren
Auf dieser Seite

TL;DR: Eine gute Newsletter-Vorlage ist mobile-responsive, einspaltig, markenkonform und um einen klaren CTA herum gebaut. Brevo enthält über 40 kostenlose responsive Vorlagen im Drag-and-drop-Editor, ganz ohne Code. Canva, Stripo und BEEFree sind solide Alternativen für Designdateien.

Eine starke Newsletter-Vorlage übernimmt die Hauptarbeit deines E-Mail-Marketings, lässt deinen Inhalt professionell wirken, führt Leser:innen zu deinem CTA und funktioniert auf jedem Gerät und in jedem E-Mail-Client einwandfrei.

Dieser Leitfaden behandelt alles rund um Newsletter-Vorlagen: wo du sie kostenlos bekommst, wie du effektive entwirfst und Beispiele aus jeder Branche.

Was eine gute Newsletter-Vorlage ausmacht

Wesentliche Elemente

  1. Mobile-responsives Design, über 60 % der E-Mails werden mobil geöffnet
  2. Klare visuelle Hierarchie, führe das Auge von Headline zu CTA
  3. Markenkonsistenz, Farben, Schriften und Logoplatzierung
  4. Einspaltiges Layout, beste Lesbarkeit über Geräte hinweg
  5. Prominenter CTA, eine klare Aktion pro E-Mail
  6. Preheader-Text, erweitere deine Betreffzeile im Posteingang
  7. Abmeldelink, gesetzlich vorgeschrieben (CAN-SPAM, DSGVO)

Aufbau der Vorlage

┌─────────────────────────┐
│ Logo / Brand Header │
├─────────────────────────┤
│ Hero Image │
├─────────────────────────┤
│ Headline │
│ Body Text (2-3 lines) │
│ [CTA Button] │
├─────────────────────────┤
│ Content Section 2 │
│ [Secondary CTA] │
├─────────────────────────┤
│ Footer / Social Links │
│ Unsubscribe Link │
└─────────────────────────┘
Tajo-Vorlagen

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 6 KB, ohne Build-Schritt
<!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;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</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 &rarr;</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> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Im Browser ansehen</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

Quellen für kostenlose Newsletter-Vorlagen

1. Brevo (empfohlen)

Der kostenlose Tarif von Brevo enthält über 40 responsive Newsletter-Vorlagen direkt im Drag-and-drop-Editor. Kategorien:

  • Willkommens-E-Mails
  • Produktankündigungen
  • Wöchentliche Digests
  • Eventeinladungen
  • Saisonale Kampagnen

Pro: kostenlos, responsive, einfach anzupassen, kein HTML nötig Loslegen: Kostenloses Brevo-Konto erstellen

2. Canva

Canva bietet E-Mail-freundliche Vorlagen, die du mit dem Designtool anpassen kannst.

3. Stripo

Stripo bietet über 1.100 kostenlose responsive E-Mail-Vorlagen, die in jedes ESP exportiert werden können.

4. BEEFree

BEE bietet einen kostenlosen Vorlageneditor mit professionellen Designs.

Vergleich kostenloser Vorlagen-Quellen

QuelleKostenlose VorlagenNo-Code-EditorExport in jedes ESPAm besten für
BrevoÜber 40 responsiveJaNativ (integriert)Kampagnen end-to-end versenden
CanvaViele DesignsJaManueller ExportVisuell orientierte Marketer:innen
StripoÜber 1.100JaJaVielfalt und ESP-Flexibilität
BEEFreeGroße BibliothekJaJaStandalone-Vorlagendesign

Wenn du an einem Ort designen, personalisieren und senden willst, ist Brevo der direkteste Weg. Wenn du nur Designdateien brauchst, um sie in ein anderes Tool zu legen, haben Stripo und BEEFree die größten Bibliotheken.

Best Practices für Newsletter-Vorlagen

Design

  • Nutze max. 600 px Breite für E-Mail-Client-Kompatibilität
  • Halte Schriftgröße 14-16 px für den Fließtext
  • Nutze Button-CTAs statt Textlinks (Mindest-Tap-Target 44x44 px)
  • Beschränke dich auf 2-3 Farben aus deiner Markenpalette
  • Nutze web-sichere Schriften (Arial, Georgia, Verdana) mit Fallbacks

Inhaltslayout

  • Umgekehrte Pyramide: wichtigster Inhalt zuerst
  • F-Pattern-Scanning: Schlüsselinfos links
  • Weißraum: Inhalt nicht überfrachten, ihn atmen lassen
  • Verhältnis Bild zu Text: 40 % Bilder, 60 % Text (für Zustellbarkeit)

Technisch

  • Immer Alt-Text für Bilder einfügen
  • Über Clients testen: Gmail, Outlook, Apple Mail, Yahoo
  • E-Mail-Gesamtgröße unter 100 KB halten für schnelles Laden
  • Inline-CSS für konsistentes Rendering nutzen

Newsletter-Vorlagen nach Typ

1. Willkommens-Newsletter-Vorlage

Zweck: einen guten ersten Eindruck hinterlassen Schlüsselelemente: Markenvorstellung, Value Proposition, was erwartet wird, Quick-Win-CTA

2. Wochen-Digest-Vorlage

Zweck: regelmäßige Content-Zusammenfassung Schlüsselelemente: kuratierte Abschnitte, kurze Zusammenfassungen, Weiterlesen-Links

3. Produktankündigungs-Vorlage

Zweck: neue Produkte oder Features einführen Schlüsselelemente: Produktbild, Schlüsselvorteile, Preis, Kauf-CTA

4. Promo-Vorlage

Zweck: Verkäufe mit Angeboten antreiben Schlüsselelemente: Rabattcode, Produktbilder, Dringlichkeitselement, Shop-CTA

5. Bildungs-Vorlage

Zweck: Mehrwert liefern und Vertrauen aufbauen Schlüsselelemente: Tipps oder How-to-Inhalte, sauberes Layout, dezenter CTA

Newsletter in Brevo erstellen

  1. Melde dich für Brevos kostenlosen Tarif an
  2. Wähle eine Vorlage aus der Bibliothek oder starte von Null
  3. Passe an per Drag-and-drop: Logo, Farben, Content-Blöcke hinzufügen
  4. Vorschau auf Desktop und Mobile
  5. Teste, indem du an dich selbst und Kolleg:innen versendest
  6. Plane oder versende sofort

Der Editor von Brevo speichert deine benutzerdefinierten Vorlagen zur Wiederverwendung, und du kannst markenkonforme Vorlagen-Bibliotheken für dein Team anlegen.

Tipps für mehr Engagement

  • Personalisiere Begrüßung und Inhalte auf Basis von Segmenten
  • A/B-teste verschiedene Layouts, um herauszufinden, was funktioniert (A/B-Testing-Leitfaden)
  • Halte es scanbar, Leser:innen verbringen im Schnitt 11 Sekunden pro E-Mail
  • Ein primärer CTA, gib Leser:innen nicht zu viele Optionen
  • Konsistenter Zeitplan, trainiere Leser:innen darauf, deine E-Mails zu erwarten und zu öffnen

Vorlagen mit Kundendaten verbinden

Eine ausgefeilte Vorlage ist nur so gut wie das Publikum, das sie erreicht. Die Teams, die am meisten aus Newslettern holen, verbinden ihre Shop-Daten mit ihrem E-Mail-Tool, damit jeder Versand zielgerichtet ist statt generisch. Tajo synchronisiert Shopify-Kund:innen-, Produkt- und Bestelldaten in Brevo, damit dieselbe Vorlage pro Segment personalisiert werden kann: ein Willkommens-Layout für neue Abonnent:innen, eine Produktankündigung für frühere Käufer:innen dieser Kategorie oder ein Win-Back-Angebot für abgesprungene Kund:innen. Die Vorlage bleibt konsistent, Inhalt und Zielgruppe passen sich automatisch an.

Nächste Schritte

  1. Starte mit Brevos kostenlosem Tarif und erkunde die Vorlagenbibliothek
  2. Lies unseren Newsletter-Design-Leitfaden für fortgeschrittene Tipps
  3. Sieh dir Newsletter-Beispiele zur Inspiration an
  4. Richte deine erste E-Mail-Kampagne ein

Häufig gestellte Fragen

Wo bekomme ich kostenlose Newsletter-Vorlagen?

Brevo bietet Dutzende kostenlose, responsive Newsletter-Vorlagen im Drag-and-drop-E-Mail-Editor, ganz ohne Designkenntnisse. Kostenlose Vorlagen findest du auch auf Plattformen wie Canva, Stripo und BEEFree.

Was macht eine gute Newsletter-Vorlage aus?

Eine gute Newsletter-Vorlage ist mobile-responsive, hat eine klare visuelle Hierarchie, nutzt deine Markenfarben, enthält einen prominenten CTA, lädt schnell und funktioniert in allen E-Mail-Clients (Gmail, Outlook, Apple Mail).

Brauche ich HTML-Kenntnisse, um Newsletter-Vorlagen zu erstellen?

Nein. Moderne E-Mail-Plattformen wie Brevo bieten Drag-and-drop-Editoren, die schöne, responsive Vorlagen ohne Code erstellen. Du kannst Farben, Layouts, Bilder und Schriften visuell anpassen.

Wie oft sollte ich einen Newsletter versenden?

Wähle eine Kadenz, die du konsistent durchhalten kannst. Ein vorhersagbarer wöchentlicher oder monatlicher Zeitplan trainiert Leser:innen darauf, deine E-Mails zu erwarten und zu öffnen, was mehr zählt als die reine Häufigkeit.

Beantrage frühzeitigen Zugang

Gib deinen Vornamen und deine geschäftliche E-Mail-Adresse ein. Wir senden dir einen Link, mit dem du deine Anfrage für den Tajo-Zugang bestätigst.

Brevo erhalten