toujou
+49 911 23980-870

Image-Teaser Slider, left

Mehrere Teaser in einem Slider mit je einem Bild links und Text rechts.

 Beispielansicht   Anleitung   Verhalten


Beispielansicht

Standard Design

Lorem ipsum dolor sit amet, mollis vocibus at cum. Eos te iriure epicurei, in pri iisque eligendi. Et has recusabo sapientem, usu delectus recteque accusamus an. In doming luptatum vis, voluptua democritum mel at. Mei aeque vidisse intellegat et, vitae fabulas consulatu eum an, vis te justo noluisse.

Mehr zum Element Design

Primary Design

Lorem ipsum dolor sit amet, mollis vocibus at cum. Eos te iriure epicurei, in pri iisque eligendi. Et has recusabo sapientem, usu delectus recteque accusamus an. In doming luptatum vis, voluptua democritum mel at. Mei aeque vidisse intellegat et, vitae fabulas consulatu eum an, vis te justo noluisse.

Mehr zum Element Design

Secondary Design

Lorem ipsum dolor sit amet, mollis vocibus at cum. Eos te iriure epicurei, in pri iisque eligendi. Et has recusabo sapientem, usu delectus recteque accusamus an. In doming luptatum vis, voluptua democritum mel at. Mei aeque vidisse intellegat et, vitae fabulas consulatu eum an, vis te justo noluisse.

Mehr zum Element Design

Inverted Design

Lorem ipsum dolor sit amet, mollis vocibus at cum. Eos te iriure epicurei, in pri iisque eligendi. Et has recusabo sapientem, usu delectus recteque accusamus an. In doming luptatum vis, voluptua democritum mel at. Mei aeque vidisse intellegat et, vitae fabulas consulatu eum an, vis te justo noluisse.

Mehr zum Element Design


Anleitung

Teaser Slider erstellen

  • Klicken Sie auf den Button + Inhaltum ein Teaser-Element zu erstellen.
  • Im Reiter Teaser Elements wählen Sie Image-Teaser Slider, left.

Slides anlegen

  • Im Feld Überschrift tragen Sie bei Bedarf eine Überschrift ein, die als H3 ausgegeben wird.
  • Klicken Sie im Bereich Teaser auf den Button Neu anlegen um mehrere Teaser anzulegen.
  • Unter Slider Einstellungen aktivieren Sie die Beibehaltung des Seitenverhältnis der Medienelemente mit Klick auf die Checkbox. Beachten Sie hierzu den Hinweis.
  • Unter Farbe definieren Sie die Darstellungsfarbe der Pfeile und der Progress Bar Bullets. Es stehen die Element Design Farben zur Verfügung.

Slide-Titel und Text einfügen

  • Geben Sie Ihre Texte in das Textfeld Beschreibungstext ein. Sollten Sie Texte aus einer anderen Datei kopieren, achten Sie auf eventuell mitkopierte Formatierungen. Der Text kann direkt im Textfeld, mit dem Menü über dem Textfeld, formatiert werden. 
  • Im Feld Titel definieren Sie den Titel der einzelnen Slide.  

Bilder einfügen

  • Klicken Sie auf den Button Bild hinzufügen (im Schritt zuvor).
  • Wählen Sie eine Datei aus Ihrer Fileliste aus oder laden Sie eine Datei in den entsprechenden Ordner hoch.
  • Im Bildeditor stellen Sie den Bildbeschnitt ein.

Automatische Wiedergabe von Medien

Wenn Sie mehr als ein Medium innerhalb desselben Elements einsetzen, haben Sie die Möglichkeit, die Wiedergabe zu automatisieren. Um ein einheitliches Bild zu gewährleisten, werden alle eingesetzten Medien auf dasselbe Format (16:9) zugeschnitten.

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).

Element Design für mehr Individualität

In diesem Element können Sie zudem das Erscheinungsbild ganz leicht mit dem Element Design mit einem Klick ändern. Mit der Auswahl von Standard Design, Primary Design, Secondary Design oder Umgekehrtes Design wechseln Sie Hintergrundfarbe des Elements und ggfs. die Hintergrundfarbe der Headline oder Pfeile bzw. des Textbereichs entsprechend der in den Theme-Settings definierten Farbe.

  

  • Mit Klick auf das Element Design im Reiter Allgemein / General erhalten Sie im Dropdown-Menü die Wahl für eine individuelle Designfarbe.
  • Wählen Sie aus den Optionen Standard, Primary, Secondary sowie Umgekehrt die gewünschte Option aus.
  • Speichern Sie die Änderungen im Element, damit sie sichtbar werden.

Verhalten

Der Image-Teaser Slider, left bietet Ihnen die Möglichkeit, mehrere Teaser in Form einer »Schleife« darzustellen. Jeder Teaser wird individuell angelegt und lässt sich mittels Element Design in verschiedenen Farben darstellen.

In den Slider-Einstellungen Farbe (unter dem Reiter Allgemein) können Sie auch die Slides-Pfeile und Progress Bar Bullets mit dem Element Design variieren. Die Bullets (Sliderbuttons) befinden sich am unteren Abschluss des Elements und zeigen zugleich die Anzahl der Slides an.

Responsive: Ist nicht ausreichend Platz zur Darstellung nebeneinander vorhanden, zeigen alle Teaser das zuvor nebenstehende Bild über dem Text an. Der Slider, in dem sich die Teaser befinden, wird bei jeder verfügbaren Bildschirmgröße in einem festen Verhältnis vollständig angezeigt.


Verknüpfte Themen

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

Textbearbeitung  Bildbearbeitung  Dateiliste