Skip to main content

​
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.

​
Tutorial

​
Settings:

​
Kategorieauswahl

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.
Angeklickte, also ausgewählte Kategorien werden blau hinterlegt dargestellt.

​
Darstellung

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

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

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.
Für weitere Einstellungen zum Layout, siehe den Tab Layout im Portlet selbst.

​
Besondere Konfigurationen

​
Titel und ARIA-Label der Kacheln

Jede Kachel trägt einen Titel und ein ARIA-Label aus Kategoriename und Zusatz, z. B. „Sofas entdecken“. Das hilft Screenreadern und Suchmaschinen. Den Zusatz änderst du über die Sprachvariable niu_category_title_suffix unter Sprachvariablen. Leer bedeutet kein Zusatz.

​
Alternativer Kategorietitel

Wie das Kategorie Grid zeigt auch der Slider einen alternativen Kategorienamen an, wenn an der Kategorie das Attribut dzm_opc_cg_alt_name gepflegt ist. Wie du es anlegst, steht unter Kategorie Grid → Alternativer Kategorietitel.

​
Beispiel

So erscheint der Kategorie Slider im Frontend:
Beispiel