Der ThemeWare® "Kategorie-Teaser (Advanced)" zeigt automatisch Kategoriedaten (Name und Bild) aus der Shopware Kategorieverwaltung an und verlinkt auf die jeweilige Kategorie. Er ist die erweiterte Variante mit Content-Overlay und mehr Gestaltungsmöglichkeiten. 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.
Beta: Diese Funktion befindet sich in der Beta-Phase und kann sich mit einem kommenden Release noch ändern. – Wir freuen uns über dein .
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Den ThemeWare® "Kategorie-Teaser (Advanced)" 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.
Die Konfiguration vom "Kategorie-Teaser (Advanced)" ist recht selbsterklärend. Die Kategorie ist ein Pflichtfeld. Die Kategoriedaten (Name und Bild) werden automatisch angezeigt. Optional kannst du den Titel und das Bild manuell überschreiben.
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
Kategorie
Im Abschnitt "Kategorie" wählst du die gewünschte Kategorie aus. Der Name (2) und das Bild (1) der Kategorie werden automatisch im Teaser angezeigt. Der Link zeigt automatisch auf die ausgewählte Kategorie.
Content (Inhalt)
Im Abschnitt "Content" kannst du den Titel (optional), die Zwischenüberschrift, den Badge-Text (3) und den CTA-Text eingeben. Wenn der Titel leer gelassen wird, wird automatisch der Name der ausgewählten Kategorie angezeigt.
Bild
Im Abschnitt "Bild" kannst du optional ein eigenes Bild festlegen, das anstelle des Kategoriebildes angezeigt wird. Außerdem konfigurierst du den Anzeigemodus
Im Tab "Layout" kannst du das Padding, die abgerundeten Ecken, die Hintergrundfarbe, das Badge, den Titel, die Zwischenüberschrift, den CTA, das Content-Overlay, Bild-Effekte, Hover-Effekte und ein Farb-Overlay konfigurieren.
Allgemein
Im Abschnitt "Allgemein" kannst du das Padding, die abgerundeten Ecken und die allgemeine Hintergrundfarbe konfigurieren.
Badge
Im Abschnitt "Badge" kannst du den Badge-Stil, die Badge-Farben und die Badge-Position konfigurieren.
Titel
Im Abschnitt "Titel" kannst du die Schriftart, die Strichstärke, die Textformatierung und die Textfarbe des Titels konfigurieren.
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag und die HTML-Tag-Klasse konfigurieren.
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.
Es stehen Felder für CSS-Klassen vom Element, dem Titel, der Zwischenüberschrift, dem Badge und dem CTA zur Verfügung.
340pxLink
Im Abschnitt "Link" wird der Link automatisch aus der ausgewählten Kategorie gesetzt. Du kannst konfigurieren, ob der Link in einem neuen Tab geöffnet werden soll und ob der gesamte Teaser verlinkt werden soll.
Im Abschnitt "Zwischenüberschrift" kannst du die Schriftart und die Textfarbe der Zwischenüberschrift konfigurieren.
CTA
Im Abschnitt "CTA" kannst du den Hintergrund (Toggle zum Aktivieren), die Hintergrundfarbe, den Schlagschatten und die Textfarbe des CTA konfigurieren.
CTA-Hover-Effekte
Im Abschnitt "CTA-Hover-Effekte" kannst du einen CTA-Hover-Effekt auswählen: Kein Effekt, Arrow-Slide-in, CTA-Slide-in-up, Arrow-und-CTA-Fade-in.
Content-Overlay
Im Abschnitt "Content-Overlay" kannst du die Hintergrundfarbe, den Hintergrund-Effekt (Backdrop-Effekt), die vertikale Ausrichtung, die horizontale Ausrichtung und die volle Breite (Toggle) des Content-Overlays konfigurieren.
Bild-Effekte
Im Abschnitt "Bild-Effekte" kannst du verschiedene Bildeffekte konfigurieren: Weichzeichnen, Helligkeit, Kontrast, Graustufen, Deckkraft, Sättigung und Skalierung.
Hover-Effekte
Im Abschnitt "Hover-Effekte" kannst du einen Hover-Effekt auswählen (Grow, Slide-in-down, Slide-in-up, Hover-reveal) und festlegen, ob der CTA nur beim Hover angezeigt werden soll.
Farb-Overlay
Im Abschnitt "Farb-Overlay" kann ein Farb-Overlay aktiviert und konfiguriert werden. Du kannst eine Farbe, einen Farbverlauf, den Winkel und einen Hover-Effekt für das Farb-Overlay konfigurieren.
Der ThemeWare® "Kategorie-Teaser" zeigt automatisch Kategoriedaten (Name und Bild) aus der Shopware Kategorieverwaltung an und verlinkt auf die jeweilige Kategorie. 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.
Der Kategorie-Teaser verwendet den Caption-Bar-Stil (wie der reguläre Teaser).
Beta: Diese Funktion befindet sich in der Beta-Phase und kann sich mit einem kommenden Release noch ändern. – Wir freuen uns über dein .
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Den ThemeWare® "Kategorie-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.
Die Konfiguration vom "Kategorie-Teaser" ist recht selbsterklärend. Die Kategorie ist ein Pflichtfeld. Die Kategoriedaten (Name und Bild) werden automatisch angezeigt. Optional kannst du den Titel und das Bild manuell überschreiben.
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
Kategorie
Im Abschnitt "Kategorie" wählst du die gewünschte Kategorie aus. Der Name (2) und das Bild (1) der Kategorie werden automatisch im Teaser angezeigt. Der Link zeigt automatisch auf die ausgewählte Kategorie.
Content (Inhalt)
Im Abschnitt "Content" kannst du den Titel (optional), den Badge-Text (3) und den CTA-Text (optional) eingeben. Wenn der Titel leer gelassen wird, wird automatisch der Name der ausgewählten Kategorie angezeigt. Der CTA-Text verwendet standardmäßig einen Snippet, wenn kein Text eingegeben wird.
Bild
Im Abschnitt "Bild" kannst du optional ein eigenes Bild festlegen, das anstelle des Kategoriebildes angezeigt wird. Außerdem konfigurierst du den Anzeigemodus
Im Tab "Layout" kannst du das Padding, die abgerundeten Ecken, die Hintergrundfarbe, die Textausrichtung, das Icon, das Badge, den Titel, den CTA, die Caption-Bar, Bild-Effekte, Hover-Effekte und ein Farb-Overlay konfigurieren.
Allgemein
Im Abschnitt "Allgemein" kannst du das Padding, die abgerundeten Ecken und die allgemeine Hintergrundfarbe konfigurieren.
Textausrichtung
Im Abschnitt "Textausrichtung" kannst du die gewünschte Textausrichtung auswählen.
Icon
Im Abschnitt "Icon" kannst du das Pfeil-Icon in der Caption-Bar konfigurieren.
Badge
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag, die HTML-Tag-Klasse, die Fetch-Priorität und das Lazy Loading vom Bild konfigurieren.
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.
Es stehen Felder für CSS-Klassen vom Element, dem Badge und der Caption zur Verfügung. Zusätzlich kann eine Element-ID vergeben werden.
340pxLink
Im Abschnitt "Link" wird der Link automatisch aus der ausgewählten Kategorie gesetzt. Du kannst konfigurieren, ob der Link in einem neuen Tab geöffnet werden soll und ob der gesamte Teaser verlinkt werden soll.
Titel
Im Abschnitt "Titel" kannst du die Schriftart, die Strichstärke, die Textformatierung und die Textfarbe des Titels konfigurieren.
CTA
Im Abschnitt "CTA" kannst du die Textfarbe des CTA konfigurieren.
Caption-Bar
Im Abschnitt "Caption-Bar" kannst du die Hintergrundfarbe und den Hintergrund-Effekt (Backdrop-Effekt) der Caption-Bar konfigurieren.
Bild-Effekte
Im Abschnitt "Bild-Effekte" kannst du verschiedene Bildeffekte konfigurieren: Weichzeichnen, Helligkeit, Kontrast, Graustufen, Deckkraft, Sättigung und Skalierung.
Hover-Effekte
Im Abschnitt "Hover-Effekte" kannst du einen Hover-Effekt auswählen (Grow, Slide-in-down, Slide-in-up, Hover-reveal) und festlegen, ob der CTA nur beim Hover angezeigt werden soll.
Farb-Overlay
Im Abschnitt "Farb-Overlay" kann ein Farb-Overlay aktiviert und konfiguriert werden. Du kannst eine Farbe, einen Farbverlauf und den Winkel konfigurieren.
Der ThemeWare® "Kategorie-Teaser (Modern)" zeigt automatisch Kategoriedaten (Name und Bild) aus der Shopware Kategorieverwaltung an und verlinkt auf die jeweilige Kategorie. Er ist die vereinfachte moderne Variante basierend auf dem Modern-Teaser-Stil. 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.
Beta: Diese Funktion befindet sich in der Beta-Phase und kann sich mit einem kommenden Release noch ändern. – Wir freuen uns über dein .
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Den ThemeWare® "Kategorie-Teaser (Modern)" 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.
Die Konfiguration vom "Kategorie-Teaser (Modern)" ist recht selbsterklärend. Die Kategorie ist ein Pflichtfeld. Die Kategoriedaten (Name und Bild) werden automatisch angezeigt.
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
Kategorie
Im Abschnitt "Kategorie" wählst du die gewünschte Kategorie aus. Der Name (2) und das Bild (1) der Kategorie werden automatisch im Teaser angezeigt. Der Link zeigt automatisch auf die ausgewählte Kategorie.
Content (Inhalt)
Im Abschnitt "Content" kannst du den Badge-Text (3) eingeben.
Bild
Im Abschnitt "Bild" kannst du optional ein eigenes Bild festlegen, das anstelle des Kategoriebildes angezeigt wird. Außerdem konfigurierst du den Anzeigemodus (Cover/Contain/Stretch), die Minimale Höhe und die Barrierefreiheit (Alt-Text, dekoratives Bild).
Im Tab "Layout" kannst du das Padding, die abgerundeten Ecken, die Hintergrundfarbe, das Badge, die Beschriftung und die Inhaltsausrichtung konfigurieren.
Allgemein
Im Abschnitt "Allgemein" kannst du das Padding, die abgerundeten Ecken und die allgemeine Hintergrundfarbe konfigurieren.
Badge
Im Abschnitt "Badge" kannst du den Badge-Stil, die Badge-Farben und die Badge-Position konfigurieren.
Beschriftung
Im Abschnitt "Beschriftung" kannst du die Schriftart, die Strichstärke, die Textformatierung, die Textfarbe, die Hintergrundfarbe
Im Tab "SEO & Pagespeed" kannst du die Fetch-Priorität und das Lazy Loading vom Bild konfigurieren.
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.
Es stehen Felder für CSS-Klassen vom Element, der Beschriftung und dem Badge zur Verfügung.
Content (Inhalt)
Im Abschnitt "Content" kannst du die vertikale Ausrichtung und die horizontale Ausrichtung des Inhaltes konfigurieren.
Die ThemeWare® Kategorie-Teaser zeigen automatisch Kategoriedaten (Name und Bild) aus der Shopware Kategorieverwaltung an und verlinken auf die jeweilige Kategorie. Der Titel kann optional manuell überschrieben werden. Du kannst die Kategorie-Teaser auch in anderen CMS-Blöcken (z.B. den ThemeWare® Spalten-Blöcken) verwenden.
Wichtig: Diese Elemente sind nur in der ThemeWare® Pro Edition verfügbar.
Füge den CMS-Block des gewünschten Kategorie-Teaser-Elementes einfach per Drag’n’Drop deiner Erlebniswelt hinzu.
Mehr Informationen dazu findest du in der folgenden Anleitung:
Hinweis: Teaser-Blöcke findest du in der Rubrik "ThemeWare® Kategorie-Teaser" [Pro]
Tausche alternativ ein bestehendes CMS-Element in einem CMS-Block gegen das gewünschte Kategorie-Teaser-Element aus.
Mehr Informationen dazu findest du in der folgenden Anleitung: