Navigation

ThemeWare® Handbuch

Image-Teaser

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

ThemeWare® "Image-Teaser"

ThemeWare® "Image-Teaser"

Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.


Element konfigurieren

Den ThemeWare® "Image-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 Image-Teaser, Abbildung 11 "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® "Image-Teaser" konfigurieren

ThemeWare® "Image-Teaser" konfigurieren


Konfiguration

Die Konfiguration vom "Image-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.

Bild

Im Abschnitt "Bild" definierst du das Hintergrundbild des Teasers. Dies ist ein Pflichtfeld.

Link

Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.

Layout

Im Tab "Layout" kannst du das Bild und ein Farb-Overlay konfigurieren.

Allgemein

Im Abschnitt "Allgemein" kannst du die allgemeine Hintergrundfarbe konfigurieren.

Bild

Im Abschnitt "Bild" kann ein Bild-Effekt (siehe Image-Teaser) ausgewählt und festgelegt werden, wann der Bild-Effekt (sofern der Teaser verlinkt wurde) angewendet werden soll.

Du kannst außerdem die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.

Farb-Overlay

Im Abschnitt "Farb-Overlay" kann ein Farb-Overlay aktiviert und konfiguriert werden.

SEO & Pagespeed

Im Tab "SEO & Pagespeed" kannst du 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.


Bild-Effekte

Derzeit stehen dir 7 verschiedene Bild-Effekte (siehe Screenshots unten) zur Verfügung:

  • Weichzeichnen
  • Helligkeit
  • Kontrast
  • Graustufen
  • Deckkraft
  • Sättigung
  • Skalierung

Screenshots

Weichzeichnen

Weichzeichnen

Helligkeit

Helligkeit

Kontrast

Kontrast

Graustufen

Graustufen

Deckkraft

Deckkraft

Sättigung

Sättigung

Skalierung

Skalierung


Datenzuordnung (folgt)

Auf Kategorie- und Produktseiten kann folgendes Feld per Datenzuordnung dynamisch aus der aktuellen Kategorie bzw. dem aktuellen Produkt übernommen werden:

  • Bild - z.B. Kategoriebild oder Produktbild

Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

https://demo.themeware.design/modern/Features/ThemeWare-CMS-Elemente/Image-Teaser/

ThemeWare® Demoshop => Image-Teaser

Zuletzt aktualisiert am

Diese Seite im Netz: https://doku.themeware.design/zusatzfunktionen/cms-erweiterungen/cms-elemente/teaser/image-teaser · ThemeWare® Service Portal, service.themeware.design