​

Allgemeine Beschreibung

Das “Kategorie Slider” Portlet zeigt eine frei wählbare Auswahl an Kategorien als Slider an, inklusive Bild, Titel und individuell konfigurierbarer Darstellung.

​

Einsatzmöglichkeiten (Inspiration)

• Kategorien bewerben: Hebe ausgewählte Kategorien (z. B. Aktionen oder Saisonthemen) prominent auf der Startseite oder Landingpages hervor.
• Navigation erleichtern: Biete Besuchern einen schnellen visuellen Einstieg in dein Sortiment.

---

​

Settings:

​

Kategorieauswahl

Kategorien Auswählen: Suche über das Textfeld nach Kategorien und wähle per Klick aus den gefundenen Einträgen die Kategorien aus, die im Slider angezeigt werden sollen. Über Alle auswählen bzw. Alle abwählen kannst du die gesamte Trefferliste auf einmal (ab)wählen.

---

​

Darstellung

​

Slider-Darstellung

Slider Typ: Wähle, ob die Slides als Bild & Text oder in einer anderen Variante dargestellt werden. Bildtyp: Lege fest, ob das Bild als Hintergrundbild oder als Produktbild dargestellt wird.

• Bild ist Hintergrundbild
• Bild ist Produktbild

Bildgröße: Wähle die Bildgröße für die Darstellung (Standard: default). Fallback image: Wird angezeigt, wenn für eine Kategorie kein Bild hinterlegt ist. Farbüberlagerung: Legt eine Farbe zwischen Bild und Inhalt, um die Lesbarkeit zu verbessern. Verwende den Transparenz-Slider, um das Bild durchscheinen zu lassen. Seitenverhältnis des Bildes: Lege das Seitenverhältnis fest:

• 1 / 1
• 16 / 9
• 3 / 2
• custom

Kategorie-Slider Kartentyp: Wähle, wo der Text der Karte angezeigt wird:

• Text in der Karte
• Text unter der Karte

​

Slider-Item-Darstellung

Textposition horizontal / vertikal: Positioniere den Text innerhalb der Karte (z. B. Links / Oben). Innenabstand: Lege den Innenabstand der Karte fest (z. B. p-0). HTML-Tag der Überschrift: Wähle das HTML-Tag für die Überschrift (h1-h6 oder Standard Text). Größe der Überschrift: Bestimmt, wie groß der Text dargestellt wird und orientiert sich an den Vorgaben (h1-h6 & p) des aktuellen Themes. Textfarbe der Überschrift: Wähle eine eigene Farbe für die Überschrift oder belasse die Standardfarbe. Schrift-Dicke: Bestimmt die font-weight (CSS) der Überschrift (z. B. 800).

​

Slider-Controls-Darstellung

Vor- und Zurückbutton anzeigen?: Aktiviere die Navigationsbuttons des Sliders. Seitenindexierung anzeigen?: Aktiviere die Punktnavigation unter dem Slider. Vor- und Zurückbutton Typ: Wähle die Darstellung der Navigationsbuttons:

• Chevron (>)
• Doppel Chevron (>>)
• Standard Pfeil (->)

---

​

Größe und Abstände

​

Slides - Darstellung

Anzahl der sichtbaren Slides je Displaygröße: Lege für die folgenden Breakpoints fest, wie viele Slides gleichzeitig sichtbar sein sollen:

• XS: <576px
• S: ≥576px
• M: ≥768px
• L: ≥992px
• XL: ≥1200px

Anzahl der Slides, um die verschoben wird: Lege für dieselben Breakpoints fest, um wie viele Slides pro Klick oder Wisch weitergeschaltet wird.

​

Slides - Größe und Abstände

Lücke zwischen Slides: Wähle den Abstand zwischen den einzelnen Slides:

• Kein Abstand
• XS (0.25rem)
• M (1rem)
• XL (2rem)

Produkte rechts anschneiden: Schneidet Produkte rechts ab, um zu zeigen, dass es noch mehr gibt.

---

​

Bewegung

Ausrichtung Slider: Bestimmt die Laufrichtung des Sliders (z. B. links nach rechts). Übergangsgeschwindigkeit in Millisekunden: Geschwindigkeit des Übergangs zwischen den Slides. Ziehen per Maus: Lege fest, ob und wie der Slider per Maus gezogen werden kann (z. B. “erlauben mit Einrastpunkten”).

​

Optionen für Automatisches abspielen

Automatisch abspielen aktivieren?: Aktiviert das automatische Weiterschalten des Sliders. Abspielintervall in Millisekunden: Zeitabstand zwischen den automatischen Übergängen. Pausieren bei Hover?: Pausiert das automatische Abspielen, sobald der Nutzer mit der Maus über den Slider fährt.

---

---

​

Beispiel

So erscheint der Kategorie Slider im Frontend:

---