Runder Teaser
Der Teaser ThemeWare® "Runder 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.
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Element konfigurieren
Den ThemeWare® Teaser "Runder 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 "Runden Teaser" ist recht selbsterklärend. Die Beschriftung und das Bild sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.
Hinweis: Nutze für den "Runden Teaser" quadratische Bilder.
Allgemein
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
Content (Inhalt)
Im Abschnitt "Content" kannst du die Beschriftung (2) für den Teaser eingeben. Dies ist ein Pflichtfeld.
Bild
Im Abschnitt "Bild" definierst du das Hintergrundbild (1) des Teasers. Dies ist ein Pflichtfeld. Hinweis: Nutze für den "Runden Teaser" quadratische Bilder.
Link
Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.
Layout
Im Tab "Layout" kannst du die Beschriftung (2) konfigurieren.
Allgemein
Im Abschnitt "Layout" kannst du das Padding (den Innenabstand), die maximale Breite und die allgemeine Hintergrundfarbe (1) konfigurieren.
Content (Inhalt)
Im Abschnitt "Content" kann die Text-Ausrichtung vom Titel (2) konfiguriert werden.
Titel
Im Abschnitt "Titel" kann die Schriftart, Textfarbe, Strichstärke, Textformatierung und Hintergrundfarbe vom Titel (2) konfiguriert werden.
Content-Overlay
Im Abschnitt "Content-Overlay" kannst du die vertikale Ausrichtung, die horizontale Ausrichtung und die maximale Breite (z.B. 90% oder 740px) des Inhaltes (=Titel) (2) konfigurieren.
Hover
Im Abschnitt "Hover" kannst du einen Hover-Effekt für den Inhalt (=Titel) auswählen.
Farb-Overlay
Im Abschnitt "Farb-Overlay" kann ein Farb-Overlay aktiviert und konfiguriert werden.
SEO & Pagespeed
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für den Titel 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.
Experten-Einstellungen
Im Abschnitt "Experten-Einstellungen" können eine oder mehrere, mit Leerzeichen getrennte, CSS-Klassen eingetragen werden. Diese Klassen werden Spalten in bestimmten CMS-Blöcken hinzugefügt.
Hinweis: Die "Experten-Einstellungen" in CMS-Elementen richten sich an Experten die sich mit CMS-Blöcken, CMS-Elementen und dem Bootstrap Grid-System sehr gut auskennen!
Layout-Tipps
Der Teaser "Runder Teaser" rundet die Ecken von Bildern ab. Du musst die entsprechenden Motive also nicht selber in einem Bildbearbeitungsprogramm abrunden. Damit der Look kreisrund wird, nutze quadratische Bilder.
Abhängig von der Breite des Blocks (dies gilt besonders bei einspaltigen Blöcken), kann der Teaser sehr groß werden. Wir empfehlen den Teaser daher in mehrspaltigen Blöcken zu nutzen oder die maximale Breite des Teasers zu konfigurieren.
Maximale Breite
In einspaltigen Blöcken empfiehlt sich die Konfiguration "Maximale Breite" zu nutzen. Hiermit kannst du die Breite des Teasers begrenzen. Zusätzlich kannst du den Teaser mit im Tab "Allgemein" horizontal und vertikal ausrichten.
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
Demo
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Zuletzt aktualisiert
War das hilfreich?