Hero Sektion
Diese Einstellung befindet sich unter: Kataloge > Kategorien > [Kategorie auswählen]
In unseren Themes kannst Du auf Kategorie-Seiten die Kategorie-Bilder in der ersten Sektion einer Erlebniswelt darstellen - automatisiert. Dabei wird das in der Kategorie hinterlegte Bild automatisch in der ersten Sektion der Erlebniswelt als Hintergrundbild eingesetzt. Darüber können dan CMS-Elemente gesetzt werden.
So kannst Du mit einer Erlebniswelt automatisch für jede Kategorie das passende Bild ausspielen, ohne für jede Kategorie einzelne Erlebniswelten anlegen zu müssen.
Konfiguration pro Kategorie
1. Einstellungen in der Kategorie
Möchtest Du diesen Effekt für jede Kategorie einzeln steuern, haben wir zusätzliche Felder in der Kategorie implementiert:
Erste Sektion des Kategorie Layouts als "Hero Sektion" verwenden (1) [ Vererbt | Ja | Nein ]
Text Kontrast (2) [ Vererbt | Heller Text | Dunkler Text ]
Hintergrundfarbe (3) [ Farbfeld ]
Sichtbarkeit (4) [ Prozentwert ] - Sichtbarkeit des Bildes auf der Hintergrundfarbe in Prozent
Fixieren (5) [ Vererbt | Fixiert | Mitscrollend ] - Fixierte Bilder strecken sich auf den gesamten Viewport und bleiben beim Herunterscrollen der Seite stehen. Mehr Informationen
Position (6) [ Auswahl ] - Ausrichtung des Bildes im Container, in welchem es sich ausdehnt.
Bildmodus (7) [ Auswahl ]
Auto: Das Bild wird komplett angezeigt. Die Höhe des Elements ist dynamisch und passt sich automatisch dem Seitenverhältnis des Bildes an. Ist die Breite des Bildes geringer als die Breite des Elements wird das Bild nicht auf die Breite des Elements gestreckt.
Füllen: Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt.
Strecken: Das Bild wird komplett angezeigt. Die Höhe des Elements ist dynamisch und passt sich automatisch dem Seitenverhältnis des Bildes an. Im Gegensatz zum Modus Standard wird das Bild auf die volle Verfügbare Breite des Elementes gestreckt.
2. Ein Bild hinterlegen
Klar, die Kategorie benötigt ein hinterlegtes Bild, welches Du direkt in der Kategorie hinterlegen kannst.
Wird kein Bild in der Kategorie hinterlegt, greift das Hintergrundbild aus der Erlebniswelt-Sektion! Die Einstellung dazu findest Du weiter untern in der Doku.
Danach musst Du nur noch eine Erlebniswelt erstellen und für die Anzeige des Bildes vorbereiten. Wie das geht, zeigen wir Dir im nachfolgenden Abschnitt "Erlebniswelt konfigurieren".
Konfiguration für alle Kategorien
Über die Theme-Konfiguration können die Einstellungen zur Darstellung des Kategorie-Bildes auch global für alle Kategorien gesetzt und partiell in der jeweiligen Kategorie überschrieben werden.
Die Zusatzfelder in der Kategorie erben im Standard diese Einstellung und können diese auch wieder überschreiben, sollte die in der Theme-Konfiguration getroffene Einstellung für die jeweilige Kategorie optimiert werden. Damit ist es auch möglich, einzelne Kategorien von diesen Einstellungen auszuschließen.
Willst Du auf allen Kategorien bis auf wenige Ausnahmen ein Kategorie-Bild darstellen, musst Du dann nicht in jeder Kategorie Deine Einstellungen wiederholen.
Kategoriebild anzeigen [ Ja | Nein ]
Text Kontrast [ Heller Text | Dunkler Text ]
Hintergrundfarbe - wird in der Erlebniswelt gesetzt
Sichtbarkeit [ Prozentwert ] - Sichtbarkeit des Bildes auf der Hintergrundfarbe in Prozent
Fixieren [ Fixiert | Mitscrollend ] - Fixierte Bilder strecken sich auf den gesamten Viewport und bleiben beim Herunterscrollen der Seite stehen. Mehr Informationen
Position [ Auswahl ] - Ausrichtung des Bildes im Container, in welchem es sich ausdehnt.
Danach musst Du nur noch eine Erlebniswelt erstellen und für die Anzeige des Bildes vorbereiten. Wie das geht, zeigen wir Dir im nachfolgenden Abschnitt.
Erlebniswelt konfigurieren
Damit das Kategoriebild nicht unkontrolliert in der ersten Sektion irgendeiner Erlebniswelt angezeigt wird, benötigst Du noch eine Erlebniswelt, die für die Anzeige des Kategorie-Bildes vorbereitet ist.
Wechsel dazu in den Bereich der Erlebniswelten unter Inhalte > Erlebniswelten. Da es sich hierbei um Erlebniswelten für die Kategorien handelt, wähle den Reiter Kategorieseiten aus.
Im Standard von Shopware 6 befinden sich hier zwei Standard Kategorie-Layouts, welche sich nicht bearbeiten lassen. Diese müssen über das Kontextmenü (1) zunächst dupliziert (2) werden. Das Duplikat kann dann bearbeitet werden:
Erstelle eine neue Sektion (1) für das Kategorie-Bild. In der ersten Sektion kannst Du dann beispielsweise den Bild-Text Block (1) und unsere Breadcrumbs-Element* (3) platzieren. Das Breadcrumbs-Element ermöglicht es Dir die Breadcrumbs auf dem Kategorie-Bild zu platzieren. Die unnötigen Elemente (4) in der zweiten Sektion kannst Du entfernen.
Durch die Datenzuordnung kannst Du automatisch die Kategorie-Beschreibung in Erlebeniswelten-Blöcken zuordnen. Mehr erfahren
Die Erlebniswelt besteht in diesem Beispiel aus zwei Layout Sektionen. In der ersten Sektion wird das Kategorie-Bild aus der Kategorie dargestellt.
Fallback: Hintergrundbild der Sektion einrichten
Du kannst in der Erlebniswelt Sektion ein Fallback-Bild (2) und eine Fallback-Farbe (1) einbinden, welche dargestellt werden, wenn der Kategorie kein Kategorie-Bild und / oder eine Hintergrundfarbe zugewiesen wurde.
___________________
* Das Breadcrumb-Element ist aus technischen Gründen nicht in der Cloud-Variante von Shopware 6 verfügbar.
Last updated
