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 das „Bearbeiten“-Icon im Eigenschaftenmenü und wählen den Tab „CSS“.

Ab Version 3.0.1 gibt es die Möglichkeit von uns vordefinierte Vorlagen auszuwählen. Selektieren Sie dazu eine der angebotenen Vorlagen aus dem Dropdownmenü Vorlagen. Anschließend können Sie die Vorlage einfach direkt übernehmen oder das Layout individuell anpassen.

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

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 mit dem Pinsel-Icon den Hintergrund des Vorschaufensters anpassen.

Ihr individuelles CSS-Layout können Sie außerdem als Vorlage speichern, indem Sie einen Namen vergeben und die Taste Vorlage speichern klicken. Eigene Vorlagen werden dann im Dropdownmenü Vorlagen unter Eigene Vorlagen aufgelistet