Dokumentation

So baust Du Deine Landingpages mit dem Generator

Der Generator ist sehr einfach aufgebaut. Du öffnest ihn im Browser, klickst dich durch elf Schritte und lädst am Ende ein ZIP herunter. Darin liegt eine fertige Landingpage: HTML, CSS, deine Bilder, die Schriften und die Rechtstext-Seiten. Diese Dateien lädst du auf deinen Server — fertig.

Alle Dateien wie Bilder etc. bleiben auf Deinem Rechner.

Eine mit dem Generator erstellte Landingpage im Browser — Das Ergebnis: eine fertige Landingpage aus reinem HTML und CSS.

Bevor du startest

Du brauchst nur einen aktuellen Browser — Chrome, Firefox, Edge oder Safari. Lade die Datei herunter und öffne sie mit einem Doppelklick. Mehr ist nicht nötig.

Einmal Internet, danach offline Schriften und Symbole holt der Generator beim ersten Mal aus dem Netz und legt sie im Speicher deines Browsers ab. Danach arbeitest du komplett offline weiter.

Ein Hinweis zum Speicherort: Der Generator merkt sich deinen Zwischenstand im Browser. Öffnest du die Datei später erneut, ist dein Projekt wieder da. Dieser Zwischenstand hängt aber am Browser und am Rechner — für alles Wichtige speicherst du das Projekt als Datei ab. Wie das geht, steht weiter unten unter Projekt speichern.

Die Oberfläche

Der Editor besteht aus drei Spalten.

Der Editor mit Schrittliste links, Formular in der Mitte und Live-Vorschau rechts — Links die Schritte, in der Mitte die Eingaben, rechts die Live-Vorschau.

Links stehen die elf Schritte. Du kannst jederzeit springen — eine Reihenfolge ist nicht vorgeschrieben. Darunter liegen die Knöpfe zum Speichern und Laden deines Projekts.
In der Mitte gibst du ein, was auf die Seite soll.
Rechts siehst du sofort, was dabei herauskommt. Zwischen Desktop und Mobil schaltest du oben um, Vollbild zeigt die Seite ohne Editor drumherum.

„Ansicht folgt“ Ist das Häkchen gesetzt, springt die Vorschau automatisch zu dem Abschnitt, an dem du gerade arbeitest. Wenn du lieber selbst scrollst, nimm es heraus.

Schnellstart

Der kürzeste Weg zu einer Seite, die man zeigen kann:

Klick unten links auf Beispieltexte einfügen. Damit steht eine komplette Seite da, die du nur noch umschreiben musst — das ist deutlich schneller, als mit leeren Feldern anzufangen.
Wähle im Schritt Layout eine Variante und im Schritt Farben ein Schema.
Lade im Schritt Logo & Header dein Logo hoch.
Schreibe im Schritt Hero deine Überschrift.
Arbeite dich im Schritt Inhalte durch die Abschnitte.
Trag im Schritt SEO & Tracking Titel und Beschreibung ein und lade im Schritt Export das ZIP herunter.

Die elf Schritte

1Layout

Vier Grundvarianten bestimmen, wie die Seite aufgebaut ist: Classic, Split, Editorial und Cards. Jede hat eine kurze Beschreibung daneben — und die Vorschau rechts zeigt den Unterschied sofort.

Hier stellst du außerdem die Seitenbreite ein, wie stark die Ecken gerundet sind und wie kräftig die Schatten unter den Buttons ausfallen.

Schritt Layout mit den vier Varianten Classic, Split, Editorial und Cards — Die vier Layoutvarianten. Ein Klick genügt, die Vorschau zieht nach.

Farbrollen tauschen Standardmäßig stehen Überschriften in der Primärfarbe und lange Texte in der Fließtextfarbe. Wenn du es andersherum willst, schaltest du das hier um — es gilt dann für die ganze Seite.

2Farben

Fünfzehn fertige Schemata stehen bereit. Wähl eins als Ausgangspunkt und pass danach einzelne Farben an — insgesamt gibt es dreizehn Farbfelder, von der Primärfarbe über die Symbole bis zu den dunklen Bändern am Seitenende.

Eigene Zusammenstellungen kannst du als Schema speichern und in anderen Projekten wiederverwenden.

Schritt Farben mit fertigen Schemata und einzelnen Farbfeldern — Fertiges Schema wählen, dann einzelne Farben feinjustieren.

Achte auf den Kontrast Sehr helle Primärfarben auf hellem Grund lesen sich schlecht. Die mitgelieferten Schemata sind daraufhin geprüft — bei eigenen Farben schaust du am besten selbst in die Vorschau.

3Schrift

Hier wählst du je eine Schrift für Überschriften und für den Fließtext. Der Generator lädt sie herunter und legt sie später in den Ordner fonts/ deiner fertigen Seite.

Für die Auslieferung gibt es drei Möglichkeiten:

Variante	Was passiert
Lokal einbetten (empfohlen)	Die Schriftdateien liegen auf deinem Server. Die fertige Seite lädt nichts von Google nach.
Von Google laden	Nur ein Link im HTML. Dabei geht die IP-Adresse jedes Besuchers an Google — in Deutschland ohne Einwilligung heikel.
Keine Webfonts	Es werden nur Schriften verwendet, die ohnehin auf dem Gerät sind. Nichts wird geladen, die Darstellung ist dafür je nach Gerät anders.

Im selben Schritt lädst du die Symbolstile von Font Awesome. Solid deckt fast alles ab, Brands enthält Firmenlogos, Regular ein paar Umrissvarianten.

Schritt Schrift mit Schriftauswahl, Auslieferungsart und Symbolstilen — Schriftpaarung, Auslieferung und die Symbolstile an einer Stelle.

4Typografie

Die Feinjustierung: Grundschriftgröße, Zeilenabstand und für jede Überschriftenebene von H1 bis H6 die Größe. Angegeben wird jeweils ein kleinster und ein größter Wert — dazwischen wächst die Schrift stufenlos mit der Bildschirmbreite. Auf dem Handy ist sie also von selbst kleiner, ohne dass du etwas einstellen musst.

Wenn du willst, gibst du einer Ebene hier auch eine eigene Farbe mit.

Schritt Typografie mit Größen für H1 bis H6 — Für jede Überschriftenebene ein kleinster und ein größter Wert.

5Logo & Header

Logo hochladen, Höhe einstellen, Ziel der Verlinkung eintragen. Darunter kannst du einen Schriftzug neben das Logo setzen und rechts oben einen Button einblenden.

Direkt unter dem Logo liegt das Feld für das Favicon — das kleine Symbol im Browser-Tab. Empfohlen: PNG oder SVG, 96 × 96 Pixel. Lässt du das Feld leer, wird dein Logo als Favicon verwendet; das wird aber oft unscharf, weil ein breites Logo auf ein Quadrat heruntergerechnet wird.

Logo und Favicon liegen direkt untereinander.

Die Logo-Verlinkung ist wichtiger, als sie aussieht Aus dieser Adresse leitet der Generator auch die Angaben für Google ab (strukturierte Daten). Trag dort deine echte Domain ein, nicht nur https://.

6Hero

Der Hero ist der erste Bildschirm — das, was ein Besucher sieht, bevor er scrollt. Halte die Überschrift kurz und konkret.

Kleiner Vorspann: die Zeile über der Überschrift. Fläche und Schriftfarbe stellst du direkt am Element ein.
Einleitungstext: ein bis zwei Sätze. Du kannst ihn als normalen Absatz stehen lassen oder als H2, H3 oder H4 zählen lassen — das Aussehen bleibt gleich, nur die Gliederung der Seite ändert sich.
Zwei Buttons: Lässt du ein Feld leer, erscheint der Button nicht. Der zweite wird dezenter dargestellt.
Bild: Querformat, mindestens 1600 Pixel breit. Je nach Layout steht es neben dem Text oder füllt als Hintergrund die ganze Fläche.

Schritt Hero mit Vorspann, Überschrift, Einleitung und Buttons — Der Hero entscheidet, ob jemand weiterliest.

7Inhalte

Das Herzstück. Ganz oben steht die Vorteilsleiste — die schmale Zeile mit drei Stichpunkten direkt unter dem Hero.

Darunter baust du die Abfolge der Abschnitte zusammen. Drei Bausteine stehen bereit:

Baustein	Wofür
Grid-Gruppe	Mehrere gleichartige Kästen nebeneinander, ein bis sechs Spalten. Für Leistungen, Vorteile, Ablaufschritte.
Text-Bild-Block	Text auf der einen, Bild auf der anderen Seite. Für Erklärungen, die ein Bild brauchen.
Galerie	Bilder in einem Raster, Klick öffnet die Großansicht. Nur in der Vollversion.

Du kannst beliebig viele Abschnitte anlegen, sie mit den Pfeilen umsortieren, duplizieren oder mit dem Schalter vorübergehend ausblenden. Die Reihenfolge im Editor ist genau die Reihenfolge auf der Seite.

Schritt Inhalte mit der Abfolge der Abschnitte und den Knöpfen zum Hinzufügen — Abschnitte hinzufügen, sortieren, duplizieren oder ausblenden.

Die Icon-Liste

Sowohl im Text-Bild-Block als auch in der Grid-Gruppe gibt es eine Icon-Liste: eine Aufzählung, bei der jeder Punkt sein eigenes Symbol bekommt. Jeder Eintrag hat einen eigenen kleinen Editor — du kannst also Wörter fett setzen oder einen Link einbauen. Mit den Pfeilen sortierst du die Punkte um.

Wählst du kein Symbol, erscheint ein Häkchen in der Symbolfarbe. Wer lieber ein einzelnes Zeichen setzen möchte, trägt es im Feld daneben ein — etwa → oder ★.

Der Editor für die Icon-Liste mit Symbolauswahl und Textfeld je Punkt — Jeder Listenpunkt: eigenes Symbol, eigener Text, frei sortierbar.

Symbol gewählt, aber nichts zu sehen? Dann fehlt der passende Symbolstil. Geh zurück in den Schritt Schrift und lade ihn dort — meistens ist es Solid. Der Schritt Export sagt dir auch von sich aus Bescheid, wenn Symbole gesetzt sind, die noch nicht geladen werden konnten.

8Zitat & FAQ

Ein Kundenzitat mit Name, Rolle und Foto — sozialer Beweis an der Stelle, an der die Entscheidung fällt.

Darunter die häufigen Fragen. Jede Frage ist aufklappbar, die Antworten schreibst du im vollen Editor mit Absätzen, Listen und Links. Der Generator legt die Fragen zusätzlich als strukturierte Daten in den Quelltext, damit Google sie als FAQ erkennen kann. Du musst dafür nichts einstellen.

Schritt Zitat und FAQ mit Zitatfeldern und Fragenliste — Zitat und häufige Fragen. *Der FAQ-Bereich ist Teil der Vollversion.*

9CTA & Footer

Das Abschlussband mit der letzten Handlungsaufforderung — wahlweise auf Farbe oder auf einem abgedunkelten Bild. Darunter die Fußzeile mit den Links.

Hier pflegst du auch Impressum und Datenschutzerklärung. Für jeden Fußzeilen-Link hast du zwei Möglichkeiten:

Eigene Seite schreiben — der Generator legt sie beim Export als eigene Datei neben der index.html ab und verlinkt sie aus der Fußzeile. Du schreibst den Text im Editor oder fügst fertiges HTML ein. Nur in der Vollversion.
Auf eine vorhandene Adresse verlinken — wenn Impressum und Datenschutz schon anderswo auf deiner Domain liegen.

Schritt CTA und Footer mit Abschlussband, Fußzeile und Rechtstexten — Abschlussband, Fußzeile und die Rechtstext-Seiten.

Rechtstexte sind deine Verantwortung Der Generator liefert die Seiten und die Verlinkung — aber keine Rechtsberatung. Prüfe die Inhalte, bevor die Seite online geht.

10SEO & Tracking

Seitentitel und Meta-Beschreibung sind die zwei Zeilen, die Google im Suchergebnis anzeigt. Beide haben einen Zähler, damit du siehst, wann es zu lang wird.

Außerdem stellst du hier die Sprache der Seite ein und kannst sie auf Wunsch aus dem Suchindex nehmen. Für Zählcodes gibt es zwei Felder: eines für den Kopfbereich, eines für das Seitenende. Was du dort einträgst, wird unverändert übernommen.

Schritt SEO und Tracking mit Titel, Beschreibung, Sprache und Codefeldern — Titel, Beschreibung, Sprache — und die Felder für eigenen Code.

Tracking-Code erscheint bewusst nicht in der Vorschau Sonst würde jeder Klick im Editor mitgezählt. Im Export ist er drin.

11Export

Der letzte Schritt zeigt dir zuerst, was im Archiv landen wird, und weist dich auf offene Punkte hin — fehlender Seitentitel etwa, oder Symbole, deren Stil noch nicht geladen ist. Der Export funktioniert trotzdem; es sind Hinweise, keine Sperren.

Schritt Export mit Dateiliste, Download-Knöpfen und FTP-Einstellungen — Erst die Liste der Dateien, dann der Download.

Drei Knöpfe stehen bereit:

ZIP herunterladen — alles, was auf den Server gehört.
Nur index.html und Nur style.css — praktisch, wenn du an einer schon hochgeladenen Seite nur eine Kleinigkeit änderst.

Die Vorschau richtig nutzen

Die meisten Besucher kommen vom Handy. Schalte die Vorschau deshalb regelmäßig auf Mobil um — überlange Überschriften und zu breite Tabellen fallen dort sofort auf.

Die Vorschau in der Mobilansicht neben dem Editor — Ein Klick auf „Mobil“ zeigt die Seite in Handybreite.

Mit Vollbild siehst du die Seite ohne Editor drumherum — der beste Weg, um kurz vor dem Export noch einmal mit frischem Blick draufzuschauen.

Export und Upload

Im ZIP liegt diese Struktur:

landingpage.zip
├─ index.html          deine Landingpage
├─ impressum.html      Rechtstext-Seiten (Vollversion)
├─ datenschutz.html
├─ css/style.css       alle Farben, Größen und Abstände
├─ README.txt          Kurzanleitung zum Hochladen
├─ fonts/              die eingebetteten Schriften
└─ images/             deine Bilder

Von Hand hochladen

Entpacke das Archiv und lade den Inhalt des Ordners in das Webroot deines Servers — also index.html sowie die Ordner css/, images/ und fonts/.

Die Ordnerstruktur muss erhalten bleiben Wenn style.css nicht im Unterordner css/ liegt, findet die Seite ihr Stylesheet nicht und erscheint völlig unformatiert. Das ist der mit Abstand häufigste Fehler beim Hochladen.

Per Skript hochladen

Ein Browser kann kein FTP sprechen — der Generator kann die Dateien also nicht selbst übertragen. Stattdessen legt er zwei fertige Skripte bei, wenn du im Schritt Export Server und Benutzernamen einträgst:

python3 deploy/upload.py     # überall, wo Python 3 vorhanden ist
sh deploy/upload.sh          # nutzt lftp, sonst curl

Dein Passwort steht in keiner Datei Es wird beim Start des Skripts abgefragt. Damit kann es auch nicht versehentlich im Archiv landen oder mit auf den Server geraten. Der Ordner deploy/ selbst wird nicht mit hochgeladen.

Schalte FTPS ein, wenn dein Anbieter es unterstützt — fast alle können es. Ohne Verschlüsselung gehen Benutzername und Passwort im Klartext über die Leitung.

Projekt speichern

Unten links liegen zwei Knöpfe:

Projekt speichern (.json) — legt deinen kompletten Stand als Datei ab, inklusive aller Bilder. Du wirst nach einem Dateinamen gefragt.
Projekt laden — holt eine gespeicherte Datei wieder herein.

Das ist der Weg, um an einer Seite später weiterzuarbeiten, sie an eine Kollegin weiterzugeben oder eine bestehende Seite als Vorlage für die nächste zu nutzen: laden, Texte und Bilder austauschen, neu exportieren.

Leg die Projektdatei zum Kundenordner Der Zwischenstand im Browser ist bequem, aber flüchtig — er verschwindet, wenn der Browser-Speicher geleert wird oder du den Rechner wechselst. Die .json ist das, worauf du dich verlassen kannst.

Später etwas ändern

Für kleine Korrekturen an einer bereits hochgeladenen Seite musst du nicht neu exportieren. Öffne css/style.css und ändere die Werte im Block :root ganz oben — dort stehen alle Farben, Größen und Abstände an einer Stelle. Der Rest der Seite zieht automatisch nach.

Bei allem, was über Farben hinausgeht, ist der Weg über den Generator schneller: Projekt laden, ändern, neu exportieren, hochladen.

Häufige Fragen

Die Seite sieht nach dem Hochladen völlig unformatiert aus.

Dann findet sie ihr Stylesheet nicht. Prüfe, ob style.css wirklich im Unterordner css/ liegt und nicht neben der index.html. Beim Entpacken und Hochladen geht die Ordnerstruktur leicht verloren.

Meine Symbole werden nicht angezeigt.

Der zugehörige Symbolstil ist noch nicht geladen. Geh in den Schritt Schrift und lade ihn dort — in den allermeisten Fällen ist es Solid. Der Schritt Export weist dich auf ungeladene Symbole ausdrücklich hin.

Mein Tracking-Code läuft nicht.

In der Vorschau ist das Absicht — sonst würde jeder Klick im Editor mitgezählt. Prüfe den Code auf der hochgeladenen Seite. Dort wird er unverändert eingebaut.

Kann ich den Generator ohne Internet benutzen?

Ja. Nur das erstmalige Herunterladen der Schriften und Symbole braucht eine Verbindung. Danach liegen sie im Speicher deines Browsers, und du arbeitest offline weiter.

Wo liegen meine Daten?

Auf deinem Rechner. Der Generator sendet keine Inhalte irgendwohin. Auch die Bilder bleiben lokal, bis du das fertige ZIP selbst auf deinen Server lädst.

Wie viele Landingpages darf ich bauen?

So viele du willst. Die Lizenz gilt für den Zugang zum Editor, nicht für die Seiten. Was du gebaut hast, gehört dir und läuft unabhängig weiter — auch wenn du den Zugang irgendwann nicht verlängerst.

Was fehlt in der Lite-Version?

Die Lite-Version bietet zwei Layoutvarianten statt vier (Classic und Split) und zehn Schriften statt achtundvierzig. Bildergalerie und FAQ-Bereich fehlen, und eigene Impressums- und Datenschutzseiten kann sie nicht erzeugen — dort verlinkst du auf Seiten, die es schon gibt. Außerdem steht ein Hinweis in der Fußzeile der erzeugten Seite. Im Editor ist jede eingeschränkte Stelle orange markiert und führt direkt zur Vollversion.

Kurzer Überblick als Video

Du hast Probleme oder Fragen zum Generator?

Schreib unserem Support und wir helfen Dir schnellstmöglich!

Schreib dem Support