Email Template Builder: HTML-E-Mails

Was ist der Email Template Builder?

Der Email Template Builder ist ein visueller, blockbasierter Editor zum Erstellen responsiver HTML-E-Mail-Templates direkt im Browser. Du fügst Inhaltsblöcke hinzu — Header, Textabsätze, Buttons, Bilder, Trennlinien, Zweispalten-Layouts und Footer — ordnest sie mit Pfeilsteuerung neu an und bearbeitest jeden Block über ein Eigenschaftspanel. Eine Live-Iframe-Vorschau wird beim Aufbau aktualisiert. Wenn du fertig bist, generiert das Tool ein vollständiges tabellenbasiertes HTML-E-Mail mit Inline-CSS, das mit Gmail, Outlook und Apple Mail kompatibel ist. Keine Design-Software, kein Coding und kein Konto erforderlich.

Hauptfunktionen

• Visueller blockbasierter E-Mail-Editor — Erstelle deine E-Mail, indem du Inhaltsblöcke hinzufügst und neu anordnest. Sieben Blocktypen: Header, Text, Button, Bild, Trennlinie, Zwei Spalten und Footer.
• Header-, Text-, Button-, Bild-, Trennlinien- und Footer-Blöcke — Jeder Block hat sein eigenes Eigenschaftspanel. Header-Blöcke haben Hintergrund- und Textfarb-Picker. Textblöcke ermöglichen die Wahl der Schriftgröße (12px–24px) und Ausrichtung (links, mitte, rechts). Button-Blöcke akzeptieren ein Label, eine URL und ein Farbpaar. Bildblöcke nehmen eine URL, einen Alt-Text und eine Breite entgegen.
• Live-Vorschau mit Mobil-/Desktop-Toggle — Das Editor-Panel enthält eine Echtzeit-Iframe-Vorschau. Wechsle zwischen Desktop (volle Breite) und Mobil (375px), ohne den Editor-Tab zu verlassen.
• Farben, Schriften und Abstände anpassen — Globale E-Mail-Einstellungen steuern den Body-Hintergrund (#f4f4f4 Standard), den Inhalts-Hintergrund (#ffffff), die Primärfarbe, die maximale Breite (480px, 600px oder 640px) und die Schriftfamilie (Arial, Georgia, Helvetica oder Verdana).
• Sauberes, responsives HTML exportieren — Der HTML-Tab zeigt den vollständig generierten Quellcode: ein standardkonformes tabellenbasiertes Layout mit Inline-CSS, Preheader-Text, MSO VML-Button-Fallbacks für Outlook und eine responsive Media Query, die auf Bildschirmen unter 600px auf volle Breite zusammenbricht.
• HTML in die Zwischenablage kopieren — Der „HTML kopieren"-Button kopiert den gesamten generierten HTML-String mit einem Klick, mit einem „Kopiert!"-Bestätigungsstatus.
• Vorgefertigte Template-Starter — Drei Starter-Templates laden sofort: Willkommen, Newsletter und Promo. Jedes enthält vorkonfigurierte Blöcke für seinen Zweck. Willkommen und Newsletter verwenden deine aktuelle Primärfarbe; Promo verwendet seinen eigenen roten Akzent.
• 100 % clientseitig — Kein E-Mail-Inhalt wird an einen Server übertragen. Funktioniert vollständig offline, sobald die Seite geladen ist.

Anleitung zur Nutzung des Email Template Builders

Schritt 1: Globale Einstellungen konfigurieren

Öffne den Demnächst verfügbar: Email Template Builder und suche die Karte „E-Mail-Einstellungen" im linken Panel. Fülle folgende Felder aus:

• Betreffzeile — Wird zum <title>-Tag im exportierten HTML (in einigen E-Mail-Clients sichtbar und für die Barrierefreiheit verwendet).
• Preheader-Text — Die versteckte Vorschauzeile, die nach dem Betreff in der Posteingangsvorschau erscheint. Standard ist "Vorschautext, der im Posteingang erscheint...". Setze ihn auf eine überzeugende einzeilige Zusammenfassung.
• Body-Hintergrund / Inhalts-Hintergrund — Farbpicker ermöglichen die Eingabe eines Hex-Werts oder die Nutzung des nativen Farbpickers. Der standardmäßige hellgraue Body (#f4f4f4) auf weißem Inhalt (#ffffff) entspricht dem visuellen Muster der meisten großen Marken.
• Primärfarbe — Wird automatisch als Standardhintergrund für neue Header- und Button-Blöcke verwendet.
• Maximale Breite — Wähle 480px (kompakt), 600px (Standard, Vorgabe) oder 640px (breiter).
• Schriftfamilie — Arial (Standard), Georgia, Helvetica oder Verdana.

Schritt 2: Template laden oder Blöcke hinzufügen

Option A: Einen Template-Starter laden. Klicke auf „Willkommen", „Newsletter" oder „Promo" in der Karte „Template-Starter". Der Editor lädt einen vollständigen Satz vorkonfigurierter Blöcke für diesen Anwendungsfall. Das Willkommens-Template enthält einen Header, einen Begrüßungstext, einen „Loslegen"-CTA-Button, eine Trennlinie und einen Footer. Das Promo-Template verwendet eine fest kodierte rote (#e53e3e) Header- und Button-Farbe und enthält einen Bildplatzhalter. Die Willkommens- und Newsletter-Starter verwenden deine aktuelle Primärfarbe; das Promo-Template verwendet sein eigenes rotes Farbschema.

Option B: Von Grund auf aufbauen. Klicke auf einen beliebigen Blocktyp in der Karte „Block hinzufügen". Verfügbare Blöcke: Header, Text, Button, Bild, Trennlinie, Zwei Spalten, Footer. Jeder neue Block erscheint am Ende der Blockliste und öffnet automatisch sein Bearbeitungspanel.

Schritt 3: Jeden Block bearbeiten

Klicke auf einen Block in der „Blöcke"-Liste, um seinen Editor zu öffnen. Änderungen werden sofort in der Live-Vorschau sichtbar.

• Header-Block: Felder für Überschrift und Unterüberschrift sowie Hintergrund- und Textfarb-Picker.
• Textblock: Ein Textarea für Inhalt (Zeilenumbrüche erzeugen separate <p>-Tags), ein Dropdown für die Schriftgröße (12px bis 24px) und Ausrichtung links/mitte/rechts.
• Button-Block: Labeltext, Ziel-URL, Button-Hintergrundfarbe und Button-Textfarbe. Das generierte HTML enthält MSO VML-Markup, damit Outlook einen echten Button anstelle eines einfachen Links rendert.
• Bildblock: Bild-URL (oder eine lokale Datei hochladen), Alt-Text und Breite (z. B. 100% oder 400px). Hochgeladene Bilder werden als Base64-Daten-URIs eingebettet.
• Trennlinienblock: Farbpicker und Dicken-Eingabe (1–10px).
• Spaltenblock: Zwei separate Textareas für den Inhalt der linken und rechten Spalte.
• Footer-Block: Ein Textarea für den Footer-Text (Zeilenumbrüche werden zu separaten Absätzen), ein Link-Label und ein Link-URL-Feldpaar (z. B. für einen Abmeldelink) sowie Hintergrund- und Textfarb-Picker.

Nutze die Pfeil-nach-oben/unten-Buttons zum Neuanordnen von Blöcken. Nutze das Papierkorb-Symbol zum Löschen eines Blocks.

Schritt 4: Vorschau und Export

Wechsle zum Vorschau-Tab für eine ganzseitige Ansicht der E-Mail. Nutze den Desktop/Mobil-Toggle, um das responsive Layout bei 375px zu überprüfen.

Wechsle zum HTML-Code-Tab, um den generierten Quellcode zu sehen. Klicke auf den Textarea, um den gesamten Text auszuwählen, oder klicke auf „HTML kopieren", um ihn in die Zwischenablage zu kopieren. Der Code ist bereit zum Einfügen in jeden ESP (E-Mail-Dienstanbieter) wie Mailchimp, SendGrid oder HubSpot.

Praktische Beispiele

Beispiel 1: Produktlaunch-Ankündigung

Beginne mit dem „Promo"-Template-Starter. Ersetze den Header-Text durch deinen Produktnamen und Einführungs-Slogan. Aktualisiere den #e53e3e-Header-Hintergrund auf deine Markenfarbe mithilfe des Farbpickers. Ersetze die Platzhalter-Bild-URL durch deinen Produkt-Screenshot. Bearbeite den Textblock, um den Hauptvorteil in ein bis zwei Sätzen zu beschreiben. Aktualisiere das Button-Label („Jetzt vorbestellen") und die URL. Setze den Preheader-Text auf "Einführung von [Produkt] — ab heute verfügbar." Exportiere das HTML und füge es in deinen ESP ein.

Beispiel 2: Wöchentlicher Newsletter

Lade das „Newsletter"-Template. Setze den Betreff auf "Wöchentliche Zusammenfassung — Woche vom 3. März 2026". Bearbeite den Feature-Story-Textblock mit deinem Leitartikel. Füge darunter einen zweiten „Zwei Spalten"-Block für zwei kürzere Artikel nebeneinander ein. Füge einen „Button"-Block mit „Gesamtes Archiv lesen" ein, der auf deine Website verlinkt. Passe den Footer-Text an, um deinen Abmeldelink und die physische Postanschrift gemäß CAN-SPAM einzuschließen.

Beispiel 3: Willkommens-E-Mail-Sequenz

Nutze das „Willkommen"-Template. Ändere die Header-Unterüberschrift auf "Dein Konto ist bereit." Bearbeite den Body-Text zu drei kurzen Absätzen: was der Nutzer tun kann, wo er Hilfe findet und wie er den Support kontaktiert. Ersetze die URL des „Loslegen"-Buttons durch die tatsächliche Onboarding-URL. Wechsle zum Vorschau-Tab, schalte auf Mobilansicht um und bestätige, dass der gesamte Text bei 375px lesbar ist. Exportieren und in den Automatisierungs-Workflow deines ESPs hochladen.

Tipps und Best Practices

Primärfarbe vor dem Laden eines Templates setzen. Die Template-Starter wenden deine aktuelle Primärfarbe auf neue Header- und Button-Blöcke an. Das Ändern der Primärfarbe nach dem Laden eines Templates aktualisiert die bestehenden Blöcke nicht rückwirkend — der Farbpicker jedes Blocks ist unabhängig bearbeitbar.

Das Preheader-Feld nutzen. Viele Builder ignorieren es, aber der Preheader-Text beeinflusst die Öffnungsrate direkt. Das generierte HTML versteckt ihn mit display:none; ... max-height:0px; overflow:hidden — er erscheint nicht visuell in der E-Mail, wird aber in der Posteingangsvorschau angezeigt.

Schriftgrößen unter 14px rendern auf Mobilgeräten schlecht. Das Schriftgrößen-Dropdown des Textblocks geht bis zu 12px. In der Praxis: 14px oder größer für Fließtext verwenden. 12px nur für rechtliche Hinweise oder Footer-Kleingedrucktes.

Die 600px maximale Breite testen. Die Standard-600px maximale Breite funktioniert gut in allen wichtigen Clients. Die 480px-Option eignet sich für schmalere Layouts; 640px ist nur für Clients geeignet, die keine eigenen Breitenbeschränkungen anwenden.

Outlook VML-Buttons erfordern keine zusätzlichen Schritte. Das generierte HTML enthält bereits den MSO VML-bedingten Kommentarblock um jeden Button. Wenn du in einen ESP einfügst, stelle sicher, dass der ESP keine HTML-Kommentare entfernt, da das VML-Markup auf sie angewiesen ist.

Häufige Probleme und Fehlerbehebung

Live-Vorschau zeigt einen leeren weißen Bereich. Das passiert, bevor Blöcke hinzugefügt werden. Füge mindestens einen Block hinzu oder lade einen Template-Starter — der Iframe füllt sich sofort.

Bildblock zeigt ein defektes Bild. Das Tool zeigt die Bild-URL direkt in einem <img>-Tag an. Überprüfe, ob die URL öffentlich zugänglich ist (nicht hinter einer Authentifizierung) und HTTPS verwendet. Der eingegebene Alt-Text wird im exportierten HTML für die Barrierefreiheit eingeschlossen.

Kopiertes HTML zeigt ein fehlerhaftes Layout in Outlook. Bestätige, dass die Schriftfamilien-Einstellung einen websicheren Stapel verwendet (z. B. Arial, Helvetica, sans-serif). Web-Fonts (Google Fonts, benutzerdefinierte Fonts) werden in Outlook nicht gerendert. Alle vier Schriftoptionen im Tool sind websichere Stapel.

Zweispaltenblock bricht auf Mobilgeräten auf eine Spalte zusammen. Das ist das erwartete Verhalten der MSO-bedingten Kommentare und des Inline-Block-Layouts. Auf Bildschirmen unter 600px setzt die Media Query .email-container auf width: 100%, und die 48% breiten Inline-Block-Spalten umbrechen natürlich. Es gibt keine Option, Spalten nebeneinander auf Mobilgeräten zu erzwingen.

Template-Starter verwendet nicht meine Markenfarbe. Überprüfe die Primärfarben-Einstellung in der E-Mail-Einstellungskarte, bevor du auf einen Template-Starter-Button klickst. Die Templates lesen die Primärfarbe zum Ladezeitpunkt — das nachträgliche Ändern erfordert das manuelle Aktualisieren des Farbpickers jedes Blocks.

Datenschutz und Sicherheit

Der Email Template Builder erstellt und zeigt E-Mail-HTML vollständig in deinem Browser an. Kein Template-Inhalt, keine Betreffzeilen oder Bild-URLs werden an einen Server übertragen. Die Live-Vorschau verwendet ein iframe mit sandbox="allow-same-origin" — im Vorschaufenster werden keine Skripte ausgeführt. Das Tool funktioniert vollständig offline, sobald die Seite geladen ist, was es sicher für vertrauliche Marketinginhalte oder Kundenmaterialien macht.

Häufig gestellte Fragen

Ist der Email Template Builder kostenlos? Ja. Der vollständige Block-Editor, alle sieben Blocktypen, drei Template-Starter, Live-Vorschau und HTML-Export sind völlig kostenlos und ohne Konto zugänglich. Das Tool ist unter Demnächst verfügbar: /web/social/email-template-builder verfügbar.

Funktioniert der Email Template Builder offline? Ja, sobald die Seite geladen ist. Die gesamte HTML-Generierung erfolgt in JavaScript auf deinem Gerät. Die Live-Vorschau lädt Bild-URLs von ihrer Quelle (was eine Verbindung erfordert), aber der Editor, die Block-Verwaltung und der HTML-Export funktionieren alle offline.

Sind meine Daten beim Email Template Builder sicher? Dein E-Mail-Inhalt, deine Betreffzeilen und Designentscheidungen verlassen deinen Browser nie. Das Tool generiert HTML lokal und stellt keine Serveranfragen mit deinen Daten. Es ist sicher, vertrauliche Kunden-E-Mails oder proprietäre Kampagneninhalte zu erstellen.

Welche E-Mail-Clients unterstützt das generierte HTML? Das Tool generiert tabellenbasiertes HTML mit Inline-CSS, die Layoutmethode mit der breitesten E-Mail-Client-Kompatibilität. Es enthält MSO VML-Bedingungen für das Outlook-Button-Rendering und eine responsive Media Query für mobile Clients. Es ist für Gmail, Outlook (2016–2024), Apple Mail und Yahoo Mail konzipiert.

Kann ich mehr als sieben Blocktypen hinzufügen? Der aktuelle Editor unterstützt sieben Blocktypen: Header, Text, Button, Bild, Trennlinie, Spalten und Footer. Du kannst denselben Blocktyp mehrmals hinzufügen, um komplexe Layouts zu erstellen — zum Beispiel abwechselnde Text- und Bildblöcke oder mehrere Button-Blöcke.

Wie füge ich einen Abmeldelink hinzu? Füge einen Footer-Block hinzu. Der Footer-Editor enthält ein dediziertes Link-Label-Feld und ein Link-URL-Feld. Gib den Linktext (z. B. „Abmelden") und die Ziel-URL ein. Das generierte HTML rendert dies als klickbaren <a>-Tag unterhalb des Footer-Texts. Du kannst die URL auch nach dem Export durch das Abmelde-Merge-Tag deines ESPs ersetzen.

Was ist das Preheader-Text-Feld? Preheader-Text ist eine kurze Zeichenkette (typischerweise 40–130 Zeichen), die E-Mail-Clients nach der Betreffzeile in der Posteingangsvorschau anzeigen. Er ist im gerenderten E-Mail mit CSS ausgeblendet. Das Tool enthält ihn im generierten HTML in einem <div> mit display:none und max-height:0px.

Kann ich erstellte Templates speichern? Ja. Glyph Widgets-Unterstützer können das PresetsPanel verwenden, um den gesamten Editor-Zustand — alle Blöcke, Einstellungen und Inhalte — als benanntes Preset zu speichern und in einem browserlokalen IndexedDB zu laden.

Welche maximale Breite sollte ich verwenden? 600px ist der Branchenstandard und funktioniert korrekt in allen wichtigen Clients. Verwende 480px, wenn du ein schmaleres, fokussierteres Layout möchtest. Verwende 640px nur, wenn du bestätigt hast, dass dein Ziel-ESP und die Clients damit korrekt umgehen — einige ältere Outlook-Versionen wenden ihre eigenen Breitenbeschränkungen an.

Unterstützt das Tool benutzerdefinierte Schriften? Nein. Die vier Schriftfamilien im Schrift-Dropdown sind alle websichere Stapel: Arial, Georgia, Helvetica und Verdana. Web-Fonts werden nicht unterstützt, da die meisten E-Mail-Clients — insbesondere Outlook — keine externen Schriftdateien laden.

Verwandte Tools

• Demnächst verfügbar: Email Extractor — E-Mail-Adressen aus beliebigem Text extrahieren und validieren, dann mit den hier erstellten Templates verwenden.
• Demnächst verfügbar: Social Meta Tags — Open Graph- und Twitter-Card-Tags generieren, um zu optimieren, wie deine Kampagnen-Landingpages beim Teilen in sozialen Netzwerken aussehen.
• Demnächst verfügbar: Hashtag Generator — Relevante Hashtags für die Social-Media-Posts generieren, die den Traffic zu deinen E-Mail-Anmeldeformularen lenken.

Jetzt Email Template Builder ausprobieren: Demnächst verfügbar: Email Template Builder von Glyph Widgets