Obstler.de Landingpage-Komponenten
Nachschlagewerk für redaktionelle Landingpages: Diese Seite zeigt die wichtigsten Bausteine, die im bestehenden Root-CSS angelegt sind oder auf vorhandenen Shop-Komponenten aufsetzen.
Die Demo-Helferklassen lp-* dienen nur der Dokumentation. Die eigentlichen Shop-Klassen sind jeweils sichtbar ausgezeichnet. Für den Shop den Inhalt ab <main id="shopMain"> in eine Testseite übernehmen und Platzhalterbilder ersetzen.
1. Basis, Text, Buttons und Content-Flächen
Grundlage fast jeder Landingpage. Diese Bausteine sind sicher einsetzbar und brauchen wenig spezielles Markup.
H1 im Landingpage-Content
Ein normaler Textblock mit Auszeichnung, Link, Fließtext und Listen. Geeignet für Kategorie-Intro, SEO-Text, Kaufberatung und erklärende Abschnitte.
H2 für den Abschnitt
Großer CTA Kleiner CTA Zentrierter Landingpage-CTA
- Bullet-Liste über
ul.mleft - Gut für Vorteile, Inhaltslisten und kurze Erklärungen
<div class="startseite_fix htm_include aqua">
<div class="start_text">
<h1>Headline</h1>
<p>Fließtext ...</p>
<a class="button" href="#">CTA</a>
</div>
</div>2. Hero, Geschmacksbanner und Suchergebnis-Banner
Der visuelle Einstieg für Themenwelten, Ratgeber und Kampagnen.
Sahne-, Eier- und Dessertliköre cremig, zugänglich, geschenktauglich
<div class="obst_ban border_ban"> <img src="img/mein-hero.jpg" alt="..."> <h1 class="titleFS">Headline <span class="schmal">Subline</span></h1> </div>
Banner mit Text und Bild
Für SEO-Introblöcke oberhalb einer Produktliste: kurzer Einstieg, interne Links und optional ein breites Bild.
4. Produktgrid, Produktkarten und Grid-Banner
Produktkarten können mit redaktionellen Kacheln gemischt werden. Das Produkt-Markup ist meist systemgeneriert.
-
NEU
+Demo-Produkt mit Badge18,95 €Preis je Liter: Demo -
+Demo-Likör mit Merken aktiv14,95 €Preis je Liter: Demo -
+Demo-Brand29,95 €Preis je Liter: Demo -
+Hohe Produktkarte34,95 €Preis je Liter: Demo
<ul class="se list_se"> <li class="art_box">... Produktkarte ...</li> <li class="se_banner sb gr_1x2">... redaktioneller Grid-Text ...</li> <li class="hersteller gr_1x1"><img src="..." alt="Hersteller"></li> </ul>
5. Tabs, CSS-Slider und FlexSlider-Strukturen
Gut für Beratungslogik, aber markup-empfindlicher als einfache Teaser.
Fruchtige Empfehlung
Für Gäste, Geschenke und zugängliche Genussmomente eignen sich milde Fruchtliköre und klare Obstbrände.
Cremige Empfehlung
Sahne-, Eier- und Dessertliköre funktionieren besonders gut als Geschenk, Digestif und Dessertbegleiter.
Kräftige Empfehlung
Kräuter-, Nuss- und Spezialitätenliköre tragen mehr Charakter und eignen sich für erfahrenere Zielgruppen.
FlexSlider-Slide 1
Benötigt in der Regel das passende Slider-JS.
FlexSlider-Slide 2
Nur verwenden, wenn die Shopseite den Slider initialisiert.
6. FAQ, Vorteilboxen, Bewertungen und Hersteller
Abschlussmodule für Einwandbehandlung, Vertrauen und interne Verlinkung.
Häufige Fragen
.obst_ban am stärksten, danach kurzer Text und Produktgrid.Ausgewählte Hersteller
Herstellerlisten zeigen Markenkompetenz und führen in relevante Shopbereiche.
7. Formulare, Checkboxen und Eingabefelder
Vorhanden, aber stärker an Shop-/Service-Logik gebunden. Für Landingpages sparsam einsetzen.
8. Schnellübersicht: Welche Komponente wofür?
Entscheidungshilfe für neue Landingpages.
| Komponente | Klassen | Typischer Einsatz | Bewertung |
|---|---|---|---|
| Basiswrapper | .startseite_fix, .htm_include | Grundstruktur | sicher |
| Hero | .obst_ban, .titleFS | Starker Einstieg | sicher |
| SEO-/Kategoriebanner | .banner_suchergebnis | Introtext mit Bild | sicher |
| Bildmosaik | .start_1 bis .start_6 | Themen, Kaufpfade, Kampagnen | sicher |
| Große Bühne | .start2-800 | Zwei starke Einstiege | sicher |
| Kategorie-Kacheln | .kateg | Unterthemen / interne Links | sicher |
| Produktgrid | .se.list_se, .art_box | Produkt-Empfehlungen | systemabhängig |
| Grid-Banner | .se_banner.sb | Beratung innerhalb der Produktliste | systemabhängig |
| Tabs | .tab-wrapper | Beratung nach Geschmack, Anlass, Preis | bedingt |
| CSS-Slider | .slide-wrapper | Schritt-für-Schritt-Erklärungen | bedingt |
| FAQ | .faq_wrapper, .faq | SEO + Einwandbehandlung | sicher |
| Trustboxen | .vorteil | Versand, Zahlung, Sicherheit, Service | sicher |
| Formular | .contact_form, .aktive_felderV2 | Kontakt, Beratung, Newsletter | bedingt |
.obst_ban → kurzer .start_text → .start_2/.start_3 → .se.list_se → .faq_wrapper → .vorteil.