Erscheinungsbild
Bild-Text
Das Element „Boutique Bild-Text" kombiniert ein Bild mit einem Textblock — Überzeile, Überschrift, Fließtext, optional eine Detailliste (Begriff/Beschreibung) und bis zu zwei Call-to-Action-Buttons. Bild und Text stehen nebeneinander, Bildposition und Spaltenverhältnis sind einstellbar.
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 Bild-Text" hinzufügen (Kategorie „Boutique Theme").
- Im Block sitzt das Element „Boutique Bild-Text" — rechts öffnet sich seine Konfiguration.
Bild
| Feld | Wirkung |
|---|---|
| Bild | Das Element-Bild (Pflichtfeld). |
| Alt-Text | Bildbeschreibung für Screenreader. Bei rein dekorativen Bildern leer lassen. |
| Bildposition | Links oder Rechts — auf welcher Seite das Bild sitzt (Text füllt die andere Seite). |
| Bildbreite | Spaltenverhältnis von Bild zu Text: Schmal (5/12), Hälftig (6/12), Standard (7/12), Breit (8/12). |
Inhalt
| Feld | Wirkung |
|---|---|
| Überzeile | Kurzer Text über der Überschrift. |
| Überschrift | Haupttext. 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. |
| Fließtext | Textblock unter der Überschrift. Leerzeilen werden zu Absatzumbrüchen. |
Detailliste
Bis zu 6 Einträge, je mit Begriff (linke Spalte) und Beschreibung (rechte Spalte) — wird als zweispaltige Liste unter dem Fließtext ausgegeben. Leere Einträge (weder Begriff noch Beschreibung gefüllt) erscheinen nicht.
Call-to-Action-Buttons
Bis zu 2 Buttons, je mit Button-Text, Button-URL und Button-Stil (Primär-Button, Ghost-Button, Unterstreichungs-Link). Ein Button erscheint nur, wenn Text UND URL gefüllt sind.
Unterstreichungs-Link mit Pfeil
Der Stil „Unterstreichungs-Link" erhält im Frontend automatisch einen kleinen Pfeil (→) nach dem Text.
Was im Frontend passiert
- Auf Desktop stehen Bild und Text nebeneinander (Bildposition „Rechts" dreht die Reihenfolge um), auf Mobilgeräten immer untereinander in voller Breite.
- Überzeile, Überschrift, Fließtext, Detailliste und CTAs erscheinen nur, wenn sie befüllt sind — leere Felder erzeugen keine leeren Elemente im Markup.