Teaser
Der ThemeWare® "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 Teaser zeigt ein Bild mit einer Caption-Leiste am unteren Rand, die eine Überschrift, einen Untertitel und optional ein Pfeil-Icon enthält.
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Element konfigurieren
Den ThemeWare® "Teaser" kannst du wie folgt konfigurieren:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Fahre mit der Maus über das gewünschte CMS-Element
Klicke auf das
"Zahnrad"-Icon (2) um das CMS-Element zu konfigurierenEs öffnet sich das Pop-up "Element-Einstellungen"
Nehme die gewünschten Änderungen vor
Speichere deine Änderungen
Du hast das CMS-Element nun konfiguriert.
Konfiguration
Die Konfiguration vom "Teaser" ist recht selbsterklärend. Die Überschrift und das Bild sind Pflichtfelder. 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 und den Untertitel für den Teaser eingeben. Die Überschrift ist ein Pflichtfeld.
Bild
Im Abschnitt "Bild" definierst du das Hintergrundbild (1) des Teasers. Das Bild ist ein Pflichtfeld. Du kannst den Anzeigemodus (Cover/Contain/Stretch), die Minimale Höhe (Standard:
340px) 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").
Layout
Im Tab "Layout" kannst du die Caption-Leiste (2), die Überschrift, den Untertitel, das Bild, Hover-Effekte und ein Farb-Overlay konfigurieren.
Allgemein
Im Abschnitt "Allgemein" kannst du das Padding, den Border-Radius und die Hintergrundfarbe konfigurieren.
Hinweis: Beim Hover-Effekt "Grow" wird das Padding durch den Effekt gesteuert.
Überschrift
Im Abschnitt "Überschrift" kannst du die Schriftart, die Strichstärke, die Textformatierung und die Textfarbe für die Überschrift konfigurieren.
Untertitel
Im Abschnitt "Untertitel" kannst du die Schriftart und die Textfarbe für den Untertitel konfigurieren.
Caption-Leiste
Im Abschnitt "Caption-Leiste" kannst du die Hintergrundfarbe und den Hintergrund-Effekt (Backdrop) der Caption-Leiste konfigurieren.
Icon
Im Abschnitt "Icon" kannst du ein Pfeil-Icon auswählen, das auf der rechten Seite der Caption-Leiste angezeigt wird.
Bild
Im Abschnitt "Bild" kannst du die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.
Hover-Effekte
Im Abschnitt "Hover-Effekte" kannst du einen Hover-Effekt auswählen und festlegen, ob der CTA bei Hover angezeigt werden soll. Folgende Hover-Effekte stehen zur Verfügung:
Grow - Das Padding der Caption-Leiste vergrößert sich beim Hover
Fade in - Die Caption-Leiste blendet ein
Fade out - Die Caption-Leiste blendet aus
Slide in up - Die Caption-Leiste gleitet von unten herein
Slide in down - Die Caption-Leiste gleitet von oben herein
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 den HTML-Tag für die Überschrift, eine HTML-Tag-Klasse, 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 und die Caption-Leiste zur Verfügung. Zudem wird die Element-ID angezeigt.
Datenzuordnung (folgt)
Auf Kategorie- und Produktseiten können folgende Felder per Datenzuordnung dynamisch aus der aktuellen Kategorie bzw. dem aktuellen Produkt übernommen werden:
Bild - z.B. Kategoriebild oder Produktbild
Titel - z.B. Kategoriename oder Produktname
Zuletzt aktualisiert
War das hilfreich?