Erscheinungsbild
Parallax-Zitat & Social-Strip
Zwei Bausteine für ruhige, redaktionelle Momente in Erlebniswelten: ein vollflächiges Bild-Zitat mit sanftem Parallax-Effekt und eine schlichte Social-Media-Zeile, die auf die globalen Social-Media-Einstellungen des Themes zugreift.
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 Parallax-Zitat
Vollbreites Hintergrundbild mit Verlauf (Scrim), darüber Eyebrow, Headline, Einleitungstext und optionaler CTA-Link. Beim Scrollen bewegt sich das Bild leicht langsamer als der Rest der Seite (Parallax).
Element einfügen
- In der Erlebniswelt eine Section anlegen und den Block „Boutique Parallax-Zitat" hinzufügen (Kategorie „Boutique Theme"). Der Block ist standardmäßig volle Breite.
- Im Block sitzt das Element „Boutique Parallax-Zitat" — rechts öffnet sich seine Konfiguration mit den Reitern „Bild", „Inhalt" und „Call-to-Action".
Einstellungen
| Bereich | Feld | Wirkung |
|---|---|---|
| Bild | Hintergrund | Mit Bild (Standard) oder Ohne Bild — Farbfläche. Ohne Bild entfällt auch der dunkle Verlauf. |
| Bild | Hintergrundbild | Bild per Drag & Drop oder Medien-Auswahl. Nur bei Mit Bild. |
| Bild | Hintergrundfarbe | Nur bei Ohne Bild: einer der Theme-Farbtöne (Fläche, Gedämpft, Akzent 1–3, Primär- oder Sekundärfarbe). Ändert sich die Palette in den Theme-Einstellungen, zieht das Band automatisch mit. |
| Bild | Textfarbe | Hell (Standard) oder Dunkel. Auf dunklem Bild bzw. dunkler Fläche hell wählen, auf hellem Motiv dunkel. |
| Bild | Bandhöhe | Höhe des Bildbands: 25 %, 33 %, 40 %, 50 %, 66 % (Standard), 75 % oder 100 % der Bildschirmhöhe. |
| Bild | Bandhöhe (Mobil) | Eigene Höhe für Handys. Wie Desktop (Standard) übernimmt den Wert von oben. |
| Bild | Parallax-Effekt | Ein- oder ausgeschaltet (Standard: an). Ausgeschaltet steht das Bild fest im Band, ohne sich beim Scrollen zu bewegen. |
| Bild | Parallax-Geschwindigkeit | Wie weit das Bild beim Scrollen wandert: Langsam (dezent), Mittel (Standard) oder Schnell (deutlich). Wirkt nur bei eingeschaltetem Parallax-Effekt. |
| Bild | Parallax-Richtung | Bewegungsrichtung beim Herunterscrollen: nach unten (Standard) oder nach oben. |
| Inhalt | Eyebrow (kleine Zeile) | Optionaler Text über der Headline. |
| Inhalt | Headline | Zitat/Aussage — Mehrzeilen möglich. |
| 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 | Headline-Größe | Display (groß) oder Klein. |
| Inhalt | Einleitungstext | Kurzer Fließtext unter der Headline. |
| Call-to-Action | CTA-Beschriftung / CTA-Link | Button unter dem Text — erscheint nur, wenn beide Felder gesetzt sind. |
Was im Frontend passiert
- Das Hintergrundbild bewegt sich beim Scrollen sanft vertikal (Parallax) — automatisch deaktiviert, wenn der Besucher „Bewegung reduzieren" in seinem Betriebssystem eingestellt hat.
- Geschwindigkeit und Richtung wirken nur auf den Bewegungseffekt, nicht auf den sichtbaren Bildausschnitt: Das Bild ist immer so viel größer als das Band, dass in jeder Scrollposition Bild zu sehen ist — auch bei Schnell blitzt nie ein Rand auf.
- Über dem Bild liegt ein dunkler Verlauf (Scrim), damit Text darauf lesbar bleibt. Bei einer Farbfläche entfällt er, damit die Farbe unverfälscht bleibt.
- Steht Mit Bild, ist aber kein Bild gewählt, bleibt die Fläche leer — die Texte erscheinen trotzdem. Für ein bewusst bildloses Band besser Ohne Bild wählen und eine Hintergrundfarbe setzen.
- Passt der Text nicht in die gewählte Bandhöhe — etwa auf dem Handy, wo eine lange Headline über mehrere Zeilen läuft — wächst das Band automatisch mit. Es wird nie etwas abgeschnitten.
CTA nur mit beiden Feldern
Trägst du nur die Beschriftung oder nur den Link ein, erscheint kein Button — beide Felder müssen befüllt sein.
Boutique Social-Media-Strip
Eine schlichte Zeile mit optionalem Text links und den Social-Media-Icons des Shops rechts.
Element einfügen
- In der Erlebniswelt eine Section anlegen und den Block „Boutique Social-Media-Strip" hinzufügen (Kategorie „Boutique Theme").
- Im Block sitzt das Element „Boutique Social-Media-Strip" — rechts öffnet sich seine Konfiguration.
Einstellungen
| Feld | Wirkung |
|---|---|
| Label (kleine Zeile) | Optionaler kurzer Text über der Headline. |
| Headline | Optionale Überschrift. |
| Ü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. |
| Text | Optionaler Fließtext unter der Headline. |
Alle drei Felder sind optional — leer bleibt der Textbereich einfach weg und es erscheinen nur die Icons.
Icons kommen aus den Theme-Einstellungen
Das Element selbst hat keine eigenen Felder für Social-Media-URLs. Die Icons rechts stammen automatisch aus Theme-Manager → dein Boutique-Theme → „Einstellungen bearbeiten" → Tab „Social Media" (Felder boutique-social-*-url für Instagram, TikTok, LinkedIn, YouTube, Facebook, Pinterest, X, WhatsApp). Ist dort eine URL gesetzt, erscheint das passende Icon automatisch — ist keine URL gesetzt, bleibt das Icon weg. Es ist derselbe Datensatz, der auch die Social-Icons im Footer speist.
Was im Frontend passiert
- Die Icon-Reihe nutzt denselben Baustein wie der Footer und übernimmt dessen Icon-Stil (rund / eckig / ohne Rahmen, Feld „Icon-Stil" im selben Tab „Social Media") — nur farblich an den hellen Seiten-Hintergrund angepasst (im Footer stehen dieselben Icons auf dunklem Grund).
- Sind keine Social-Media-URLs gepflegt, wird die Icon-Reihe komplett ausgeblendet — es bleibt dann nur der Textbereich (falls befüllt) sichtbar.