Erscheinungsbild
Hero-Slider
Das Element „Boutique Hero-Slider" zeigt ein bis acht Vollbild-Slides mit Bild, Überzeile, Überschrift, Untertitel und bis zu zwei Buttons — typisch als oberstes Element einer Erlebniswelt. Bei mehr als einem Slide erscheinen Punkt-Navigation und Pfeile; ohne Interaktion schaltet der Slider automatisch weiter.
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 „Boutique Hero-Slider" hinzufügen (Kategorie „Boutique Theme").
- Im Block sitzt das Element „Boutique Hero-Slider" — rechts öffnet sich seine Konfiguration.
Grundeinstellungen
| Feld | Wirkung |
|---|---|
| Anzeigemodus | „Standard (Inhaltshöhe)" passt die Höhe an den Inhalt an. „Vollbild unter Navigation" füllt das Viewport minus der Höhe der Sticky-Navigation. |
| Auto-Weiterschalt-Intervall (ms) | Zeit bis zum automatischen Wechsel zum nächsten Slide. 0 deaktiviert das automatische Weiterschalten. |
| Bei Hover pausieren | Pausiert das automatische Weiterschalten, solange die Maus über dem Slider steht. |
| Dunkler Verlauf oben | Blendet einen subtilen dunklen Gradient über dem oberen Viertel des Hero-Bildes ein — verbessert den Kontrast zur Navigation. |
Vollbild-Modus und transparente Navigation
Im Anzeigemodus „Vollbild unter Navigation" wird der Slider zum Ziel des Nav-über-Hero-Effekts: Die Navigation legt sich transparent über das Bild, solange der Hero sichtbar ist (siehe Hero-Overlay).
Slides pflegen
Pro Slide (bis zu 8, mindestens 1):
| Feld | Wirkung |
|---|---|
| Slide-Bild | Das Hintergrundbild des Slides. |
| Alt-Text | Bildbeschreibung für Screenreader und Bildsuche. Leer lassen, wenn das Bild rein dekorativ ist. |
| Überzeile | Kurzer Text über der Überschrift. |
| Überschrift | Haupttext des Slides. Shift+Enter erzeugt einen weichen Zeilenumbruch (wird im Storefront als <br> gerendert). |
| Überschriften-Ebene | Legt fest, als welche Überschrift der Text im Seitenaufbau zählt (h1 bis h3, Standard h1). 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. Nur der erste Slide trägt diese Ebene; weitere Slides zeigen ihre Überschrift optisch gleich, zählen aber nicht als eigene Überschrift in der Gliederung. |
| Untertitel-Body | Fließtext unter der Überschrift. |
| CTA-Bezeichnung / CTA-URL | Primärer Button. Erscheint nur, wenn beide Felder gefüllt sind. |
| Sekundäre CTA-Bezeichnung / Sekundäre CTA-URL | Zweiter, zurückhaltenderer Button. Erscheint nur, wenn beide Felder gefüllt sind. |
| Textausrichtung | Ausrichtung des Textblocks: Links / Mitte / Rechts. |
Was im Frontend passiert
- Nur ausgefüllte Felder erscheinen — eine leere Überzeile oder ein leerer CTA wird nicht als leerer Text/Button ausgegeben.
- Der primäre CTA erscheint als gefüllter Button, der sekundäre als zurückhaltender Ghost-Button.
- Ab zwei Slides zeigt der Slider Punkt-Navigation und Pfeil-Buttons zum manuellen Wechseln; bei nur einem Slide entfallen beide.