Landing Page Builder

Was macht Landing Page Builder?

Übersicht

Ein komplettes Designsystem + Komponentenbibliothek zum Erstellen schöner, interaktiver Landing Pages in reinem HTML/CSS/JS – keine Frameworks, kein Build-Schritt. Liefert wiederverwendbare CSS-Design-Tokens, JS-Interaktionsmuster und HTML-Komponentenvorlagen.

Grundprinzip: Kopiere die Designsystem-Dateien, setze Sektionen aus Komponentenvorlagen zusammen, passe Tokens an. Alles funktioniert ohne Abhängigkeiten (optional: Google Fonts CDN).

Wann verwenden

• Erstellen einer Produkt-Landingpage, Marketing-Site oder Showcase
• Erstellen von Dokumentationsseiten mit interaktiven Elementen
• Deployment auf GitHub Pages, Netlify oder einem anderen statischen Host
• Benötigen Dark/Light-Theme-Umschaltung, Scroll-Animationen, Tooltips
• Möchte ein poliertes Design ohne React/Vue/Build-Tools

NICHT verwenden:

• Komplexe Web-Apps mit State-Management (Framework verwenden)
• Serverseitig gerenderte Seiten (nur statisch)
• Interne Admin-Dashboards (überdimensioniert)

Kurzreferenz

Komponente	Datei	Wichtige Klassen
Design-Tokens	design-system/design-system.css	:root-Variablen, --accent-*, --gradient-*
Navbar	components-reference.html	.navbar, .nav-links, .lang-toggle
Hero	components-reference.html	.hero, .hero-title, .gradient-text, .hero-stats
Funktionskarten	components-reference.html	.feature-grid, .feature-card, .reveal
Code-Blöcke	components-reference.html	.code-block, .code-header, .code-copy
Tooltips	components-reference.html	.tooltip-trigger, [data-tooltip]
Tabs	components-reference.html	.tab-list, .tab-btn, .tab-panel
Theme-Umschaltung	design-system.css + app-template.js	[data-theme], .icon-btn[data-toggle="theme"]
Sprach-Buttons	design-system.css	.lang-toggle, .lang-btn[data-lang]
Scroll-Reveal	app-template.js	.reveal → .visible via IntersectionObserver
i18n	app-template.js	[data-i18n] + Übersetzungs-Dictionary

Designsystem

design-system.css liefert den vollständigen Tokensatz für beide Themes. Passe diese für Deine Marke an; lies die Datei für den Rest.

Lies design-system/design-system.css für die gepflegten Dark/Light-Tokens; passe sie an die gewünschte Marke an, anstatt hier eine zweite Tokenliste zu führen.

Dateien

Datei	Zweck
design-system/design-system.css	Vollständiges CSS: Tokens, Navbar, Hero, Karten, Code-Blöcke, Tooltips, Tabs, Footer, responsiv
design-system/app-template.js	JS: Scroll-Reveal, Navbar-Scroll, Code-Kopieren, Tabs, Theme-Umschaltung, mobiles Menü, i18n
design-system/components-reference.html	Jede Komponente mit Copy-Paste-HTML-Snippets
templates/landing-template.html	Vollständige Startvorlage – Wireframe mit allen Sektionen

Tooltip-Muster

Tooltips funktionieren auf Desktop (Hover) und Mobil/Touch (Tippen zum Umschalten). Erfordert app-template.js für Touch-Unterstützung.

<!-- Öffnet nach oben (Standard) -->
<span class="tooltip-trigger" data-tooltip="Hilfreiche Erklärung hier">
    Über mich fahren
</span>

<!-- Öffnet nach unten (für Trigger nahe der Seitenoberseite) -->
<span class="tooltip-trigger tooltip-bottom" data-tooltip="Erklärung">
    Über mich fahren
</span>

<!-- Breite Variante für längere Texte (umbrechen auf Mobilgeräten) -->
<span class="tooltip-trigger tooltip-wide" data-tooltip="Längere mehrzeilige Erklärung...">
    Über mich fahren
</span>

Desktop: CSS :hover zeigt Tooltip. Mobil/Tablet: JS fügt Tap-to-Toggle mit Outside-Click-to-Close hinzu. Tastatur: Tab zum Fokussieren, Enter/Leertaste zum Umschalten, Escape zum Schließen.

Der Touch- und Tastaturpfad funktioniert durch Umschalten von .tooltip-active auf dem Trigger. Handgeschriebenes Tooltip-CSS muss .tooltip-trigger:hover::after und .tooltip-trigger.tooltip-active::after gemeinsam stylen, sonst bewirkt das Tippen nichts – lies Abschnitt 10 (Tooltips) in design-system/design-system.css, bevor Du eigene schreibst.

Stapeln (Stacking): Tooltips entkommen ihrem Container über z-index:10 bei .feature-card:hover, .code-block:hover und .callout:hover. Behalte diese Regeln und schneide abgerundete Ecken mit border-radius auf dem Kindelement (wie .feature-card::before es tut) – overflow:hidden auf dem Container schneidet das Tooltip ab, und kein z-index kann es retten.

Build-Workflow

1. Kopiere design-system.css, app-template.js und templates/landing-template.html (umbenannt in index.html) in Dein Projekt – alle drei nebeneinander, da die Vorlage sie über den reinen Dateinamen verlinkt
2. Füge Sektionen aus components-reference.html (Funktionen, Code-Blöcke, Tabs, Callouts, Footer) in das Wireframe ein
3. Passe Tokens in :root an (Farben, Schriftarten, Verläufe)
4. Füge Inhalte ins HTML ein, verkabel data-i18n-Schlüssel für Mehrsprachigkeit
5. Teste lokal – öffne index.html im Browser und prüfe jede Zeile der häufigen Fehler unten; fertig, wenn jede Zeile in Ordnung ist
6. Liefere die verifizierten Dateien aus. Nur auf Anfrage deployen, mit dem vereinbarten Host und Repository-Workflow.

Deployment auf GitHub Pages

Wenn eine Veröffentlichung angefordert wird, überprüfe das bestehende Repository und die Pages-Konfiguration, bereite die geprüften Dateien vor und folge dessen Deployment-Workflow. Erstelle ein öffentliches Repository oder ändere die Sichtbarkeit nur mit Genehmigung. Stage die benannten Ausgabedateien, ohne nicht zusammenhängende Arbeit zu beeinträchtigen. Überprüfe die bereitgestellte Revision und die Live-Inhalte, bevor Du eine öffentliche URL meldest; HTTP 200 allein ist kein visueller Nachweis.

Häufige Fehler

Fehler	Lösung
Kein Meta-Viewport	<meta name="viewport" content="width=device-width, initial-scale=1.0"> hinzufügen
Fehlendes [data-theme] auf <html>	<html data-theme="dark"> für Standard-Theme setzen
Reveal-Elemente unsichtbar	Stelle sicher, dass app-template.js geladen ist und .reveal eine passende .visible-Logik hat
Reveal innerhalb eines versteckten Tab-Panels	Tab-Umschaltung enthüllt automatisch; oder entferne .reveal aus Tab-Inhalten
Tooltips oben abgeschnitten	Verwende .tooltip-bottom-Variante für Trigger nahe der Ansichts-Oberkante
Theme-Flackern beim Laden	Inline <script> im <head>, das localStorage.getItem('lp-theme') vor dem Rendern in data-theme einliest – bereits in templates/landing-template.html
Kein-JS-Inhalt unsichtbar	class="no-js" auf <html> + .no-js .reveal { opacity:1 } Fallback
Code-Kopieren funktioniert nicht	Prüfe, ob der .code-copy-Button existiert und JS geladen ist
Flackern von unstyledem Content	Setze das <link> für die Schriftart im <head> vor das Stylesheet
Fehlende Fokus-Stile	Alle interaktiven Elemente haben ein integriertes :focus-visible-Outline

Barrierefreiheit

Das Designsystem beinhaltet:

• :focus-visible-Outlines auf allen interaktiven Elementen (Tastaturnavigation)
• prefers-reduced-motion Media Query (deaktiviert Animationen)
• .no-js Fallback (Inhalte ohne JavaScript sichtbar)
• ARIA-Labels auf symboltastigen Buttons
• Semantische HTML-Struktur (korrekte Überschriftenhierarchie)
• Theme-Kontrast-Tokens; überprüfe den Kontrast nach individuellem Anpassen, bevor Du WCAG-Konformität behauptest