Lanxess Simple Teaser

Den Simple Teaser gibt es in 4 Varianten:

  1. Default (Standard: Bild, Headline, Text, Teaser Link zu internen/externen Seite)

  2. Photo (gepflegtes Bild automatisch mit Zoom (über Lupenicon öffnet sich die „Lightbox“), Headline, Text; das Bild kann optional zum Download angeboten werden über Component Properties > Styling > Simple Teaser > Checkbox „Show Download“.

  3. Download (Bild, Headline, Text, Teaserlink auf Datei in Media Library)

  4. Video (Bild, Headline, Text, externer Videolink wie YouTube); öffnet Video automatisch als Lightbox; Wichtig: Hier muss eine Link description gepflegt werden, damit das Video abspielt!

Je nach Variante ändert sich automatisch auch das Link-Icon:

Möchten Sie einen oder mehrere Teaser nebeneinander einfügen, gehen Sie unterschiedlich vor (s. unten).

  • Egal welche Option Sie hier wählen, speichern Sie, nachdem Sie die Teaser Komponente bzw. Snippet eingefügt haben.

  • Danach wählen Sie über den Farbeimer bzw. Dropdown in den Properties einer der 4 Varianten aus:

  • Speichern Sie danach am besten noch einmal. Nun können Sie Ihre(n) Teaser entsprechend befüllen: Setzen Sie ein Bild ein (achten Sie auf das gleiche Format; s. Hinweis weiter unten) und tauschen die Platzhaltertexte für Headline und Teaser aus.

  • Je nach ausgewählter Variante pflegen Sie nun den entsprechenden Linktyp per Klick auf eines der beiden Teaser Link Felder:

  • Im Pop-Up Fenster wählen Sie nun den Linktyp aus und setzen die entsprechende Verlinkung:

Einzelne Teaser:

  1. Fügen Sie einen Teaser Container in den bereits vorhandenen seitenbreiten

    Container-6 ein.

  2. In den Teaser Container fügen Sie nun Ihren einzelnen Simple Teaser:

Der einzelne Teaser hat nun eine maximale Breite (entspricht der Breite eines 50-50 Teaser). Lassen Sie sich von der Ansicht im Experience Editor nicht beirren. Speichern Sie und schauen Sie sich den einzelnen Teaser in der Preview an, dort ist die Teaserbreite korrekt.

Mehrere Teaser nebeneinander:

Möchten Sie mehrere Simple Teaser nebeneinander platzieren (bspw. 25-25-25-25 Teaser im Screenshot), so fügen Sie die Snippet Komponente ein und wählen danach im Pop-Up Fenster die entsprechende Anzahl an Teasern aus:

Neu hinzugekommen ist eine Headline für die Simple Teaser Snippets. Diese ist vorausgefüllt mit einer Dummy Headline (in Rich Text Komponente), die vom Editor selbst angepasst werden kann. Wird die Headline nicht benötigt, entfernt man das Rendering über das rote X aus dem Seitenlayout.

Hinweis zu Bildern: Achten Sie darauf, dass Ihre Bilder alle das gleiche Format haben (in der Regel 3:2). Ansonsten sind die Teaser unterschiedlich hoch. Hat ein Bild also ein anderes Format und ist groß genug, können Sie es über das Cropping Tool in das entsprechende Format schneiden.

Auch andere Formate sind möglich, bspw. 3:1 und 1:1. Die Darstellung hängt also immer vom Format des Bildes ab: