Mit Hilfe von KI kannst du eigene Landingpages und E-Mail-Layouts erstellen, ohne den HTML-Code selbst schreiben zu müssen.
Die KI übernimmt dabei einen großen Teil der Gestaltung und kann dir anschließend den passenden HTML-Code erstellen.
HTML steht für „Hypertext Markup Language“. Das ist eine Auszeichnungssprache, mit der Inhalte auf Webseiten und in E-Mails aufgebaut werden. Vereinfacht gesagt beschreibt HTML, was wo angezeigt werden soll – zum Beispiel eine Überschrift, ein Bild, ein Button oder ein Formular.
Du musst HTML für diese Anleitung nicht selbst schreiben oder verstehen können. Wichtig ist nur, dass du weißt, wo du den fertigen Code einfügst und welche Informationen du der KI geben musst.
Der Ablauf ist dabei immer ähnlich:
- Du beschreibst der KI, was du erstellen möchtest.
- Du lässt dir zunächst ein visuelles Mockup erstellen.
- Du passt das Design gemeinsam mit der KI an.
- Erst wenn dir das Ergebnis gefällt, lässt du den passenden HTML-Code erstellen.
- Anschließend fügst du den Code in Quentn ein.
Hier kannst du direkt zu den Überschriften springen:
- 1. Beschreibe der KI dein gewünschtes Design
- 2. Lass dir zuerst ein Mockup erstellen
- 3. Lass den HTML-Code erstellen
- 4. Eigene Bilder verwenden
- 5. Quentn-Formulare integrieren
- 6. Das Ergebnis testen
1. Beschreibe der KI dein gewünschtes Design
Je genauer du beschreibst, was du möchtest, desto besser wird das Ergebnis.
Ein solcher Arbeitsauftrag an eine KI wird häufig Prompt genannt. Ein Prompt ist nichts anderes als die Anweisung oder Beschreibung, die du in das Eingabefeld der KI schreibst.
Erkläre der KI deshalb möglichst konkret:
- Was möchtest du erstellen – eine Landingpage oder eine E-Mail?
- Welche Zielgruppe möchtest du ansprechen?
- Welche Tonalität soll verwendet werden?
- Welche Farben sollen eingesetzt werden?
- Wie soll der grundsätzliche Stil aussehen?
- Welche Elemente soll die Seite bzw. E-Mail enthalten?
- Gibt es bereits Texte, Überschriften oder Call-to-Actions?
- Gibt es Bilder, die verwendet werden sollen?
Du musst dabei noch nicht jedes Detail kennen. Eine grobe Vorstellung reicht für den ersten Entwurf.
Beispiel für einen Prompt
Erstelle mir ein Mockup für eine moderne Landingpage.
Die Zielgruppe sind Unternehmer und Selbstständige. Das Design soll modern, hochwertig und aufgeräumt wirken. Verwende hauptsächlich Dunkelblau, Weiß und dezente Akzentfarben.
Die Landingpage soll aus einem Hero-Bereich mit Überschrift, Unterüberschrift und Call-to-Action, einem Vorteilsbereich mit drei Vorteilen und einem abschließenden Call-to-Action bestehen.
Die Tonalität soll direkt, professionell und trotzdem persönlich sein.
Je mehr Informationen du der KI gibst, desto weniger musst du später korrigieren.
2. Lass dir zuerst ein Mockup erstellen
Bevor du die KI bittest, HTML-Code zu schreiben, solltest du dir zunächst ein Mockup erstellen lassen.
Ein Mockup ist eine visuelle Vorschau.
Es zeigt dir also, wie die spätere Landingpage oder E-Mail ungefähr aussehen könnte, bevor der eigentliche technische Code erstellt wird.
Du kannst dir ein Mockup ungefähr wie einen Entwurf vorstellen.
So erkennst du zum Beispiel:
- Wo befindet sich die Überschrift?
- Wo wird das Bild platziert?
- Wie sehen die Buttons aus?
- Welche Farben werden verwendet?
- Wie viel Abstand ist zwischen den einzelnen Bereichen?
- Passt der gesamte Stil zu deinem Angebot?
Der große Vorteil: Änderungen sind in dieser Phase besonders einfach.
Wenn dir etwas nicht gefällt, sagst du der KI einfach, was sie verändern soll.
Passt beispielsweise die Anordnung der Elemente noch nicht, kannst du der KI direkt Änderungswünsche geben:
Der Hero-Bereich gefällt mir. Mach den zweiten Abschnitt etwas moderner und stelle die drei Vorteile als Karten nebeneinander dar.
Oder:
Verwende weniger Farben und gestalte die Seite insgesamt minimalistischer.
Arbeite so lange am Mockup, bis Aufbau, Farben und Stil deinen Vorstellungen entsprechen.
3. Lass den HTML-Code erstellen
Wenn dir das Mockup gefällt, kannst du die KI bitten, daraus den HTML-Code zu erstellen.
Dabei ist eine Anweisung besonders wichtig.
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. Das Design muss auch auf mobilen Geräten gut dargestellt werden, also responsiv sein.
Damit verhinderst du, dass die KI beispielsweise eine komplette HTML-Datei mit eigenem <html>, <head> und <body> erstellt, obwohl du nur den Inhalt für einen bestehenden HTML-Bereich benötigst.
Ein vollständiger Prompt könnte beispielsweise so aussehen:
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.
Achte darauf, dass das Design auch auf mobilen Geräten gut dargestellt wird.
Den ausgegebenen Code kannst du anschließend kopieren und in den entsprechenden HTML-Block deiner Vorlage einfügen.
Gehe dafür in deine Kampagne und ziehe das Element "Landingpage" in den Arbeitsbereich.
Öffne das Element mit einem Doppelklick und entferne aus der Vorlage alles, was du nicht benötigst.
Suche anschließend auf der rechten Seite unter dem Reiter "Inhalt" den Block "HTML" heraus und ziehe ihn in die Landingpage.
Klicke in den Block.
Nun kannst du auf der rechten Seite das Beispiel-HTML entfernen und den von der KI generierten HTML-Code einfügen.
4. Eigene Bilder verwenden
Möchtest du ein eigenes Bild in das KI-generierte Design einbauen, benötigt die KI den direkten Dateipfad zu diesem Bild.
Diesen kannst du direkt über deine Vorlage ermitteln.
Gehe dazu folgendermaßen vor:
- Öffne deine Vorlage.
- Füge die Inhaltskachel „Bild“ ein.
- Lade das gewünschte Bild hoch.
- Nach dem Upload wird dir der Dateipfad des Bildes angezeigt.
- Kopiere diesen Dateipfad.
- Füge ihn in deinen Prompt für die KI ein.
Zum Beispiel:
Verwende im Hero-Bereich dieses Bild:
[BILDPFAD HIER EINFÜGEN]Platziere das Bild rechts neben dem Text und stelle sicher, dass es auf mobilen Geräten unterhalb des Textes angezeigt wird.
Sobald du den Dateipfad kopiert hast, kannst du die zuvor eingefügte Bildkachel wieder aus der Vorlage löschen.
Die KI kann den Bildpfad nun direkt in den HTML-Code integrieren.
5. Quentn-Formulare integrieren
Auch bestehende Quentn-Formulare kannst du in eine KI-generierte Landingpage einbauen.
Wichtig dabei: Lass die KI nicht einfach selbst ein beliebiges Formular programmieren.
Damit die Formularfelder und die Übertragung der Daten korrekt mit Quentn funktionieren, solltest du zunächst ein echtes Formular in Quentn erstellen.
So gehst du vor
- Erstelle in Quentn ein neues Formular.
- Lege alle Felder an, die du später abfragen möchtest, beispielsweise:
- Vorname
- Nachname
- E-Mail-Adresse
- Telefonnummer
- Erstelle anschließend den Raw-HTML-Code des Formulars.
- Kopiere diesen Code.
- Gib den vollständigen Raw-HTML-Code an die KI weiter.
Was ist Raw-HTML?
Raw-HTML bedeutet vereinfacht „roher HTML-Code“.
Dabei bekommst du den technischen Code des Formulars, ohne dass du ihn selbst schreiben musst.
Dieser Code enthält wichtige Informationen darüber:
- welche Formularfelder existieren,
- wie diese Felder heißen,
- wohin die eingegebenen Daten übertragen werden,
- und wie das Formular technisch mit Quentn verbunden ist.
Diese Informationen sollten erhalten bleiben.
Beispiel für den Prompt
Anschließend kannst du der KI beispielsweise schreiben:
Hier ist der Raw-HTML-Code meines Quentn-Formulars:
[RAW-HTML-CODE HIER EINFÜGEN]Integriere dieses Formular in das bestehende Landingpage-Design. Du darfst das visuelle Design des Formulars anpassen, aber die vorhandenen Formularfelder, Feldnamen und technischen Funktionen müssen erhalten bleiben.
Das hat einen entscheidenden Vorteil:
Die KI kümmert sich um das Design – Quentn kümmert sich weiterhin um die Funktion.
Die KI kann beispielsweise Abstände, Farben, Schriftgrößen, Rahmen und Buttons verändern. Die technisch notwendigen Felder und Verknüpfungen des Quentn-Formulars bleiben jedoch bestehen.
6. Das Ergebnis testen
Nachdem du den HTML-Code eingefügt hast, solltest du das Ergebnis immer noch einmal prüfen.
Achte insbesondere auf:
- Darstellung auf Desktop-Geräten
- Darstellung auf Smartphones
- Abstände und Schriftgrößen
- Bilder und Bildpfade
- Buttons und Links
- Formularfelder
- Formularübertragung
- Darstellung in der Vorschau
Wenn etwas noch nicht passt, musst du den Code nicht unbedingt selbst verändern.
Kopiere den vorhandenen Code einfach wieder in die KI und beschreibe möglichst genau, was geändert werden soll.
Zum Beispiel:
Auf dem Smartphone ist der Abstand zwischen Überschrift und Button zu groß. Passe den Code entsprechend an. Verändere ansonsten nichts am bestehenden Design.
Der gesamte Ablauf noch einmal einfach erklärt
1. Idee beschreiben: Erkläre der KI, was du erstellen möchtest und wie es aussehen soll.
2. Mockup erstellen lassen: Lass dir zunächst einen visuellen Entwurf zeigen.
3. Design verbessern: Teile der KI mit, was dir gefällt und was verändert werden soll.
4. HTML-Code erstellen lassen: Wenn dir der Entwurf gefällt, lass daraus HTML-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.
5. Bilder vorbereiten: Wenn eigene Bilder verwendet werden sollen, lade sie zunächst über die Bildkachel hoch und kopiere den angezeigten Dateipfad.
6. Formulare vorbereiten: Wenn ein Quentn-Formular eingebaut werden soll, erstelle es zuerst in Quentn und kopiere anschließend den Raw-HTML-Code.
7. Code einfügen: Kopiere den von der KI erzeugten HTML-Code in den vorgesehenen HTML-Block.
8. Testen: Prüfe Darstellung, Bilder, Buttons, Links und Formulare.