Das Wichtigste in Kürze

• Eine uneinheitliche Markendarstellung lässt sich beheben. Ihre Website enthält bereits alles, was Sie brauchen: Farben, Schriftarten, Abstände und Layoutmuster. Die Aufgabe besteht darin, diese Elemente zu übernehmen, nicht sie neu zu erfinden.
• KI schließt die Lücke. Sie können einem KI-Tool das Design Ihrer Website beschreiben und es bitten, E-Mail-taugliches HTML zu generieren, das diese Gestaltungsentscheidungen widerspiegelt – einschließlich tabellenbasierter Layouts, Inline-CSS und responsiver Struktur.
• Der HTML-Editor von Benchmark Email ist der letzte Schritt, nicht der erste. Erstellen oder generieren Sie Ihre Vorlage außerhalb der Plattform, fügen Sie dann den HTML-Code ein und versenden Sie die E-Mail. So trifft Ihr individuelles Design auf die Zustellbarkeits- und Tracking-Infrastruktur von Benchmark Email.
• Eine solide Vorlage bringt Sie weit. Eine gut gestaltete E-Mail-Vorlage im Stil Ihrer Marke lässt sich für Newsletter, Werbeaktionen und Ankündigungen wiederverwenden, indem Sie einfach die Inhalte austauschen. Sie brauchen nicht für jeden Versand ein neues Design.

 

Sie haben viel Zeit investiert, um eine Website zu erstellen, die Ihr Unternehmen widerspiegelt: die richtigen Farben, die richtigen Schriftarten, ein Layout, das durchdacht wirkt. Dann trägt sich jemand in Ihre Liste ein und erhält eine E-Mail, die aussieht, als käme sie von einem völlig anderen Unternehmen.

Das passiert ständig. Mit Webflow, Squarespace und WordPress lässt sich ganz einfach eine professionelle Website gestalten. E-Mail-Marketing-Tools machen den Versand von Kampagnen einfach. Doch die beiden Welten sind nicht miteinander verbunden, sodass die meisten kleinen Unternehmen am Ende zwei völlig unterschiedliche visuelle Identitäten haben – eine für das Web und eine für das Postfach. Das Ergebnis ist ein uneinheitliches Erlebnis für Ihre Abonnenten und eine Marke, die nicht den Wiedererkennungswert aufbaut, den sie haben sollte.

In diesem Beitrag erfahren Sie, wie Sie die Design-DNA Ihrer Website erfassen und daraus eine E-Mail-Vorlage im Stil Ihrer Marke erstellen, die tatsächlich passt – mit KI, die Ihnen die Hauptarbeit abnimmt, und dem HTML-Editor von Benchmark Email, um alles zusammenzuführen. Sie müssen nicht bei null anfangen. Sie brauchen nur einen besseren Workflow.

Das Problem der fehlenden Markenkonsistenz

Wenn sich ein neuer Abonnent in Ihre Liste einträgt, hat er durch Ihre Website bereits ein Bild von Ihrer Marke im Kopf. Ihre E-Mail ist danach die erste direkte Kommunikation. Wenn die E-Mail wie eine generische Vorlage aussieht, auf die einfach Ihr Logo gesetzt wurde, beginnen Sie die Beziehung mit einer kleinen, aber echten Vertrauenslücke.

Markenkonsistenz ist nicht nur eine ästhetische Kleinigkeit. Sie schafft Wiedererkennung, stärkt die Glaubwürdigkeit und gibt Abonnenten das Gefühl, von jemandem zu hören, den sie bereits kennen. Eine E-Mail, die wie Ihre Website aussieht, schließt diesen Kreis. Eine, die das nicht tut, setzt ihn jedes Mal wieder zurück.

Die gute Nachricht: Den Großteil der Designarbeit haben Sie bereits erledigt. Ihre Website liefert alle Antworten. Sie müssen nur wissen, wo Sie suchen müssen.

Schritt 1: Ermitteln Sie die Design-DNA Ihrer Website

Bevor Sie ein Tool öffnen, nehmen Sie sich fünf Minuten Zeit, um die visuellen Grundlagen Ihrer Website zu dokumentieren. Das ist Ihr Design-Briefing, mit dem Sie sowohl Ihre KI-Prompts als auch Ihre finale Vorlage steuern.

Farben

Öffnen Sie Ihre Website und nutzen Sie die Entwicklertools Ihres Browsers (Rechtsklick, Untersuchen), um die Hex-Codes Ihrer wichtigsten Farben zu finden. Achten Sie auf:

• Ihre primäre Markenfarbe (meist bei Buttons, Links oder Akzenten)
• Ihre Sekundär- oder Hintergrundfarbe
• Die Textfarbe Ihrer Überschriften
• Die Farbe Ihres Fließtexts

Notieren Sie sich diese Werte. Sie brauchen die exakten Hex-Codes, keine Näherungswerte.

Schriftarten

Prüfen Sie im CSS Ihrer Website, welche Schriftarten verwendet werden. Klicken Sie in den Entwicklertools auf eine Überschrift und suchen Sie im Bereich „Styles“ nach font-family. Wiederholen Sie das für den Fließtext. Notieren Sie sich auch die Schriftgrößen, typischerweise etwa 32px für H1, 20px für H2 und 16px für den Fließtext.

Beachten Sie dabei Folgendes: Benutzerdefinierte Webfonts (Google Fonts, Adobe Fonts) funktionieren in E-Mails nicht zuverlässig. Sie benötigen daher Ersatzschriften: Georgia oder Times New Roman für Serifenschriften, Arial oder Helvetica für serifenlose Schriften. Wenn Ihre Website eine benutzerdefinierte Schriftart verwendet, bestimmen Sie schon jetzt die ähnlichste sichere Alternative, damit Ihr KI-Prompt diese verwenden kann.

Layoutstruktur

Sehen Sie sich einige Seiten Ihrer Website an und notieren Sie wiederkehrende Muster. Ist das Layout überwiegend zentriert, mit Inhalten in einer einzigen Spalte? Verwenden Sie ein zweispaltiges Raster mit einem Bild auf der einen und Text auf der anderen Seite? Gibt es oben einen einheitlichen Header mit Ihrem Logo und darunter einen Hero-Bereich? E-Mail-Layouts funktionieren am besten als einspaltige oder einfache zweispaltige Strukturen. Ermitteln Sie also, welches vorhandene Muster sich am direktesten übertragen lässt.

Abstände und visueller Rhythmus

Achten Sie darauf, wie viel Freiraum Ihre Website zwischen den Abschnitten lässt. Großzügige Abstände, engere Abstände oder etwas dazwischen? Diese Abstände prägen das Markengefühl stärker, als den meisten bewusst ist. Wenn Sie sie in der E-Mail nachbilden, wirkt das Design stimmig, auch wenn sich die beiden Formate technisch stark unterscheiden.

Schritt 2: Mit KI Ihre gebrandete E-Mail-Vorlage erstellen

Mit Ihren Designnotizen können Sie nun ein KI-Tool (ChatGPT, Claude o. Ä.) per Prompt eine erste HTML-E-Mail-Vorlage erstellen lassen. Entscheidend ist, Ihre Markenmerkmale genau zu beschreiben, damit das Ergebnis Ihrer tatsächlichen Website entspricht und nicht einer generischen Vorlage.

Hier ist ein Beispiel für einen Prompt, der gut funktioniert:

„Erstelle eine responsive HTML-E-Mail-Vorlage für ein kleines Unternehmen. Verwende ein tabellenbasiertes Layout mit Inline-CSS (keine externen Stylesheets). Die E-Mail soll 600px breit sein und zentriert auf einem hellgrauen Hintergrund (#f5f5f5) stehen. Der Inhaltsbereich soll einen weißen Hintergrund (#ffffff) mit 40px Innenabstand haben. Markenfarben: primäre Buttonfarbe #2D5BE3, Überschriftenfarbe #1A1A1A, Fließtextfarbe #444444. Schriftarten: Arial, Helvetica, sans-serif für den gesamten Text. Überschriftengröße: 28px fett; Fließtext: 16px mit einer Zeilenhöhe von 1,6. Füge oben einen Platzhalter für das Logo, eine Hero-Überschrift, einen Fließtextbereich mit zwei Absätzen und einen einzelnen CTA-Button ein. Gestalte die Vorlage mobil-responsiv mit Media Queries, die die Elemente bei 600px auf volle Breite untereinander anordnen.“

Einige Punkte, die diesen Prompt so wirkungsvoll machen:

Er legt ein tabellenbasiertes Layout und Inline-CSS fest und signalisiert der KI damit, dass Sie E-Mail-kompatibles HTML benötigen und kein Webseiten-HTML. Er nennt exakte Hex-Codes statt Farbnamen. Er benennt konkrete Fallback-Schriftarten. Er beschreibt die Struktur (Logo, Hero-Bereich, Textteil, CTA), statt die KI raten zu lassen. Außerdem fordert er ausdrücklich eine mobile Responsivität.

Das erste Ergebnis wird nicht perfekt sein. Betrachten Sie es als soliden ersten Entwurf. Prüfen Sie es, bitten Sie die KI, das Padding anzupassen, eine Schriftgröße zu ändern oder einen Abschnitt hinzuzufügen, und optimieren Sie es schrittweise, bis es Ihre tatsächliche Marke widerspiegelt.

Schritt 3: HTML prüfen und verfeinern

Sobald die KI ein Template erstellt hat, öffnen Sie es in einem Browser, um zu sehen, wie es dargestellt wird. Achten Sie auf Folgendes:

• Stimmen die Farben mit denen überein, die Sie von Ihrer Website übernommen haben?
• Wirkt die Schriftgröße stimmig mit der Typografie Ihrer Website?
• Passen die Abstände, oder wirkt alles zu gedrängt oder zu weit auseinandergezogen?
• Sieht der Button-Stil (Farbe, abgerundete Ecken, Padding) so aus, als gehöre er auf Ihre Website?

Nehmen Sie Änderungen direkt im HTML vor. Auch wenn Sie kein Entwickler sind, lassen sich kleine Anpassungen wie das Aktualisieren eines Hex-Codes oder eines Schriftgrößenwerts leicht finden und umsetzen. Der KI-Prompt hat Ihnen beschriftete Inline-Styles geliefert, sodass sich jeder Wert an einer vorhersehbaren Stelle befindet.

Wenn etwas nicht wie erwartet dargestellt wird, fügen Sie den problematischen Abschnitt erneut in die KI ein und bitten Sie sie, ein bestimmtes Problem zu beheben: „Der CTA-Button ist nicht zentriert. Passe das HTML so an, dass der Button unabhängig von der Bildschirmgröße zentriert ist.“

Schritt 4: Template in den HTML-Editor von Benchmark Email übertragen

Wenn Sie mit der Darstellung des Templates im Browser zufrieden sind, übertragen Sie es in Benchmark Email und verknüpfen Sie es mit Ihrer tatsächlichen Liste.

1. Kopieren Sie den vollständigen HTML-Code aus Ihrer Datei.
2. Erstellen Sie in Benchmark Email eine neue Kampagne und wählen Sie die Option HTML-Editor.
3. Fügen Sie Ihren HTML-Code in den Editor ein.
4. Prüfen Sie mit der Vorschaufunktion die Darstellung auf Desktop und Mobilgeräten.
5. Senden Sie sich selbst eine Test-E-Mail und öffnen Sie sie in Gmail, Apple Mail und auf Ihrem Smartphone.
6. Nehmen Sie in der Codeansicht letzte Anpassungen vor und speichern Sie anschließend die Vorlage.

Ab jetzt ist die Vorlage wiederverwendbar. Jedes Mal, wenn Sie einen Newsletter, eine Werbeaktion oder eine Ankündigung versenden möchten, laden Sie die Vorlage, tauschen Überschrift und Fließtext aus, aktualisieren den CTA-Link und senden ab. Das Design bleibt einheitlich, weil die Struktur feststeht. Nur der Inhalt ändert sich.

Ihre Kampagne in Benchmark Email erhält vollständiges Tracking: Öffnungsraten, Klickraten und Link-Performance. Sie erhalten ein markenkonformes Design und dazu Zustellbarkeit und Reporting auf Plattformniveau. Genau das ist die Brücke.

Tipps, damit Ihre E-Mail-Vorlage langfristig markenkonform bleibt

• Bewahren Sie Ihre Design-Tokens an einem leicht zugänglichen Ort auf. Führen Sie ein einfaches Dokument mit Ihren Hex-Codes, Schriftnamen und allen anderen Werten, die Sie von Ihrer Website übernommen haben. Wenn Ihre Website aktualisiert wird, aktualisieren Sie das Dokument und nutzen Sie es, um auch Ihre E-Mail-Vorlage aufzufrischen.
• Aktualisieren Sie beides gemeinsam. Wenn Sie Ihre Website neu gestalten, sollten Sie Ihre E-Mails nicht vernachlässigen. Betrachten Sie die E-Mail-Vorlage als Designelement, das zusammen mit Ihrer Website existiert und nicht unabhängig von ihr.
• Erstellen Sie eine Vorlage pro Anwendungsfall. Eine Newsletter-Vorlage, eine Werbevorlage und eine Vorlage für Transaktions-E-Mails können dieselbe Designsprache nutzen, aber leicht unterschiedlich aufgebaut sein. Wenn Sie sie bei dieser ersten Arbeit gemeinsam erstellen, sparen Sie später Zeit.
• Lassen Sie die KI die Vorlage auch pflegen. Wenn Sie die Vorlage später aktualisieren müssen, können Sie den HTML-Code wieder in ein KI-Tool einfügen und um konkrete Änderungen bitten, etwa einen zweispaltigen Produktbereich hinzuzufügen oder die Farbpalette zu aktualisieren. Derselbe Workflow, mit dem die Vorlage erstellt wurde, kann sie auch erweitern.

Häufig gestellte Fragen

Muss ich programmieren können, um das umzusetzen?

Nein. Die KI erstellt den HTML-Code auf Grundlage Ihrer schriftlichen Beschreibung. Ihre Aufgabe ist es, das Ergebnis zu prüfen und zu beschreiben, was geändert werden muss – nicht, selbst Code zu schreiben. Der HTML-Editor von Benchmark Email bietet eine Codeansicht für kleine Textänderungen, aber Sie müssen HTML nicht verstehen, um ihn zu nutzen.

Was ist, wenn meine Website eine eigene Schriftart oder eine Google Font verwendet, die in E-Mails nicht funktioniert?

Wählen Sie die ähnlichste websichere Alternative: Georgia oder Times New Roman für Serifenschriften, Arial oder Helvetica für serifenlose Schriften und Courier für Monospace-Schriften. Sie können Ihre eigene Schriftart im CSS trotzdem als erste Wahl angeben und die websichere Schriftart als Fallback festlegen. So wird sie in E-Mail-Clients angezeigt, die Webfonts unterstützen (Apple Mail, iOS Mail), während in den übrigen Clients (Gmail, Outlook) problemlos die Ersatzschrift erscheint.

Wie finde ich die genauen Hex-Farbcodes meiner Website?

Öffnen Sie Ihre Website in einem Browser, klicken Sie mit der rechten Maustaste auf ein beliebiges farbiges Element und wählen Sie „Untersuchen“. Suchen Sie in den Entwicklertools auf der Registerkarte „Styles“ nach der Eigenschaft „color“. Dort sehen Sie den Hex-, RGB- oder HSL-Wert. Alternativ können Sie mit Browsererweiterungen wie ColorZilla auf eine beliebige Stelle einer Seite klicken, um die genaue Farbe zu erfassen.

Kann ich diese Vorlage für jede Art von E-Mail verwenden, die ich versende?

Eine Vorlage eignet sich gut als Ausgangspunkt, aber Sie werden wahrscheinlich Varianten benötigen. Eine Werbe-E-Mail mit einem großen Hero-Bild ist anders aufgebaut als ein schlichter Newsletter oder eine Transaktionsbestätigung. Erstellen Sie zuerst Ihre zentrale Markenvorlage und anschließend einfache Varianten für Ihre wichtigsten Anwendungsfälle.

Was passiert mit meiner HTML-Vorlage, wenn ich das Design meiner Website aktualisiere?

Passen Sie Ihre E-Mail-Vorlage entsprechend an. Übernehmen Sie die neuen Hex-Codes und Schriftänderungen von Ihrer Website, fügen Sie den aktuellen HTML-Code Ihrer E-Mail wieder in ein KI-Tool ein und bitten Sie es, die aktualisierten Werte anzuwenden. Beim zweiten Mal geht das deutlich schneller, weil die Struktur bereits vorhanden ist.

Kann ich meine gebrandete E-Mail-Vorlage in Benchmark Email speichern, um sie wiederzuverwenden?

Ja. Sobald Sie Ihr HTML in Benchmark Email eingefügt und in der Vorschau geprüft haben, können Sie es als Vorlage speichern und für zukünftige Kampagnen wiederverwenden. Dabei bearbeiten Sie jedes Mal nur den Inhalt, während die gebrandete Struktur erhalten bleibt.