Zu Content springen
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

Modul: Teaser

Was ist ein Teaser? Welche Vorteile und Eigenschaften hat er und wie kann er selbst gebaut werden?

Ein Teaser-Modul eignet sich optimal dazu, Inhalte kurz und auf den Punkt genau darzustellen. Der Teaser zeigt dabei einen Textabschnitt, der bestenfalls dazu animieren soll, noch mehr von dem Thema erfahren zu wollen. Etwas anteasern bedeutet, etwas so ankündigen, dass Interesse geweckt wird.

Teaser gibt es in verschiedenen Arten, auf die gleich genauer eingegangen wird: 

  • Vertikale Ausrichtung mit Bild
  • Vertikale Ausrichtung ohne Bild
  • Horizontale Ausrichtung mit Bild
  • (Horizontale Ausrichtung ohne Bild ergibt wenig Sinn, hier kann einfach ein normaler Text genommen werden)

Vorteile:

  • Schafft eine übersichtliche Struktur für Informationen.
  • Hier können alle Arten von Informationen gegeben werden.
  •  Es ist möglich mehrere Teaser nebeneinander zu setzen.  
  • Das Modul kann jeweils mit einem Bild, aber auch ohne Bild verwendet werden.
  • Das Modul kann mit einem Button (Verlinkung auf eine andere Seite) oder ohne einen Button verwendet werden 

 

Wofür kann der Teaser genutzt werden?

  • Um Verlinkungen auf interne Seiten zu geben (z.B. Über Uns, Leistungen, …)
  • Um Verlinkungen zu externen Seiten zu geben (z.B. zu anderen Partnern)
  • Um reine Textinformationen zu geben (ohne Button) 
  • Um auf weitere Themen der Seite aufmerksam zu machen, in dem diese angeteasert werden

 

Vertikale Ausrichtung

Mit Bild:

 

Ohne Bild: 

So sieht es im Backend aus: 

  1. Bei Klick auf den Stift kann das Bild bearbeitet werden bezüglich Bildtitel, Bildbeschreibung, Alt-Texten, etc.
    Bei Klick auf das „X“ wird das Bild entfernt und ein neues Bild kann hinzugefügt werden (entweder auf der Mediathek oder als Datei-Upload)
  2. Hier kann der Titel hineingeschrieben werden. In diesem Fall "Teaser 1"
  3. Hier gibt es die Möglichkeit, eine Kurzbeschreibung zu geben, die das Thema des Teasers aufgreift und Lust auf mehr macht.
  4. Außerdem gibt es die Möglichkeit, einen Button hinzuzufügen, der auf eine weitere Seite leitet (diese kann eine interne, aber auch eine externe Verlinkung sein)

 

Horizontale Ausrichtung

Ein Teaser: 

 

Zwei Teaser nebeneinander: 

(sehr ähnlich zu Text-Media-Modul)

 

So sieht es im Backend aus: 

Die Ansicht ist die gleiche, wie auch bei den vertikalen Teasern. 

Der einzige Unterschied ist, dass der "Image Full Width" Button auf "nein" steht. 

 

Wie funktioniert das Bauen von Grund auf?

Wenn du nicht die bereits vorgefertigten Module und Patterns nehmen möchtest, kannst du den Teaser auch selbst bauen. Das geht so: 

  1. Klick auf das schwarze Plus um nach Container zu suchen
  2. Überlegen, wie viele Teaser in eine Reihe sollen.  In unserem Beispiel werden es 3 Stück. 
  3. Klick auf länglichen Kasten mit + um einen weiteren Block hinzuzufügen
  4. Suche nach "Columns Row" und klicke darauf. Nun gibt es eine neue "leere" Reihe.


  5. Hier ist nun die neue Reihe zu sehen. Klicke nun auf das neu entstandene schwarze Plus, um eine "Single Column" einzufügen

  6. Hier ist nun ein neuer schwarz umrandeter Kasten mit einem Plus in der Mitte entstanden. Diesen kannst du füllen mit beliebigen Inhalten, wie zum Beispiel einem Teaser. Klicke dazu auf den neuen Kasten und suche nach "Teaser".
  7. Wie weiter oben beschrieben, kannst du ihn mit deinen Daten füllen, wie zum Beispiel einem Bild, einer Überschrift, weiterem Content und einem Button. 

  8. Das Problem nun: Der Teaser ist sehr groß. Wir müssen deshalb noch einige Einstellungen treffen, sodass 3 Teaser nebeneinander passen und schauen, dass er auf jedem Endgerät gut aussieht. 
  9. Dazu wählen wir die Single Column aus, denn diese bestimmt die Größe des Teasers. Der Teaser passt sich quasi seinem Außengerüst an. Am rechten Seitenrand sind nun einige Einstellungen für die Single Column sichtbar, mit denen wir uns nun beschäftigen.
  10. Dies sind die Einstellungen, wie sie standardmäßig zu sehen sind. Um den Teaser gut aussehen zu lassen, müssen wir lediglich an 2 dieser Werte etwas ändern. 


  11. Die Gesamt-Weite der Spalte (Column Width) muss auf 12 stehen
    Die Weite der Desktop-Spalte (Column Desktop Width) steht in unserem Fall auf 4. Warum auf 4?
    Die Gesamtweite des Bildschirms ist 12. Da wir 3 Teaser unterbringen wollen, ergibt das folgende Rechnung: 12 / 3 = 4
  12. Der letzte Schritt ist die Erstellung der restlichen beiden Teasern, damit wir 3 in einer Reihe haben. Diese können, wie der erste auch, einzeln gebaut werden. Oder der bereits erstellte Teaser wird dupliziert - er enthält bereits die Einstellungen für die Größe, weswegen das eine gute Option ist. 
    Hierfür wählen wir wieder die Single Column aus, klicken auf die 3 Punkte und auf "duplizieren". Das wird noch einmal wiederholt, somit sind 3 Teaser in einer Reihe. 
  13. Diese 3 Teaser können jetzt beliebig mit Inhalten gefüllt werden.