toujou
+49 911 23980-870

Headercontent Slider

You can style and position the content according to your needs.

Beautiful button

Second Headline

You can style and position the content according to your needs.

Beautiful button

Third Headline

You can style and position the content according to your needs.

Beautiful button

Headercontent Slider

Ihr maximal breites Medium im Kopfbereich in vier Bildhöhen als Inhaltsschleife für Bild, Headline sowie optionalen Text und Link-Buttons.

Beispielansicht oben
Item-ID: 07-029

Anleitung  Verhalten


Anleitung

Header-Element anlegen

  • Header-Elemente sind grundsätzlich nur im Kopfbereich Ihrer Seite als Elemente wählbar.
  • Klicken Sie auf den Button + Inhalt und wählen Sie unter dem Reiter Widgets das Element Headercontent Slider aus.
  • Klicken Sie im Reiter Allgemein auf + Neu anlegen, um den ersten Headercontent-Slider zu erstellen.

Slidercontent + Bild hochladen

  • Title: Geben Sie in die Titelmaske eine Bezeichnung für ihren jeweiligen Slider ein, um diese im Backend unterscheiden zu können. Dieser Titel wird nicht im Frontend angezeigt.
  • Description Text: Im Editor fügen Sie (wie bei der Text-Erstellung) Headline, Teasertext und ggf. Button (siehe Beispielansicht oben) ein und stylen diese.
  • Images: Um ein Bild anzulegen, wählen Sie eine Mediendatei aus Ihrer Fileliste aus. 
  • Headercontent Position: Bestimmen Sie über die Vertical und Horizontal Position und Size die Platzierung und Größe Ihres Headercontents.

Headerhöhe auswählen

  • Wählen Sie im Reiter Settings im Bereich Header Imageheight die gewünschte Größe aus. 
  • Wenn Sie hier keine Änderungen vornehmen wird standardmäßig die default-Größe 80% (siehe oben) ausgespielt.
  • Speichern Sie Ihre Einstellungen.

Weitere Slider anlegen

  • Sie sehen nun den vergebenen Titel für bereits gespeicherte Slider.
  • Für weitere Slider klicken Sie wieder auf + Neu anlegen.
  • Sie können die Reihenfolge der einzelnen Header mittels Pfeiltasten auf der rechten Seite nachträglich verändern.

Automatische Wiedergabe von Medien

Wenn Sie mehr als ein Medium innerhalb desselben Elements einsetzen, haben Sie die Möglichkeit, die Wiedergabe zu automatisieren.

Settings-Optionen für Medienelemente mit zwei und mehr Medien

  • Slide automatically: Aktivieren Sie den Regler mittels Klick, um die automatische Wiedergabe einzurichten.
  • Interval of auto slidings (in seconds): Standardmäßig wird nach 6 Sekunden das nachfolgende Medium eingeblendet. Wenn Sie diese Frequenz ändern möchten, betätigen Sie den Regler entsprechend auf einer Skala von 1 bis 15 Sekunden (nur wenn Slide automatically aktiviert ist).

Verhalten

Der Headercontent Slider stellt mehrere Bilder im Kopfbereich mit unterschiedlichen Textinhalten in einer Schleife dar.

Verhalten: Der Slider verhält sich analog zum Headercontent-Element mit dem Unterschied, dass je Slider unterschiedlicher Textcontent in Form von Headline, Text und Verlinkung platziert werden kann. Wählen Sie daher Headerbilder aus, deren Fokus auf dem Zentrum liegt, damit in kleiner werdenden Endgeräten seitlich keine wichtigen Bildinformationen ausgeblendet werden. Um auch responsiv alle Bild-Informationen zu transportieren, bietet sich stattdessen die Nutzung des Headercontent Slider (3:1 ratio) an, das sein Bildverhältnis unabhängig vom Endgerät stets beibehält.

Wichtige Informationen:

  • Das Element ist nur sichtbar und sinnvoll, wenn Sie mehr als ein Bild mit Content erstellen möchten. Andernfalls nutzen Sie das Headercontent Element.
  • Wenn Sie nur verschiedene Bilder einsetzen, aber die gleiche Contentbox sichtbar sein soll nutzen Sie ebenfalls das Headercontent Element.

Verknüpfte Themen

Erläuterungen aus dem toujou- & TYPO3-Setup, die mit dieser Elementanleitung in Verbindung stehen.

Bildbearbeitung  Dateiliste