Erscheinungsbild
Berater-Sektion
Der Block „Berater-Sektion" ist eine Kaufberatungs-Sektion mit Kopfzeile, frei kombinierbaren Textblöcken (linke Spalte) und einer kuratierten Produktauswahl mit eigenem Empfehlungstext pro Produkt (rechte Spalte). Er eignet sich für Ratgeber-Inhalte wie „Welches Modell passt zu welchem Einsatzzweck?".
Suchmaschinen und Screenreader für blinde und sehbehinderte Besucher orientieren sich an der Reihenfolge der Überschriften auf einer Seite, nicht an ihrer optischen Größe. Deshalb lässt sich bei manchen Elementen die Überschriften-Ebene gezielt einstellen.
Element einfügen
- In der Erlebniswelt eine Section anlegen und den Block „Berater-Sektion" hinzufügen (Kategorie „Boutique Theme").
- Im Block sitzt das gleichnamige Element „Berater-Sektion" — rechts öffnet sich seine Konfiguration.
Kopfzeile
| Feld | Wirkung |
|---|---|
| Überzeile | Kurzer Text über der Überschrift. |
| Überschrift | Serif-Headline. Mit <br> lassen sich explizite Zeilenumbrüche einfügen. |
| Überschriften-Ebene | Legt fest, als welche Überschrift der Text im Seitenaufbau zählt (h1 bis h3). Die Schriftgröße ändert sich dadurch nicht. Faustregel: pro Seite genau eine h1 — auf Produktseiten ist das der Produktname, auf allen anderen die wichtigste Überschrift der Seite. |
| Ebene der Untertitel | Legt fest, als welche Überschrift die Zwischenüberschriften der Textblöcke (bei Darstellung „Fließtext") im Seitenaufbau zählen (h2 bis h4). Sie sollten eine Stufe unter der Überschrift der Kopfzeile liegen. |
| Randnotiz (rechts) | Kurzer Text, rechtsbündig neben der Kopfzeile. |
| Sprungmarke (Anker-ID) | Macht die Sektion per #anker ansteuerbar (z. B. aus einem Menü heraus). Eingaben werden automatisch auf Kleinbuchstaben, Ziffern und Bindestriche reduziert — Leerzeichen werden zu Bindestrichen. |
Textblöcke (linke Spalte)
Bis zu 6 Einträge, je mit:
| Feld | Wirkung |
|---|---|
| Zwischenüberschrift / Label | Bei Darstellung „Fließtext" eine Zwischenüberschrift, bei „Kasten"-Darstellungen ein kleines Label. |
| Text | Der eigentliche Textblock — mit Formatierung: fett, kursiv, Listen und Links. |
| Darstellung | Fließtext, Kasten mit Rahmen oder Kasten mit Leiste links. |
Reiter ohne Beschriftung
Legst du mehrere Textblöcke an und lässt die Zwischenüberschrift leer, heißt der Reiter „Block 1", „Block 2" und so weiter — so bleibt erkennbar, dass er anklickbar ist. Dasselbe gilt für alle anderen Elemente mit mehreren Einträgen.
Leere Textblöcke sind harmlos
Ein Eintrag ohne Zwischenüberschrift UND ohne Text erscheint im Frontend nicht.
Produkte (rechte Spalte)
Bis zu 8 Einträge, je mit:
| Feld | Wirkung |
|---|---|
| Produkt | Das anzuzeigende Produkt. |
| Meta-Zeile | Kurze Fakten, z. B. Maße und Ausstattung. |
| Empfehlungs-Label (fett) | Optional, z. B. „Unser Rat:" — wird fett vor dem Empfehlungstext gerendert. |
| Empfehlungstext | Der eigentliche Empfehlungstext. |
Die Reihenfolge der Einträge bestimmt die Reihenfolge im Frontend.
Was im Frontend passiert
- Textblöcke (links) und Produkte (rechts) stehen auf Desktop nebeneinander, auf Mobilgeräten untereinander.
- Jedes Produkt erscheint als normale Produktkarte — inklusive Farb-Varianten (Swatches), Hover-Bildwechsel und AJAX-Variantenwechsel wie im Listing. Meta-Zeile und Empfehlungstext stehen als eigener Text unter der Karte und bleiben beim Variantenwechsel erhalten.
- Ein Produkt, das gelöscht oder im Verkaufskanal nicht sichtbar ist, wird ohne Fehler übersprungen.
- Leere Textblöcke und leere Produktzeilen (kein Produkt gewählt) erscheinen nicht im Markup.