Hero-Slider
Die ThemeWare® "Hero-Slider"-Blöcke sind CMS-Blöcke die mit den entsprechenden Slider CMS-Elementen befüllt werden müssen. Andere CMS-Elemente funktionieren nicht im Hero-Slider.
Die Slider-Blöcke haben daher spezielle CMS-Elemente.
Verfügbare "Hero-Slider"-Blöcke
"Hero-Slider"-Block hinzufügen
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Den "Hero-Slider" findest du in der Rubrik "ThemeWare® {Dein Theme}" [Pro]
Autoplay und Barrierefreiheit
Das "automatische Abspielen" (autoplay) ist aufgrund von Bedenken hinsichtlich der Barrierefreiheit (ab Version 3.7 bzw. 4.0) deaktiviert. Du kannst diese Funktion über die Theme-Konfiguration aktivieren.
Bedenken hinsichtlich der Barrierefreiheit: Das Aktivieren dieser Funktion kann dazu führen, dass Teile Deiner Storefront für Menschen mit Einschränkungen nicht zugänglich sind. Dies kann eine Nichteinhaltung der in Deiner Gerichtsbarkeit geltenden Barrierefreiheitsgesetze darstellen (z.B. des Europäischen Rechtsakts zur Barrierefreiheit).
Bitte beachte: Mit dem Aktivieren erkennst du dieses Risiko an und übernimmst die volle Verantwortung.
CSS-Klassen
In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.
Da der ThemeWare® "Hero-Slider" (ab ThemeWare® 2.0) auf dem Bootstrap 5 Carousel (Dokumentation) basiert, sind folgende CSS-Klassen besonders interessant:
Überblenden (Crossfade)
Füge die CSS-Klasse carousel-fade dem Block hinzu, um Slides mit einem Fade-Übergang anstelle eines Slides zu animieren.
Dunkle Bedienelemente (Controls)
Füge die CSS-Klasse carousel-dark dem Block hinzu, um Steuerelemente dunkler zu gestalten.
Flache Bedienelemente (Controls)
Für eine optimale Sichtbarkeit haben die Bedienelemente vom "Hero-Slider" einen Schlagschatten. Dies hilft besonders, wenn die Farbigkeit der Bilder im Slider stark variiert. Möchtest du diese Schlagschatten nicht, füge dem entsprechenden Block einfach die CSS-Klasse flat-controls hinzu.
Demos
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Last updated
Was this helpful?