Classic-Teaser
Der ThemeWare® "Classic-Teaser" ist ein Teaser mit Designs aus Shopware 5 bzw. unseren Themes für Shopware 5. Er ist unabhängig von seinem CMS-Block. Du kannst den Teaser auch in anderen CMS-Blöcken verwenden. Teste einfach unterschiedliche Blöcke (beispielsweise mit einer unterschiedlichen Spaltenanzahl) aus um deine Erlebniswelt individueller zu gestalten.
![](https://doku.themeware.design/~gitbook/image?url=https%3A%2F%2F2276716575-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHZ42X804kUeKKTtIEUr2%252Fuploads%252F8MFqMrS1kZCbLcUX5GFd%252Fcms-element--classic-teaser.png%3Falt%3Dmedia%26token%3Dd624dc7e-3724-4fc9-8c5c-dbd98213cf96&width=768&dpr=4&quality=100&sign=65879fc2&sv=1)
Hinweis: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Element konfigurieren
Den ThemeWare® "Classic-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 konfigurieren
Es öffnet sich das Pop-up "Element-Einstellungen"
Nehme die gewünschten Änderungen vor
Speichere deine Änderungen
Du hast das CMS-Element nun konfiguriert.
![](https://doku.themeware.design/~gitbook/image?url=https%3A%2F%2F2276716575-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHZ42X804kUeKKTtIEUr2%252Fuploads%252F8OPFSzOG2V4aM0kqRHNq%252Fimage.png%3Falt%3Dmedia%26token%3Df3ba4271-f08b-4767-8350-0c9f3714d9ab&width=768&dpr=4&quality=100&sign=cedbf0de&sv=1)
Konfiguration
Die Konfiguration vom "Classic-Teaser" ist recht selbsterklärend. Die Beschriftung und das Bild sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.
Allgemein
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
TextIm Abschnitt "Text" kannst du die Beschriftung (2) für den Teaser eingeben. Dies ist ein Pflichtfeld.
BildIm Abschnitt "Bild" definierst du das Hintergrundbild (1) des Teasers. Dies ist ein Pflichtfeld.
LinkIm Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.
Layout
Im Tab "Layout" kannst du die Beschriftung (2) konfigurieren.
AllgemeinIm Abschnitt "Allgemein" kannst du die allgemeine Hintergrundfarbe (1) konfigurieren.
LayoutIm Abschnitt "Layout" kannst du zwischen verschiedenen Darstellungsarten wählen (siehe Screenshots unten). Die verschiedenen Darstellungsarten haben, wie die ursprünglichen Teaser aus ThemeWare® für Shopware 5, eine vordefinierte Farbkonfiguration. Du kannst mit der Konfiguration "Benutzerdefiniertes Styling aktivieren" eine individuelle Konfiguration aktivieren.
BeschriftungIm Abschnitt "Beschriftung" kannst du die Schriftart der Beschriftung (2) konfigurieren.
Zudem hast du, je nach Darstellungsart, die Möglichkeit die Textfarbe, die Textausrichtung, die Rahmenfarbe, die Hintergrundfarbe und Hover-Farben (sofern der Teaser verlinkt wurde) zu konfigurieren.
![](https://doku.themeware.design/~gitbook/image?url=https%3A%2F%2F2276716575-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHZ42X804kUeKKTtIEUr2%252Fuploads%252FWnRwG2m1mlPtqFIwHbxv%252Fcms-element--classic-teaser-components.png%3Falt%3Dmedia%26token%3D728e510a-a189-44d5-b0bb-d6ce7ad5927f&width=768&dpr=4&quality=100&sign=678d39ca&sv=1)
Hinweis: Hover-Farben sind nur konfigurierbar, wenn das Element verlinkt ist.
Darstellungsarten
Derzeit stehen dir 7 verschiedene Darstellungsarten (siehe Screenshots unten) für den Counter zur Verfügung:
Standard
Effekt 1
Effekt 2
Effekt 3 (z.B. ThemeWare® Clean)
Effekt 4 (z.B. ThemeWare® Bike)
Effekt 5 (z.B. ThemeWare® Strong)
Effekt 6 (z.B. ThemeWare® Ladieswear)
Effekt 7 (z.B. ThemeWare® Global)
Screenshots
![](https://doku.themeware.design/~gitbook/image?url=https%3A%2F%2F2276716575-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHZ42X804kUeKKTtIEUr2%252Fuploads%252Fh55CEeXLE4SBj2X0skM4%252Fcms-element--classic-teaser-0.png%3Falt%3Dmedia%26token%3D300ed19d-e1cc-4596-b77d-461278b914a2&width=768&dpr=4&quality=100&sign=f4a0ef74&sv=1)
![](https://doku.themeware.design/~gitbook/image?url=https%3A%2F%2F2276716575-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHZ42X804kUeKKTtIEUr2%252Fuploads%252FpD4cQZglBtBEoLhYLmTH%252Fcms-element--classic-teaser-1.png%3Falt%3Dmedia%26token%3D98ad629f-b498-4c24-9602-9d6913a9a1d3&width=768&dpr=4&quality=100&sign=6d720374&sv=1)
![](https://doku.themeware.design/~gitbook/image?url=https%3A%2F%2F2276716575-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHZ42X804kUeKKTtIEUr2%252Fuploads%252FpJmtiAguQgJi42YgJ6G1%252Fcms-element--classic-teaser-2.png%3Falt%3Dmedia%26token%3D6851b039-f62f-4c9a-8239-81c2065a7dc6&width=768&dpr=4&quality=100&sign=d85e85b2&sv=1)
![](https://doku.themeware.design/~gitbook/image?url=https%3A%2F%2F2276716575-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHZ42X804kUeKKTtIEUr2%252Fuploads%252FLvb8KpCcxmLs2QNz2ozY%252Fcms-element--classic-teaser-3.png%3Falt%3Dmedia%26token%3Daaf7db62-92ed-4621-b7c5-ee7966d55c99&width=768&dpr=4&quality=100&sign=47395eb6&sv=1)
![](https://doku.themeware.design/~gitbook/image?url=https%3A%2F%2F2276716575-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHZ42X804kUeKKTtIEUr2%252Fuploads%252FSHmNvhSeUIGDeGGmvGpF%252Fcms-element--classic-teaser-4.png%3Falt%3Dmedia%26token%3D6403dc98-1c0d-480a-b0cf-7b8a836286c4&width=768&dpr=4&quality=100&sign=a79e1f78&sv=1)
![](https://doku.themeware.design/~gitbook/image?url=https%3A%2F%2F2276716575-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHZ42X804kUeKKTtIEUr2%252Fuploads%252FSnrlTBv6O7TVUBS943ul%252Fcms-element--classic-teaser-5.png%3Falt%3Dmedia%26token%3D6d535e39-0582-4382-bf04-551473a80fdf&width=768&dpr=4&quality=100&sign=d492acda&sv=1)
![](https://doku.themeware.design/~gitbook/image?url=https%3A%2F%2F2276716575-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHZ42X804kUeKKTtIEUr2%252Fuploads%252FCf7clVR9tu7HkaxX3JwD%252Fcms-element--classic-teaser-6.png%3Falt%3Dmedia%26token%3D7e4f1e79-47e2-4af4-af61-326e268a73a6&width=768&dpr=4&quality=100&sign=c8234e1a&sv=1)
![](https://doku.themeware.design/~gitbook/image?url=https%3A%2F%2F2276716575-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHZ42X804kUeKKTtIEUr2%252Fuploads%252FjWyrV78WQ6E1jztulj4D%252Fcms-element--classic-teaser-7.png%3Falt%3Dmedia%26token%3D6bcc4a64-e0d2-4b8c-9ac0-b6e69e584961&width=768&dpr=4&quality=100&sign=5cd8befc&sv=1)
Hinweis: Bitte beachte, dass die Theme-Variablen nicht in der Administration zur Verfügung stehen. Die blaue Farbe in der Vorschau (nur bei bestimmten Darstellungsarten) wird in der Storefront durch deine konfigurierte Primärfarbe ersetzt.
Demo
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Last updated