Zum Hauptinhalt springen

Wie nutzt du die Teaser-Komponente?

Diese Woche aktualisiert

Multifuktionale und große Teaser

image

Mit Teasern kannst du kurze Informationen visuell und übersichtlich präsentieren.

Zum Beispiel:

  • Karriere-News

  • Veranstaltungen

  • Unternehmensinfos

  • Hinweise für Bewerber

Die Inhalte werden mit einem Bild und einem kurzen Text dargestellt.


Große und multifunktionale Teaser

Es gibt zwei Varianten:

  • Multifunktionale Teaser

  • Große Teaser

Beide funktionieren gleich und bieten die gleichen Einstellungsmöglichkeiten.
Du kannst sie flexibel an deine Inhalte anpassen.


Headline & Text gestalten

image

Text formatieren

Folgende Formatierungen stehen dir zur Verfügung:

  • Fett und kursiv

  • Aufzählungen oder nummerierte Listen

Hinweis: Wenn du eigene Schriften verwendest, müssen auch die Schriftschnitte fett und kursiv hochgeladen sein.


Textausrichtung

Du kannst den Text ausrichten:

  • linksbündig

  • zentriert (Standard)

  • rechtsbündig

Auf mobilen Geräten wird der Text aus Gründen der Lesbarkeit immer zentriert angezeigt.


Farben verwenden

Du kannst:

  • den gesamten Text

  • oder einzelne Wörter

farblich hervorheben.

Die Farben werden im Bereich „Design“ festgelegt.
Markiere zuerst den gewünschten Text und wähle anschließend die Farbe über das Kreissymbol aus.


Links einfügen

Im Text kannst du auch Links hinterlegen.

Diese können sich entweder im gleichen Fenster (Standard) oder in einem neuen Fenster öffnen.


Teaser hinzufügen

image

  • Du kannst beliebig viele Teaser hinzufügen.

  • Klicke dafür einfach auf das Plus-Symbol (+).


Hinweis für die mobile Darstellung

Wenn du mehr als sechs Teaser verwendest, empfiehlt es sich, im Tab „Layout“ die Option „Auf dem Handy die Einträge im Slider anzeigen“ zu aktivieren.

Die Teaser werden dann auf mobilen Geräten als Karussell (Slider) dargestellt statt untereinander. Dadurch bleibt die Anzeige übersichtlich und kompakt.


Teaser-Inhalte

image

Für jeden Teaser kannst du folgende Elemente hinzufügen:

  • Label „Neu“
    Zum Beispiel für aktuelle News oder neue Inhalte.

  • Tagline
    Eine kurze Kategorie oder Zusatzinfo.

  • Headline
    Die Hauptüberschrift des Teasers.

  • Text
    Eine kurze Beschreibung des Inhalts.


Teaser-Bild

image

Du kannst für jeden Teaser ein Bild hinzufügen.

Dafür kannst du:

  • ein eigenes Bild hochladen

  • oder eines der vordefinierten Bilder auswählen.


Teaser-Button

image

Du kannst festlegen, was passieren soll, wenn jemand auf den Button klickt.

Folgende Optionen stehen zur Verfügung:

  • Link
    Führt zu einer internen oder externen Seite.

  • E-Mail
    Öffnet eine E-Mail an eine hinterlegte Adresse.

  • Auto-Scroll zu den Stellenangeboten
    Springt direkt zur Jobliste.

  • Zur Komponente scrollen
    Scrollt zu einer bestimmten Komponente auf der Seite.

  • Sich auf eine Stelle bewerben
    Öffnet direkt eine aktive Stellenanzeige.​


Hintergrundfarbe

image

Hier kannst du festlegen, ob du eine Hintergrundfarbe oder ein Hintergrundbild verwenden möchtest. Standardgemäß wird eine Hintergrundfarbe genutzt.

Wir empfehlen eine Hintergrundfarbe, damit die Teaser-Bilder besser zur Geltung kommen.


Hintergrundbild

image

Wenn du ein Hintergrundbild verwenden möchtest, kannst du:

  • ein eigenes Bild hochladen

  • oder eines der vordefinierten Bilder auswählen

Verwende am besten ein ruhiges oder abstraktes Bild, damit es gut mit den Teaser-Bildern harmoniert und die Inhalte klar erkennbar bleiben.


Hintergrundbild: Bildeffekte

image

Wenn du ein Hintergrundbild verwendest, kannst du zusätzliche Bildeffekte aktivieren.


Farbverlauf

Der Farbverlauf legt einen diagonalen Farbverlauf über das Bild.

  • sorgt für mehr visuelle Wirkung

  • kann mit zwei Unternehmensfarben gestaltet werden

  • die Transparenz lässt sich über einen Schieberegler einstellen

So kannst du einen Farbverlauf erstellen, der zu deinem Corporate Design passt.


Dunkler Overlay

Ein dunkler Overlay dunkelt das Bild leicht ab. Dadurch bleiben Überschrift und Text besser lesbar.

Du kannst einstellen:

  • Farbtemperatur (kalt ↔ warm)

  • Transparenz des Overlays

Verwende weiße Schrift, damit Überschrift und Text gut lesbar bleiben.

Hat dies deine Frage beantwortet?