HTML-Landingpage-Vorlagen

HTML-Landingpage-Vorlagen. Mach aus deiner Kampagnenidee eine Landingpage mit deinem eigenen Angebot, ohne sie von Grund auf zu gestalten.

Wähle eine Seite für die gewünschte Aktion: eine Anfrage, Anmeldung oder einen Produktbesuch. Beginne mit dem Design und verbinde diese Aktion mit ihrem echten Ziel.

Eine Seite für meine Kampagne finden Den nächsten Besucherschritt planen

Veyra

Framewise

Orbit

Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.

AI ChatBeispielablauf

Kampagnenziel

Die Kampagne betrifft diese Leistung. Leite den Hauptbutton zu einer passenden Anfrage.

KI · Beispielantwort

Gib mir Anzeige, Angebotsdetails und Anmelde- oder Kaufziel. Ich kann Überschrift, Erklärungen und Button gemeinsam im gewählten Design anpassen.

Website an die Kampagne anpassen

Kampagne liefern
Kopiere die Anzeige und erkläre das Angebot.
Seite anpassen
Lass Überschrift, Angebotsdetails und Button auf dieselbe Kampagne abstimmen.
Ziel testen
Öffne das Buttonziel und teste Anmeldung oder Anfrage.

Danach: Anzeige und Landing vor Veröffentlichung nebeneinander vergleichen.

Beispieldialog, keine Live-KI-Sitzung.

01 / Kampagnenziel

Was soll dieser Besucher als Nächstes tun?

Bei einer Dienstleistungskampagne können Besucher eine Anfrage senden, beim Launch ihre E-Mail eintragen und bei einem verfügbaren Produkt zum Kauf oder Test wechseln. Passe dafür Angebot, Buttontext und Ziel im Template an.

Anfragen

Erkläre Leistungsumfang, Eignung und die Angaben für ein erstes Gespräch.

In eine Liste eintragen

Erkläre den Zweck und verbinde einen echten Mailinglisten-Dienst.

Zum Produkt gehen

Zeige das echte Produkt und verlinke eine funktionierende Demo, Testphase oder Kaufstrecke.

Kampagnenziel wählen

Vorbereitetes interaktives Planungsbeispiel. Kurs, Material oder Leistung ändern Quellbereiche, Nachweise und Aktionsplan.

Ganze Vorschau öffnen ↗

02 / Kampagnendesigns

Welche Struktur passt zu deinem Angebot?

Veyra und Relayline erklären Produkte, Framewise stellt einen Kurs vor und Orbit eignet sich für Leistungen. Starte mit dem passenden Aufbau und lasse KI die Beispielinhalte durch deine Kampagne ersetzen. Überflüssige Abschnitte kannst du entfernen lassen.

Veyra

Fokussierte Erklärung eines Schreibprodukts mit Schritten, Beispielen und FAQ. Zeige echte Funktionsnachweise.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Framewise

Kurspräsentation mit Lehrperson, Übungen und Lehrplan. Ergänze echte Kursangaben und das Anmeldeziel.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/creator-blue.png
assets/creator-coral.png
assets/creator-lilac.png
assets/creator-mint.png

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Orbit

Struktur für Leistungen und Vorgehen. Ersetze Konzeptabläufe durch deinen tatsächlichen Umfang.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/bridge.webp
assets/connect.webp
assets/folio.webp
assets/lens.webp
assets/loop.webp
assets/relay.webp

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Relayline

Workflow-Funktionen und Szenarien. Zeige, was dein Produkt wirklich tut.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/relayline-focus.png
assets/relayline-portrait.png

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.

AI ChatBeispielablauf

Passende Botschaft

Passe den Landing mit dieser Anzeige und diesem Angebot an die Erwartung nach dem Klick an.

KI · Beispielantwort

Gib mir Anzeige, Angebotsdetails und Anmelde- oder Kaufziel. Ich kann Überschrift, Erklärungen und Button gemeinsam im gewählten Design anpassen.

Website an die Kampagne anpassen

Kampagne liefern
Kopiere die Anzeige und erkläre das Angebot.
Seite anpassen
Lass Überschrift, Angebotsdetails und Button auf dieselbe Kampagne abstimmen.
Ziel testen
Öffne das Buttonziel und teste Anmeldung oder Anfrage.

Danach: Anzeige und Landing vor Veröffentlichung nebeneinander vergleichen.

Beispieldialog, keine Live-KI-Sitzung.

03 / Passende Botschaft

Beantwortet die Seite das Versprechen deiner Anzeige?

Die Seite sollte dasselbe Angebot zeigen, das Besucher in der Anzeige angeklickt haben. Gib der KI Anzeigentext, Angebot und gewünschte Aktion. Lass Überschrift, Nutzen, Beispiele und Button zusammen anpassen. Eine Kurskampagne sollte zum beschriebenen Kurs und dessen Anmeldung führen.

01
Anzeige an KI geben
Kopiere die Anzeigenüberschrift und das angeklickte Angebot.
02
Dasselbe Angebot erklären
Lass Überschrift und Produktdetails für dasselbe Angebot und dieselbe Zielgruppe schreiben.
03
Aktion verbinden
Verlinke den passenden Eintrag, die Anfrage oder die Produktseite.

Quelldateien und technische Details ansehen

Framewise: vollständige Reihenfolge der Kursseite

13-framewise/ index.html · main section order

Exakte Reihenfolge im aktuellen HTML. Englische Originalüberschriften, kein vorgeschlagener Neuaufbau.

01  #hero — Make roomfor your ideas.
02  #steps — Find one idea
03  #practice — Less staring.More starting.
04  #approach — Make ityour own.
05  #system — A rhythmto return to.
06  #instructor — A calm voicein a noisy feed.
07  #curriculum — Make a plan.Make a post.
08  #film — An idea.A first step.
09  #stories — Small shifts.Fresh starts.
10  #included — Tools foryour next post.
11  #extras — Keep an idea.Start a page.
12  #paths — Find yourstarting point.
13  #faq — Before you begin.
14  #start — One thought.Your next post.

Framewise

Mitgelieferte englische Originalseite mit fiktiven Inhalten. Ganze Seite öffnen, um Aufbau und Bedienung zu prüfen.

Ganze Vorschau öffnen ↗

AI ChatBeispielablauf

Aktion verbinden

Verbinde die Anmeldung mit meiner Mailingliste und erkläre den Testeintrag.

KI · Beispielantwort

Wähle Mailingdienst und Liste und gib mir öffentlichen Formularlink oder Einbettungscode. Ich kann die Anmeldung im Template einsetzen, damit Adressen auf die Liste kommen. Danach prüfen wir Testadresse und Abonnentenstatus im Dienst, einschließlich aktivierter Bestätigung.

Mailinglisten-Anmeldung verbinden

Liste wählen
Erstelle oder wähle eine Mailingliste im gewünschten Dienst und hole öffentliches Anmeldeformular, Link oder Einbettungscode.
Anmeldung verbinden
Gib KI die öffentlichen Formulardaten und lasse die Anmeldung einbauen oder verlinken. Nutze die unterstützte Integration des Dienstes; private API-Zugänge gehören nicht ins öffentliche HTML.
Testanmeldung bestätigen
Melde eine Testadresse an und prüfe den Eintrag in der Mailingliste. Bei aktivierter Bestätigung folge der E-Mail und prüfe den Abonnentenstatus.

Danach: Testadresse als Abonnent im gewählten Mailingdienst prüfen, nicht nur die Meldung auf der Seite.

Beispieldialog, keine Live-KI-Sitzung.

04 / Aktion verbinden

Wohin geht eine Anmeldung oder Anfrage?

Zur angebundenen Lösung: Formularpostfach, CRM, Mailingliste oder eigener App. Wähle das Ziel und bitte KI, Formular oder Button damit zu verbinden. Die Beispielseite erfasst erst dann Kontakte für dich, wenn diese Verbindung funktioniert.

Liste wählen

Erstelle oder wähle eine Mailingliste im gewünschten Dienst und hole öffentliches Anmeldeformular, Link oder Einbettungscode.

Anmeldung verbinden

Gib KI die öffentlichen Formulardaten und lasse die Anmeldung einbauen oder verlinken. Nutze die unterstützte Integration des Dienstes; private API-Zugänge gehören nicht ins öffentliche HTML.

Testanmeldung bestätigen

Melde eine Testadresse an und prüfe den Eintrag in der Mailingliste. Bei aktivierter Bestätigung folge der E-Mail und prüfe den Abonnentenstatus.

Quelldateien und technische Details ansehen

Was dieser E-Mail-Button tatsächlich macht

14-clearstead/ script: form.addEventListener('submit')

Im aktuellen Clearstead14-Quelltext verhindert Submit die Navigation, prüft die Adresse, ändert den Text und setzt das Formular zurück. Desktop-Test mit example.invalid zeigte die lokale Bestätigung. Kein Empfänger und keine Anmeldung wurden getestet.

form.addEventListener('submit',event=>{event.preventDefault();if(!email.validity.valid){status.textContent='Enter a valid email address to test this form.';email.setAttribute('aria-invalid','true');email.focus();return}email.removeAttribute('aria-invalid');status.textContent='Demo complete. Your address was not sent or saved.';form.reset()});

Clearstead: lokales Originalformular prüfen

Mitgelieferte englische Originalseite mit fiktiven Inhalten. Ganze Seite öffnen, um Aufbau und Bedienung zu prüfen.

Ganze Vorschau öffnen ↗

AI ChatBeispielablauf

Botschaft anpassen

Behalte das Design und ersetze die Kampagne durch dieses neue Angebot und diese Anmeldeadresse.

KI · Beispielantwort

Gib mir Anzeige, Angebotsdetails und Anmelde- oder Kaufziel. Ich kann Überschrift, Erklärungen und Button gemeinsam im gewählten Design anpassen.

Website an die Kampagne anpassen

Kampagne liefern
Kopiere die Anzeige und erkläre das Angebot.
Seite anpassen
Lass Überschrift, Angebotsdetails und Button auf dieselbe Kampagne abstimmen.
Ziel testen
Öffne das Buttonziel und teste Anmeldung oder Anfrage.

Danach: Anzeige und Landing vor Veröffentlichung nebeneinander vergleichen.

Beispieldialog, keine Live-KI-Sitzung.

05 / Botschaft anpassen

Kann ich das Design behalten und die Kampagnentexte ändern?

Ja. Gib KI die Projektdateien und das neue Kampagnenangebot. Lass Texte und Buttonziel ändern und das Design beibehalten. Für verschiedene Kampagnen kannst du eigene Kopien mit jeweils eigenem Angebot und eigener URL erstellen.

Vorbereitetes Template-Beispiel ansehen

Beispiel für KI-BearbeitungFormwell

Ersetze das Beispielintro und die Leistungsbeschreibungen durch mein freigegebenes Angebot. Behalte das Layout.

KI · Beispielantwort

Das vorbereitete Beispiel aktualisiert Studiotexte, ohne die Struktur zu ändern. Prüfe bei deiner Version das Kampagnenversprechen und die richtige Zieladresse.

index.html · RECREATE.md

Formwell · vorbereitete HTML-Vorschau

Ganze Vorschau öffnen ↗

Vorbereiteter Dialog und Projektversionen. Keine Live-Verbindung zu einer KI.

Marken- und Inhaltsanpassung planen

AI ChatBeispielablauf

Abschluss prüfen

Ich möchte Besuche, Buttonklicks und fertige Anmeldungen getrennt sehen.

KI · Beispielantwort

Nenne Analyse und Ziel von Formular oder Kauf. Ich kann Aufrufe und Buttonereignisse anbinden und erklären, wo die abgeschlossene Aktion im Empfangsdienst geprüft wird.

Besuche und abgeschlossene Aktionen messen

Analyse wählen
Nutze deinen gewünschten Messdienst für die Website.
Besuche und Klicks anbinden
Lass KI die Erfassung von Seite und Hauptbutton einbauen.
Abschluss prüfen
Teste eine Sendung und prüfe Analyseereignis sowie Zieldienst.

Danach: Besucher, Klicks und eingegangene Anfragen getrennt vergleichen.

Beispieldialog, keine Live-KI-Sitzung.

06 / Abschluss prüfen

Was sollte ich nach der Veröffentlichung messen?

Erfasse Besuche, Klicks auf den Hauptbutton und abgeschlossene Anmeldungen, Anfragen oder Käufe. Bitte KI, deine gewählte Analyse anzubinden, und prüfe eine Testaktion im Empfangsdienst. Besuche allein sagen nicht, wie viele Kontakte angekommen sind.

BesucheBinde deine Analyse an, um die Aufrufe des Landings zu sehen.ButtonklicksErfasse Hauptbuttonklicks getrennt, um den nächsten Schritt zu erkennen.Abgeschlossene AktionenZähle im Formular-, Mailing- oder Kaufdienst tatsächlich eingegangene Anfragen, Abos oder Bestellungen.

Lokal auf diesem Gerät markiert; nichts wird übermittelt.

07 / Seite oder Serie

Was baust du als Nächstes?

Für diese Kampagne wählst du ein passendes Design und bearbeitest dessen Dateien. Für mehrere Kampagnen bietet PRO weitere Designs. Bewahre die Projekte in getrennten Ordnern auf und veröffentliche jeden Landing unter eigener Adresse.

Eine Kampagnenseiten-Serie planen Ein Template und PRO-Zugang vergleichen

Design und Dateien von Framewise ansehen

Formwell / Website-Dateien + Designanweisungen

Teste ein echtes Template, bevor du dich entscheidest.

Lade das originale Formwell-Projekt herunter. Gib die Dateien und RECREATE.md an ein geeignetes KI-Tool, probiere eine kleine Änderung und prüfe das Ergebnis.

Das kostenlose Beispiel ist Formwell. Originaldesign und Anleitung sind auf Englisch. Die Produktpreise bleiben unverändert.

Formwell-ZIP herunterladen RECREATE.md herunterladen ↗