Anpassung eines Slider-Elementes mittels CSS

Neben den im Tab „Grafik-basiert“ auswählbaren Sliderstilen, die auf der Basis von einzelnen Bildelementen zusammengesetzt und erzeugt werden, gibt es die Möglichkeit Slider-Elemente mittels CSS individuell anzupassen.

Selektieren Sie dazu zunächst einen Slider, klicken auf dieses Icon im Eigenschaftenmenü und wählen den Tab „CSS“.

In der angebotenen Dropdownliste können Sie die einzelenen Sliderbestandteile auswählen und Sie entweder mit den entsprechenden Bedienelementen (z.B. Farb- & Größenwähler) anpassen oder in dem rechten Eingabefeld direkt mit CSS-Befehlen individuell konfigurieren.

Tipp für alle, die sich mit CSS nicht auskennen: Es gibt diverse Online-Editoren für CSS, mit denen man sich den CCS-Code für ein bestimmmtes Layout (Farbe, Verlauf, Schatten, Umrahmung, abgerundete Ecken, …) sehr einfach mittels Editor erzeugen kann. Diesen Code dann einfach kopieren und in dem jeweiligen Feld des Sliders einfügen, fertig.

Ein Slider wird immer aus den folgenden Bestandteilen zusammen gesetzt:

Layout → allgemeine Größeneinstellungen
Behälter → Hintergrund des gesamten Sliders
Knopf → Anfasspunkt des Sliders
Hintergrund links → Sliderlinie/-fläche auf der linken Seite des Knopfes
Hintergrund rechts → Sliderlinie/ -fläche auf der rechten Seite des Knopfes
Ende links → Endpunkt der linken Sliderlinie/ -fläche
Ende rechts → Endpunkt der rechten Sliderlinie/ -fläche

Sämtliche von Ihnen vorgenommenen Anpassungen werden direkt in der Vorschau dieses Kontextmenüs angezeigt. Zur besseren Sichtbarkeit können Sie über einen Klick auf den Button mit dem Pinsel-Icon den Hintergrund des Vorschaufensters farblich anpassen.

de/creator/ui-remote-cssslider.txt · Zuletzt geändert: 2022/04/07 13:39 von editor