Erscheinungsbild
Section-Header & Breadcrumb
Zwei kleine Struktur-Elemente, die meist zusammen mit anderen Blöcken eingesetzt werden: der Boutique Section Header (Überzeile + Überschrift + optionaler Link über einem Block) und die Boutique Breadcrumb (Brotkrümelnavigation, frei im Layout platzierbar).
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.
Boutique Section Header
Das Element „Boutique Section Header" zeigt eine Überzeile, eine Überschrift und optional rechts einen Pfeil-Link — der klassische Kopf über einer Section (z. B. vor einem Produktraster).
Element einfügen
- In der Erlebniswelt eine Section anlegen und den Block „Boutique Section Header" hinzufügen.
- Im Block sitzt das Element „Boutique Section Header" — rechts öffnet sich seine Konfiguration mit den Bereichen „Inhalt" und „Link".
Optionen
| Bereich | Feld | Wirkung |
|---|---|---|
| Inhalt | Überzeile | Kleiner Text über der Überschrift. |
| Inhalt | Überschrift | Haupttext (Mehrzeilenfeld); <br> erzeugt einen expliziten Zeilenumbruch. Bleibt sie leer, zeigt der Editor nur einen Platzhaltertext — im Frontend erscheint dann keine Überschrift. |
| Inhalt | Ü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. |
| Inhalt | Breite von Überzeile und Überschrift | Begrenzt den Kopfbereich auf 4/12 bis 10/12 der Sektionsbreite oder lässt ihn über die volle Breite laufen (Standard). |
| Inhalt | Fließtext | Optionaler Text unter der Überschrift. Leerzeilen werden zu Absätzen. Bleibt das Feld leer, erscheint kein Text. |
| Inhalt | Breite des Fließtexts | Wie oben, aber getrennt einstellbar — so lässt sich eine breite Überschrift mit einer schmaleren Textspalte kombinieren. |
| Inhalt | Ausrichtung | Links / Mitte / Aufgeteilt (Überzeile + Überschrift links, Link rechts — Standard). |
| Link | Linkbezeichnung / Link-URL | Optionaler Pfeil-Link. Erscheint im Frontend nur, wenn beide Felder befüllt sind. |
Warum eine Breite einstellen?
Elemente laufen in Erlebniswelten über die volle Breite der Section. Auf großen Bildschirmen werden Überschriften und Fließtext dadurch sehr lang und schlechter lesbar. Die Breitenangabe begrenzt sie, ohne die Section selbst zu verschmälern. Auf Handys wirkt die Begrenzung bewusst nicht — dort ist ohnehin kein Platz zu verschenken.
Zusammenhang mit anderen Elementen
Einige andere Boutique-Elemente (z. B. Boutique FAQ, Boutique Stimmen, Boutique Säulen) bringen ein eigenes optionales Feld „Section-Header anzeigen" mit — mit denselben Bezeichnungen wie hier (Label, Headline, Link-Label, Link-URL). Das sind dabei eigene Konfigurationsfelder dieser Elemente, kein eingebettetes Section-Header-Element. Wird dort „Section-Header anzeigen" aktiviert, erscheint ein gleich gestalteter Kopfbereich direkt über dem jeweiligen Element — ohne dass extra ein „Boutique Section Header"-Block eingefügt werden muss. Details dazu siehe z. B. den Abschnitt „Section-Header anzeigen" in FAQ-Element.
Diese eingebetteten Köpfe bieten nur Überzeile, Überschrift und Link — Fließtext und Breitenangaben gibt es dort nicht. Wer sie braucht, setzt stattdessen einen eigenständigen Boutique Section Header-Block ein.
Boutique Breadcrumb (Element)
Core-Breadcrumb vs. dieses Element
Die Theme-Einstellung „Core-Breadcrumb ausblenden" und das Zusammenspiel mit dem Hero-Overlay sind in Hero-Overlay beschrieben. Dieser Abschnitt behandelt das CMS-Element „Boutique Breadcrumb" selbst.
Das Element „Boutique Breadcrumb" rendert eine Brotkrümelnavigation im Boutique-Design, die sich frei im Seiten-Layout platzieren lässt — z. B. wenn die Core-Breadcrumb shopweit ausgeblendet ist, aber auf bestimmten Seiten trotzdem eine gewünscht ist.
Element einfügen
- In der Erlebniswelt eine Section anlegen und den Block „Boutique Breadcrumb" hinzufügen.
- Im Block sitzt das Element „Boutique Breadcrumb" — rechts öffnet sich sein Bereich „Einstellungen".
Optionen
| Feld | Wirkung |
|---|---|
| Startseiten-Link anzeigen | Blendet den ersten Eintrag „Startseite" (verlinkt zur Shop-Startseite) ein oder aus. |
| Bezeichnung Startseiten-Link | Text für diesen ersten Eintrag (Standard: „Startseite"). |
| Trennzeichen | Zeichen zwischen den Pfad-Elementen: /, ›, · oder →. |
Was im Frontend passiert
Die restlichen Pfad-Elemente werden automatisch aus dem Seitenkontext gebildet — es gibt kein Feld, um sie manuell einzutragen:
- Auf einer Kategorieseite: die Kategorie-Kette von der obersten Ebene bis zur aktuellen Kategorie.
- Auf einer Produktseite: die Kategorie-Kette der SEO-Kategorie des Produkts, gefolgt vom Produktnamen als letztem, nicht verlinktem Eintrag.
- Auf allen anderen Seiten (z. B. statische Seiten ohne Kategorie-/Produktbezug) bleibt dieser Teil leer — je nach Einstellung ist dann höchstens noch der Startseiten-Link zu sehen.
Die Ausgabe enthält zusätzlich BreadcrumbList-Strukturdaten (schema.org) für die Suchmaschinen-Darstellung.
Nur auf Kategorie-/Produktseiten sinnvoll
Da der Pfad aus dem Kategorie- bzw. Produktkontext der Seite gebildet wird, macht das Element auf generischen Seiten (Startseite, freie Content-Seiten) außer dem optionalen Startseiten-Link keinen sichtbaren Unterschied.