Mit Hilfe von KI kannst du individuelle E-Mail-Designs erstellen, ohne den HTML-Code selbst schreiben zu müssen.
Die KI kann dir dabei helfen, aus einer einfachen Beschreibung eine komplette E-Mail zu entwickeln – inklusive Layout, Farben, Buttons, Bildern und Textbereichen.
Der grundsätzliche Ablauf sieht so aus:
- Du beschreibst der KI, wie deine E-Mail aussehen soll.
- Du lässt dir zunächst ein Mockup erstellen.
- Du passt das Design gemeinsam mit der KI an.
- Wenn dir das Ergebnis gefällt, lässt du daraus HTML-Code erstellen.
- Den HTML-Code fügst du anschließend in Quentn ein.
- Zum Schluss verschickst du eine Test-E-Mail und prüfst die Darstellung.
1. Beschreibe der KI deine gewünschte E-Mail
Je genauer du der KI erklärst, was du möchtest, desto besser wird das Ergebnis.
Eine Anweisung an eine KI wird häufig Prompt genannt.
Ein Prompt ist einfach der Text, den du in das Eingabefeld der KI schreibst.
Zum Beispiel:
Erstelle mir eine moderne E-Mail für die Bewerbung unseres nächsten Webinars.
Das funktioniert bereits. Besser ist es aber, der KI mehr Informationen mitzugeben.
Beschreibe zum Beispiel:
- Was ist das Ziel der E-Mail?
- Wer soll die E-Mail erhalten?
- Welche Farben sollen verwendet werden?
- Soll die E-Mail eher schlicht oder auffällig aussehen?
- Welche Tonalität möchtest du verwenden?
- Gibt es bereits fertige Texte?
- Welche Überschriften sollen verwendet werden?
- Soll ein Button enthalten sein?
- Sollen Bilder eingebaut werden?
- Gibt es bestimmte Abschnitte, die du brauchst?
Was bedeutet Tonalität?
Mit Tonalität ist gemeint, wie sich deine E-Mail anhören soll.
Zum Beispiel:
- locker,
- persönlich,
- seriös,
- emotional,
- sachlich,
- direkt,
- humorvoll.
Du kannst der KI zum Beispiel schreiben:
Die E-Mail soll freundlich, direkt und modern wirken. Sprich den Leser mit „Du“ an.
Beispiel für einen ausführlicheren Prompt
Erstelle mir ein Mockup für eine moderne HTML-E-Mail.
Die E-Mail soll ein kostenloses Webinar bewerben.
Die Zielgruppe sind Selbstständige und Unternehmer.
Das Design soll modern, hochwertig und übersichtlich wirken. Verwende hauptsächlich Dunkelblau, Weiß und eine auffällige Akzentfarbe für den Button.
Die E-Mail soll aus folgenden Bereichen bestehen:
- Logo
- große Überschrift
- kurzer Einleitungstext
- Bild
- drei Vorteile des Webinars
- auffälliger Button
- kurzer Abschluss
Die Tonalität soll direkt, persönlich und leicht verständlich sein.
Du musst dabei noch nicht jedes Detail kennen.
Eine grobe Vorstellung reicht für den ersten Entwurf vollkommen aus.
2. Lass dir zuerst ein Mockup erstellen
Bevor du HTML-Code erstellen lässt, solltest du dir zunächst ein Mockup zeigen lassen.
Ein Mockup ist eine visuelle Vorschau.
Du siehst also ungefähr, wie die fertige E-Mail später aussehen könnte.
So kannst du beurteilen:
- Wie ist die E-Mail aufgebaut?
- Wo steht die Überschrift?
- Wo wird das Bild angezeigt?
- Wie sieht der Button aus?
- Sind die Farben stimmig?
- Sind die Abstände passend?
- Wirkt die E-Mail übersichtlich?
Der Vorteil dabei:
Du kannst das Design ändern lassen, bevor überhaupt HTML-Code erstellt wird.
Zum Beispiel:
Der obere Bereich gefällt mir. Mach den Button aber größer und auffälliger.
Oder:
Das Design wirkt noch zu verspielt. Mach es schlichter und professioneller.
Oder:
Setze das Bild weiter nach oben und kürze den Abstand zur Überschrift.
Arbeite so lange am Mockup, bis dir das Ergebnis gefällt.
Erst danach solltest du den HTML-Code erstellen lassen.
3. Lass den HTML-Code für die E-Mail erstellen
Wenn dir das Mockup gefällt, kannst du die KI bitten, daraus den HTML-Code zu erstellen.
HTML steht für „Hypertext Markup Language“.
HTML ist eine Auszeichnungssprache, mit der festgelegt wird, welche Inhalte angezeigt werden und wie sie angeordnet sind.
Zum Beispiel:
- Überschriften,
- Texte,
- Bilder,
- Buttons,
- Abstände,
- Hintergrundfarben.
Du musst diesen Code nicht selbst schreiben oder vollständig verstehen.
Wichtig ist nur, dass du der KI möglichst genau erklärst, wofür der Code verwendet wird.
Verwende diesen Hinweis unbedingt
Schreibe der KI:
Erstelle den HTML-Code so, dass ich ihn als HTML-Block in einem HTML-Editor in den Body-Bereich einfügen kann.
Zusätzlich solltest du der KI deutlich sagen, dass der Code für eine E-Mail gedacht ist:
Der HTML-Code ist für eine E-Mail vorgesehen. Verwende deshalb nur HTML und CSS, das möglichst zuverlässig von gängigen E-Mail-Programmen unterstützt wird.
Warum ist dieser Hinweis wichtig?
HTML-E-Mails funktionieren technisch anders als normale Webseiten.
Eine Webseite kann viele moderne Gestaltungsmöglichkeiten nutzen.
E-Mail-Programme sind dabei deutlich eingeschränkter.
Outlook kann zum Beispiel bestimmte HTML- oder CSS-Befehle anders darstellen als Gmail oder Apple Mail.
Deshalb sollte die KI wissen:
Das ist keine Webseite. Das ist eine E-Mail.
Was ist CSS?
CSS steht für „Cascading Style Sheets“.
CSS bestimmt das Aussehen von HTML-Inhalten.
Damit wird zum Beispiel festgelegt:
- welche Farbe ein Text hat,
- wie groß eine Überschrift ist,
- wie ein Button aussieht,
- wie groß Abstände sind,
- welche Hintergrundfarbe verwendet wird.
Bei HTML-E-Mails sollten möglichst einfache und bewährte CSS-Anweisungen verwendet werden.
Was ist der Body-Bereich?
Der Body ist der Bereich des HTML-Codes, der die sichtbaren Inhalte enthält.
Also zum Beispiel:
- Überschriften,
- Texte,
- Bilder,
- Buttons.
Du möchtest von der KI in diesem Fall nicht unbedingt eine vollständige HTML-Datei erhalten, sondern den Code, den du direkt in deinen HTML-Editor einfügen kannst.
Beispiel für deinen finalen Prompt
Erstelle jetzt den HTML-Code für das gezeigte Mockup.
Erstelle den HTML-Code so, dass ich ihn als HTML-Block in einem HTML-Editor in den Body-Bereich einfügen kann.
Der Code ist für eine E-Mail vorgesehen. Verwende deshalb möglichst einfachen und mit gängigen E-Mail-Programmen kompatiblen HTML-Code.
Achte darauf, dass die E-Mail auch auf Smartphones gut dargestellt wird.
4. Was bedeutet „responsive“?
Bei der Erstellung von E-Mails wirst du häufig auf den Begriff responsive stoßen.
Responsive bedeutet:
Das Design passt sich an die Größe des Bildschirms an.
Eine E-Mail soll also zum Beispiel:
- auf einem großen Computerbildschirm gut aussehen,
- auf einem Tablet funktionieren,
- auf einem Smartphone gut lesbar bleiben.
Gerade bei E-Mails ist das wichtig, weil viele Menschen ihre Nachrichten auf dem Smartphone lesen.
Du kannst der KI deshalb zusätzlich schreiben:
Gestalte die E-Mail responsive. Auf Smartphones sollen Inhalte untereinander dargestellt werden und gut lesbar bleiben.
5. Eigene Bilder in der E-Mail verwenden
Wenn du eigene Bilder in deinem Design verwenden möchtest, benötigt die KI den Bildpfad beziehungsweise Dateipfad.
Was ist ein Bildpfad?
Ein Bildpfad ist die Adresse, unter der ein Bild erreichbar ist.
Der HTML-Code nutzt diese Adresse, um das Bild in der E-Mail anzuzeigen.
Ohne diesen Pfad kann die KI zwar einen Platz für ein Bild einplanen, aber nicht dein tatsächliches Bild verwenden.
So bekommst du den Bildpfad
Gehe in deiner E-Mail-Vorlage folgendermaßen vor:
- Öffne die gewünschte Vorlage.
- Füge die Inhaltskachel „Bild“ ein.
- Lade das gewünschte Bild hoch.
- Nach dem Upload wird dir der Dateipfad angezeigt.
- Kopiere diesen Dateipfad.
- Füge ihn in deinen Prompt für die KI ein.
Zum Beispiel:
Verwende unterhalb der Einleitung dieses Bild:
[BILDPFAD HIER EINFÜGEN]Das Bild soll sich an die Breite der E-Mail anpassen und auf Smartphones nicht abgeschnitten werden.
Sobald du den Dateipfad kopiert hast, kannst du die zuvor eingefügte Bildkachel wieder aus der Vorlage löschen.
Das Bild selbst kann über den kopierten Pfad weiterhin im HTML-Code verwendet werden.
6. Buttons und Call-to-Actions einbauen
Ein Button in einer E-Mail wird häufig als Call-to-Action bezeichnet.
Die Abkürzung dafür ist CTA.
Ein Call-to-Action ist eine Handlungsaufforderung.
Zum Beispiel:
- „Jetzt anmelden“
- „Mehr erfahren“
- „Termin buchen“
- „Kostenlos testen“
- „Zum Angebot“
Der Button soll den Leser zu einer bestimmten Handlung führen.
Deshalb solltest du der KI immer sagen:
- welcher Text auf dem Button stehen soll,
- wohin der Button führen soll,
- wie auffällig er sein soll.
Zum Beispiel:
Füge nach dem Haupttext einen auffälligen Button ein.
Der Button soll „Jetzt kostenlos anmelden“ heißen und auf folgende Seite führen:
[LINK EINFÜGEN]
Was ist ein Link?
Ein Link ist eine Internetadresse, die beim Anklicken geöffnet wird.
Der Button ist also nur die sichtbare Gestaltung.
Der Link bestimmt, wohin der Leser nach dem Klick gelangt.
7. Bestehende Texte direkt mitgeben
Wenn deine E-Mail-Texte bereits fertig sind, solltest du sie direkt in deinen Prompt einfügen.
Das hat einen großen Vorteil:
Die KI kann das Design an die tatsächliche Textmenge anpassen.
Zum Beispiel:
Verwende exakt die folgenden Texte. Verändere den Inhalt nicht.
Überschrift:
[ÜBERSCHRIFT]Einleitung:
[TEXT]Button:
[BUTTON-TEXT]
Wenn die KI den Text ebenfalls verbessern darf, kannst du das ebenfalls sagen:
Du darfst die Formulierungen leicht optimieren, aber die Aussage und Tonalität sollen erhalten bleiben.
So verhinderst du, dass die KI Änderungen vornimmt, die du eigentlich nicht möchtest.
8. Warum E-Mails technisch einfacher gestaltet sein sollten
Bei Webseiten kann die KI sehr aufwendige Designs erzeugen.
Bei E-Mails solltest du etwas vorsichtiger sein.
Der Grund:
E-Mail-Programme unterstützen nicht alle modernen HTML- und CSS-Funktionen.
Ein Design kann deshalb beispielsweise in Gmail perfekt aussehen und in Outlook plötzlich:
- andere Abstände haben,
- Buttons anders darstellen,
- Elemente verschieben,
- bestimmte Formatierungen ignorieren.
Für E-Mails gilt deshalb häufig:
Einfacher ist zuverlässiger.
Du kannst der KI zum Beispiel schreiben:
Verwende für die E-Mail ein möglichst einfaches und robustes Layout. Vermeide unnötig komplizierte CSS-Effekte.
Auch aufwendige Animationen oder sehr moderne Webeffekte solltest du in einer normalen Marketing-E-Mail vermeiden.
9. Tabellen im HTML-Code sind bei E-Mails normal
Wenn du dir von der KI HTML für eine E-Mail erstellen lässt, wirst du möglicherweise viele sogenannte Tabellen im Code sehen.
Zum Beispiel Begriffe wie:
<table>
<tr>
<td>
Das kann auf den ersten Blick ungewöhnlich aussehen.
Bei modernen Webseiten werden Tabellen normalerweise nicht für das Layout verwendet.
Bei HTML-E-Mails sind sie allerdings nach wie vor weit verbreitet.
Der Grund:
Viele E-Mail-Programme können Tabellenlayouts besonders zuverlässig darstellen.
Wenn die KI also Tabellen für den Aufbau deiner E-Mail verwendet, ist das nicht automatisch ein Fehler.
10. Was bedeutet Inline-CSS?
Ein weiterer Begriff, der bei HTML-E-Mails häufig auftaucht, ist Inline-CSS.
Dabei werden Designangaben direkt am jeweiligen HTML-Element hinterlegt.
Zum Beispiel wird die Farbe eines Buttons direkt im Code dieses Buttons definiert.
Das ist bei normalen Webseiten nicht immer die eleganteste Methode.
Bei E-Mails kann es aber sinnvoll sein, weil verschiedene E-Mail-Programme solche Formatierungen zuverlässiger unterstützen.
Du kannst der KI deshalb zum Beispiel sagen:
Verwende bei wichtigen Formatierungen möglichst Inline-CSS, damit die Darstellung in E-Mail-Programmen zuverlässig bleibt.
Du musst den Code selbst nicht verändern.
Es reicht, dass die KI weiß, wie sie ihn erstellen soll.
11. Test-E-Mail verschicken
Nachdem du den HTML-Code in Quentn eingefügt hast, solltest du niemals direkt an deine komplette Empfängerliste versenden.
Verschicke zuerst eine Test-E-Mail.
Prüfe dabei:
- Ist die Überschrift vollständig sichtbar?
- Stimmen die Farben?
- Sind alle Texte gut lesbar?
- Werden Bilder angezeigt?
- Funktionieren die Buttons?
- Führen alle Links zur richtigen Seite?
- Sind die Abstände passend?
- Sieht die E-Mail auf dem Smartphone gut aus?
Wenn möglich, solltest du die E-Mail auch in unterschiedlichen Programmen testen.
Zum Beispiel:
- Gmail
- Outlook
- Apple Mail
Dadurch erkennst du schneller, wenn ein bestimmtes Programm deine E-Mail anders darstellt.
12. Was tun, wenn die E-Mail nicht richtig aussieht?
Du musst fehlerhaften HTML-Code nicht selbst korrigieren.
Du kannst den vorhandenen Code wieder an die KI geben.
Beschreibe dabei möglichst genau, was nicht stimmt.
Zum Beispiel:
Auf dem Smartphone ist der Button zu breit.
Passe den folgenden HTML-Code so an, dass der Button auf kleinen Bildschirmen schmaler dargestellt wird.
Verändere ansonsten nichts.
[HTML-CODE EINFÜGEN]
Oder:
In Outlook ist zwischen dem Bild und dem Text zu viel Abstand.
Prüfe den folgenden HTML-Code und passe ihn für eine möglichst zuverlässige Darstellung in E-Mail-Programmen an.
[HTML-CODE EINFÜGEN]
Je genauer du beschreibst, was falsch ist und was erhalten bleiben soll, desto besser kann die KI den Code anpassen.
13. E-Mail nicht unnötig breit gestalten
E-Mails sollten nicht wie eine Webseite über den gesamten Bildschirm laufen.
Für den eigentlichen Inhaltsbereich wird häufig eine begrenzte Breite verwendet.
Du kannst der KI deshalb zum Beispiel sagen:
Gestalte den Hauptbereich der E-Mail mit einer maximalen Breite von etwa 600 Pixeln und zentriere ihn.
Was sind Pixel?
Pixel sind kleine Bildpunkte auf einem Bildschirm.
Sie werden unter anderem verwendet, um Größen im digitalen Design anzugeben.
Du musst dabei nicht genau wissen, wie groß 600 Pixel sind.
Für dich reicht die Information:
Eine begrenzte Breite sorgt dafür, dass eine E-Mail auf großen Monitoren nicht unangenehm weit auseinandergezogen wird.
14. Den Absenderbereich und Pflichtangaben nicht vergessen
Beim Erstellen des eigentlichen Designs solltest du beachten, dass eine Marketing-E-Mail nicht nur aus dem schönen Hauptinhalt besteht.
Je nach verwendeter Vorlage und Versandart können weitere Bereiche notwendig sein, zum Beispiel:
- Absenderinformationen,
- Impressumsangaben,
- Abmeldelink,
- weitere Pflichtinformationen.
Wenn diese Elemente bereits von deiner Quentn-Vorlage bereitgestellt werden, solltest du sie nicht unnötig in den KI-generierten HTML-Block einbauen.
Lass die KI in diesem Fall nur den eigentlichen Inhaltsbereich erstellen.
Der gesamte Ablauf noch einmal einfach erklärt
1. E-Mail beschreiben
Erkläre der KI, was deine E-Mail erreichen soll und wie sie aussehen soll.
2. Mockup erstellen
Lass dir zuerst zeigen, wie die E-Mail ungefähr aussehen könnte.
3. Design verändern
Passe Farben, Aufbau, Bilder und Buttons gemeinsam mit der KI an.
4. HTML-Code erstellen
Wenn dir das Mockup gefällt, lass daraus den fertigen Code erstellen.
Verwende dabei immer die Anweisung:
Erstelle den HTML-Code so, dass ich ihn als HTML-Block in einem HTML-Editor in den Body-Bereich einfügen kann.
Zusätzlich:
Der Code ist für eine E-Mail vorgesehen. Verwende deshalb möglichst einfachen und mit gängigen E-Mail-Programmen kompatiblen HTML-Code.
5. Bilder vorbereiten
Wenn du eigene Bilder verwenden möchtest, lade sie über die Bildkachel hoch und kopiere den Dateipfad.
6. Links ergänzen
Gib der KI die Links für deine Buttons und andere Verlinkungen.
7. Code einfügen
Kopiere den fertigen HTML-Code in den vorgesehenen HTML-Bereich deiner E-Mail-Vorlage.
8. Test-E-Mail versenden
Prüfe das Ergebnis auf Computer und Smartphone.
9. Fehler korrigieren lassen
Wenn etwas nicht stimmt, gib der KI den bestehenden Code und beschreibe genau, was verändert werden soll.