Hover-Teaser

Der ThemeWare® "Hover-Teaser" ist unabhängig von seinem CMS-Block. Du kannst ihn auch in anderen CMS-Blöcken verwenden. Teste einfach unterschiedliche Blöcke (beispielsweise mit einer unterschiedlichen Spaltenanzahl) aus um deine Erlebniswelt individueller zu gestalten.

Der Hover-Teaser ist ein Teaser mit 11 einzigartigen Hover-Effekten. Jeder Effekt bietet eine individuelle visuelle Behandlung mit unterschiedlichen Animationen für Überschrift, Untertitel und dekorative Elemente.

ThemeWare® "Hover-Teaser"
circle-exclamation

Element konfigurieren

Den ThemeWare® "Hover-Teaser" kannst du wie folgt konfigurieren:

  1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren

  2. Fahre mit der Maus über das gewünschte CMS-Element

  3. Klicke auf das "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren

  4. Es öffnet sich das Pop-up "Element-Einstellungen"

  5. Nehme die gewünschten Änderungen vor

  6. Speichere deine Änderungen

Du hast das CMS-Element nun konfiguriert.

ThemeWare® "Hover-Teaser" konfigurieren

Konfiguration

Die Konfiguration vom "Hover-Teaser" ist recht selbsterklärend. Das Bild ist ein Pflichtfeld. Mehr brauchst du genau genommen nicht konfigurieren.

Allgemein

Im Tab "Allgemein" konfigurierst du den Content des Elementes.

Content (Inhalt)

Im Abschnitt "Content" kannst du die Überschrift (2) und den Titel (Suffix) eingeben. Der Suffix wird in Fettschrift an die Überschrift angehängt. Mit der Option Leerzeichen kannst du ein Leerzeichen zwischen Überschrift und Suffix einfügen.

Untertitel

Im Abschnitt "Untertitel" kannst du den Untertitel (3) für den Teaser eingeben.

Bild

Im Abschnitt "Bild" definierst du das Hintergrundbild (1) des Teasers. Das Bild ist ein Pflichtfeld. Du kannst den Anzeigemodus, die Minimale Höhe und die Ausrichtung konfigurieren.

Barrierefreiheit

Im Abschnitt "Barrierefreiheit" kannst du einen Alt-Text für das Bild eingeben und festlegen, ob das Bild als dekoratives Bild behandelt werden soll.

Link

Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird. Du kannst festlegen, ob der Link in einem neuen Tab geöffnet werden soll und ob der gesamte Teaser als Link fungiert ("Voller Link").

Elemente vom "Hover-Teaser"
circle-info

Hinweis: Die Teaser sollten stets eine Höhe von mindestens 200 px haben, damit sich die Hover-Effekte optimal entfalten können.

Layout

Im Tab "Layout" kannst du den Hover-Effekt, die Überschrift, den Untertitel, die Akzentfarbe, das Bild, Hover-Verhalten und ein Farb-Overlay konfigurieren.

Allgemein

Im Abschnitt "Allgemein" kannst du den Hover-Effekt, die Hintergrundfarbe und die maximale Breite konfigurieren.

Überschrift

Im Abschnitt "Überschrift" kannst du die Schriftart, die Strichstärke, die Textformatierung, die Textfarbe und den Textschatten (Klein/Normal/Groß) für die Überschrift konfigurieren.

Untertitel

Im Abschnitt "Untertitel" kannst du die Schriftart und die Textfarbe für den Untertitel konfigurieren.

Akzentfarbe

Im Abschnitt "Akzentfarbe" kannst du die Farbe für die Akzentelemente (Linien, Ränder) der Hover-Effekte konfigurieren.

Bild

Im Abschnitt "Bild" kannst du die gewünschte horizontale Positionierung des Bildes, die Hintergrundfarbe und Bildeffekte konfigurieren. Folgende Bildeffekte stehen zur Verfügung: Blur, Helligkeit, Kontrast, Graustufen, Deckkraft, Sättigung und Skalierung.

Hover

Im Abschnitt "Hover" kannst du die Übergangsdauer (Schnell 0,2s / Normal 0,35s / Langsam 0,5s), den Bild-Hover-Effekt und den Farb-Overlay-Hover-Effekt konfigurieren.

Farb-Overlay

Im Abschnitt "Farb-Overlay" kann ein Farb-Overlay aktiviert und konfiguriert werden. Du kannst eine Farbe, einen Farbverlauf und den Farbverlaufswinkel festlegen.

SEO & Pagespeed

Im Tab "SEO & Pagespeed" kannst du die HTML-Tags für die Überschrift und den Untertitel, die Fetch-Priorität sowie das Lazy Loading vom Bild konfigurieren.

Erweitert

Du kannst zwar jedes HTML-Element unserer Teaser über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.

Im Tab "Erweitert" stehen dir CSS-Klassen für das Element, die Überschrift und den Untertitel zur Verfügung. Zudem wird die Element-ID angezeigt.


Hover-Effekte

Folgende Hover-Effekte stehen für den "Hover-Teaser" zur Verfügung:

  • Chloe

  • Eve

  • Holly (ohne Untertitel)

  • Luna

  • Mia

  • Mila

  • Olivia

  • Ruby

  • Sophie

  • Stella

Zuletzt aktualisiert

War das hilfreich?