Kategorie Listing

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.

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 (optional)

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. Es ist auch möglich, mehrere Einstiegspunkte zu wählen. Diese werden dann zusammen gefasst und als größere Kategorie-Auswahl angezeigt.

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.

Individuelle Kategorien (optional)

Anstelle eines Einstiegspunktes, der auf deinen existierenden Kategorie-Baum zurückgreift, kannst Du die anzuzeigenden Kategorien auch frei zusammenstellen.

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.

Ausgeblendete Kategorien anzeigen

Bestimmt ob Kategorien, die in der Navigation ausgeblendet sind, im Kategorie-Listing angezeigt werden.

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.

Werden Schriftschnitte abgerufen, welche die Schrift nicht ausliefert, wenden Browser das Näherungsverfahren an.

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.

Zusätzlich kannst Du dieses Overlay als Farbverlauf zu transparent einstellen und, sofern aktiviert, einen Winkel für diesen Farbverlauf wählen. Beispiel:

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.