Vorlage-All
Block auswählen → SRC aufklappen → HTML kopieren
Die Demo ist für das neue System lp-ui + lp-page vorbereitet. Verwende auf normalen Seiten nur lp-ui. Für eine vollständige Landingpage füge auch lp-page hinzu.
Kicker
Badge + Punkt. Die Farben werden über die Theme-Klasse für body gesteuert.
Schaltflächen / Aktionen
Primäre + sekundäre CTA für Hero, Karten und CTA-Leiste.
Medien
Universeller Rahmen für Bilder, Videos oder Iframes.
- Einheitlicher Rahmen für alle Arten von Inhalten
- In der Regel keine Inline-Stile
- Sicher für Grid und Hero
Datenblatt
Robustes List-Element für Vorteile, Parameter und Argumente.
- Kontrast und Lesbarkeit
- Ideal zum Überfliegen des Inhalts
- Einheitliche Typografie
- Ein Satz ohne separates Symbol
- Zweiter Satz ohne separates Symbol
- Dritter Satz ohne separates Symbol
Split
Bild links, Text rechts.
Überschrift für Split
Verwende dies, wenn du ein Bild oder Video an erster Stelle platzieren möchtest.
Story
Zentrierter Hero + daran anschließende Story-Boxen.
Was der Kunde löst. 1–2 Sätze ohne Fülltext.
Wie sich das Ergebnis verändert und warum es funktioniert.
Vergleich
Zentrierter Block, gleiche Höhe, Feature in der Mitte.
Stepper
Der aktive Schritt ist in einer Sekundärfarbe hervorgehoben.
-
1AuswählenWähle die Variante entsprechend der Verwendung aus.
-
2EinstellungenSchnelle Einrichtung und klare Anleitung.
-
3VerwendenKonsistente Ergebnisse ohne Überraschungen.
Featured Card
Verwende .lp__productCard.is-featured als Winner-Karte.
Boxen
Für Feature-Grid, Argumente und Anwendungsfälle.
Ein konkreter Satz zum Nutzen.
Ein konkreter Satz zum Nutzen.
Ein konkreter Satz zum Nutzen.
CTA-Leiste
Ein starker Abschluss für einen Abschnitt oder die gesamte Seite.
Trust-Leiste
Logos von Partnern, Kunden oder „As seen in“.
FAQ
Ohne JS: <details> + <summary>.
Wie schnell kann ich das einrichten? +
Funktioniert das mit meinem Gerät? +
Was, wenn ich mir bei der Auswahl unsicher bin? +
Produktempfehlungen
Eine Karte = ein Produkt. Die gesamte Karte ist über einen Stretched-Link anklickbar.
Produktempfehlungen – ohne Bilder
Reine Landing-Variante. Text + CTA, maximaler Fokus auf die Entscheidung.
- Schlüsselfunktion 1
- Schlüsselfunktion 2
- Alles aus Variante A
- Erweiterte Funktionen
- Prioritärer Support
Fertig-Voreinstellung
Hero + Stepper + Produktempfehlungen + CTA. Einmal kopieren.
-
1WählenWähle die Variante je nach Verwendungszweck aus.
-
2EinrichtenSchnelle Einrichtung ohne Chaos.
-
3VerwendenKonsistente Ergebnisse.
Empfohlene Varianten
Wähle je nach Bedarf.




































