Content Slider

Artikel platzieren

Für einen vollflächigen Slider, wie auf der Startseite, platzierst du diesen in einem eigenen Artikel. In den Artikeleinstellungen wählst du unter Experteneinstellungen bei CSS-Stil-Auswahl Artikel mit voller Bildschirmbreite aus.

Elemente platzieren

Im Artikel platzierst du die Elemente Content-Slider (Umschlag Anfang) und Content-Slider (Umschlag Ende). Zwischend den Umschlagselementen platzierst du jeweils ein Element vom Typ Slider-Element.

CSS-Stile für Umschlags-Anfangs-Element

Beim Umschlag-Anfangs-Element musst du bei CSS-Stil Auswahl Slider mit voller Breite und Höhe auswählen. Zusätzlich kannst du auch noch Parallax-Slider auswählen, der für den Parallax-Effekt des Textes, wenn man nach unten scrollt, sorgt.

Slider-Element

Beim Slider-Element hast du die Möglichkeit eine Überschrift, Text, Bild, Verlinkung und ein Hintergrundbild- oder Video zu setzen.

Zusätzlich hast du bei CSS-Stil Auswahl auch noch die Wahl zwischen einem dunklen Bild/Video und weißen Text. Wenn du keine der Klassen auswählst, wird der Text in schwarz dargestellt.

Beispiel

Beispiele findest du in der Demo.

Anpassung der Slider-Höhe

Dieses Feature ist erst ab der NATURE Theme Version 1.10.0 verfügbar.

Über folgende Variablen in der _custom_variables.scss kannst du die Höhe des Sliders anpassen.

Slider über komplette Bildschirmhöhe

$nature-slider-min-height: 100vh; // für die Desktop-Seite
$nature-slider-mobile-min-height: 100vh; // mobile Ansicht

Der Slider würde genau wie in der Demo aussehen.

Slider nimmt nur vorhandenen Platz ein

$nature-slider-min-height: 0;
$nature-slider-mobile-min-height: 0;

Für die Desktop-Seite wäre es aber noch nötig den Parallax-Effekt zu entfernen (siehe weiter oben unter “CSS-Stile für Umschlags-Anfangs-Element”). Andernfalls müsste man eine feste Höhe angeben, z. B. 80vh oder 800px.