Ab Theme Version 4.3.0 steht Dir zur Bearbeitung der Erlebniswelten das Kategorie Listing Element zur Verfügung - exklusiv für die Pro Version des Themes auf Shopware Self-managed Systemen.
Last updated
Was this helpful?
Mit dem Kategorie Listing Element kannst Du die Unterkategorien als Kacheln in Deiner Kategorieseite auflisten. Für die Anzeige eines Kategorie-Listings stehen Dir in der Block-Kategorie „Kategorie“ bereits fünf vorkonfigurierte Blöcke mit dem Kategorie Listing Element zur Verfügung.
Element-Einstellungen
Es gibt zahlreiche Einstellungen zum Konfigurieren des Elementlayouts.
Inhalt
Inhaltseinstellungen des Kategorie Listing Elements.
Individueller Einstiegspunkt
Wähle einen individuellen Einstiegspunkt für das Element- das ist besonders sinnvoll, wenn Du eine bestimmte Kategorie-Struktur zum Beispiel auf der Startseite darstellen möchtest.
Hinweis: Der gewählte Einstiegspunkt muss innerhalb einer Navigation (Haupt-Navigation, Footer-Navigation oder Service-Navigation) liegen. Du kannst die verwendete Einstiegspunkt-Kategorie aber über die Einstellung in der Kategorie aus der Navigation ausblenden, damit diese nicht in deinen Menüs sondern nur als Kategorie-Listing angezeigt wird.
CSS-Klassen
Füge benutzerdefinierte CSS-Klassen für benutzerdefiniertes Styling hinzu. Mehrere Klassen können mit einem Leerzeichen getrennt hinzugefügt werden. Keine Punkte vor den Klassennamen.
Grundeinstellungen
Die Grundeinstellungen legen das Erscheinungsbild und den Stil jeder einzelnen Kategorie fest.
Layout
Wähle zwischen verschiedenen Layout-Typen für das Kategorie Listing Bild + Text | Bild | Text
Abstand
Bestimmt den inneren Abstand zwischen den einzelnen Kategorie-Kacheln.
Kategorien pro Zeile
Definiere die Anzahl an Kategorien pro Zeile für jeden Viewport.
Slider (je Viewport)
Insbesondere auf mobilen Geräten kann die Auflistung der Kategorien sehr viel vertikalen Raum einnehmen. Um das zu vermeiden kannst Du pro Viewport bestimmen, ob das Kategorie-Listing als Slider angezeigt wird. Die Anzahl der Kategorien pro Zeile gibt dann die Anzahl gleichzeitig sichtbarer Kacheln im Slider an.
Tipp: Es können auch Kommazahlen für die Kategorien pro Zeile eingetragen werden, sodass der Slider die nächste Kacheln teilweise anzeigt. Das suggeriert dem Kunden, dass es hier noch mehr Kategorien zu entdecken gibt.
Styling
Hintergrund
Hintergrundfarbe der Kategorie Listing Kachel.
Rahmen
Rahmen zur Umrandung der Kategorie Listing Kachel.
Innenabstände (px)
Fügt einen inneren Abstand zur Kategorie Kachel hinzu. Die hinterlegte Hintergrundfarbe wird um das Kategoriebild herum sichtbar sein.
Abgerundete Ecken
Fügt einen Randradius für die Kanten der Kategorie Listing Kachel hinzu. Beachte, dass das Bild ebenfalls einen individuellen Randradius haben kann.
Mouse-Over Effekt | Mouse-Out Effekt
Durch verschiedene Mouse-Over und Mouse-Out Effekte lässt sich die Sichtbarkeit des Inhalts auf der Kategorie Kachel steuern. So kann der Inhalt beispielsweise erst sichtbar werden, wenn sich die Maus darüber befindet - oder verschwindet, wenn die Maus über das Element bewegt wird, sodass das Kategoriebild komplett sichtbar wird.
Text Einstellungen
Die Texteinstellungen geben das Aussehen und den Stil des Textes über oder neben dem Bild an. Diese Registerkarte ist nur verfügbar, wenn die Option Inhalt > Layout auf Bild + Text oder Text eingestellt ist.
Typografie
Schriftart
Wähle zwischen der allgemeinen Text-Schriftfamilie oder der Überschriften-Schriftfamilie.
Text Ausrichtung
Definiert die horizontale Ausrichtung des Textes – hauptsächlich sichtbar, wenn eine Minimale Breite (px, %) für das Textelement festlegen.
Schriftgröße
Die Schriftgröße des Textelements. Die Schriftgröße wird mit der Größe des Viewports skaliert und kann auf kleineren Bildschirmen kleiner erscheinen.
Schriftgewicht
Definiert die Schriftstärke des Textes. Achte darauf, Schriftstile zu verwenden, die in der verwendete Schriftart vorhanden sind.
Text Element
Farbe
Die Farbe des Textes auf dem Text Element.
Hintergrund
Die Hintergrundfarbe des Text Elements.
Beachten auch das Alphakanalfeld in der Farbauswahl, um teilweise transparente Hintergründe zu erstellen.
Hintergrund weichzeichnen (px)
Mit der Hintergrundunschärfe kann alles hinter dem Text Element mit dem eingegebenen Wert in Pixeln unscharf gemacht werden. Der Effekt ist nur sichtbar, wenn über die Farbauswahl eine transparente oder teilweise transparente Hintergrundfarbe ausgewählt wurde.
Beispiel:
Position
Definiert, ob sich das Textelement auf oder neben dem Bild befindet.
Diese Option ist nur verfügbar, wenn der Layouttyp auf Bild + Text eingestellt ist.
Horizontale Ausrichtung
Die horizontale Ausrichtung bestimmt zusammen mit der vertikalen Ausrichtung die grundlegende Platzierung des Inhalts auf dem Bild.
Vertikale Ausrichtung
Die vertikale Ausrichtung bestimmt zusammen mit der horizontalen Ausrichtung die grundlegende Platzierung des Inhalts auf dem Bild.
Minimale Breite (px, %)
Die minimale Breite bestimmt, wie breit das Textelement mindestens sein muss.
Diese Einstellung erzeugt in Verbindung mit der Maximale Breite (px, %) eine dynamische Breite zwischen minimaler und maximaler Breite.
Maximale Breite (px, %)
Die maximale Breite bestimmt, wie breit das Textelement höchstens sein darf.
Diese Einstellung erzeugt in Verbindung mit der Maximale Breite (px, %) eine dynamische Breite zwischen minimaler und maximaler Breite.
Erweiterte Einstellungen
Innenabstände (px)
Bestimmt die Innenabstände im Text-Element Container und fällt vor allem dann auf, wenn für diesen Container eine Hintergrundfarbe eingestellt wurde.
Außenabstände (px, %)
Sorgt dafür, dass der Text-Element Container nicht am Bildrand klebt und bestimmt zudem die genaue Positionierung abhängig von der vertikalen und horizontalen Ausrichtung.
Abgerundete Ecken
Legt einen Rahmenradius für den Text-Element Container fest.
Beachte, dass dies nur sichtbar ist, wenn eine Hintergrundfarbe definiert wurde.
Text Mouse-Over
Definiert eine kleine Hover-Animation für das Textelement. Wähle zwischen Keine | Zeige Pfeil | Pfeilanimation.
Bild Einstellungen
Die Bildeinstellungen geben das Aussehen und den Stil des Kategoriebilds an. Diese Registerkarte ist nur verfügbar, wenn die Option Inhalt > Layout auf Bild + Text oder Bild eingestellt ist.
Anzeigemodus
Mit dem Anzeigemodus entscheidest Du, wie das Bild dargestellt werden soll:
Füllen/Zugeschnitten: 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.
Beinhalten/Feste Höhe: Das Bild wird gestreckt und auf die Größe der Box angepasst. Es wird hierbei nicht beschnitten.
Minimale Höhe
Gibt die Mindesthöhe des Elements an.
Bild-Ausrichtung
Horizontale Bildausrichtung
Gibt die horizontale Ausrichtung des Bildes innerhalb der Box des Elements an.
Vertikale Bildausrichtung
Gibt die vertikale Ausrichtung des Bildes innerhalb der Box des Elements an.
Erweiterte Einstellungen
Hintergrundbild mit Farbe überlagern
Durch die Option Hintergrundbild mit Farbe überlagern dämpfst Du das Kategoriebild nach belieben mit einer Teiltransparenten Farbe ab und machst so den Text auf dem Bild lesbarer.
Abgerundete Ecken
Definiere einen individuellen Randradius für das Bild.
Beachte, dass das gesamte Element ebenfalls einen Randradius haben kann.
Bild Mouse-Over
Bietet Dir die Möglichkeit, einen kleinen Hover-Effekt auf das Element anzuwenden.
Alternatives Anzeigebild
Kategorien vom Typ Link haben in Shopware kein eigenes Kategorie Anzeigebild. Ebenso kannst Du über dieses Zusatzfeld ein alternatives Bild für das Kategorie-Listing implementieren, sollte das generelle Anzeigebild der Kategorie nicht geeignet sein.
Über die Medienauswahl Kategorie Listing Anzeigebild kannst Du ein alternatives Bild oder Video für das Kategorie Listing definieren.
Werden Schriftschnitte abgerufen, welche die Schrift nicht ausliefert, wenden Browser das an.
Zusätzlich kannst Du dieses Overlay als Farbverlauf zu transparent einstellen und, sofern aktiviert, einen Winkel für diesen Farbverlauf wählen.
Beispiel:
