Runder Teaser
Last updated
Last updated
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.
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
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 "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.
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.
BildIm Abschnitt "Bild" definierst du das Hintergrundbild (1) des Teasers. Dies ist ein Pflichtfeld. Hinweis: Nutze für den "Runden Teaser" quadratische Bilder.
LinkIm Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.
Im Tab "Layout" kannst du die Beschriftung (2) konfigurieren.
AllgemeinIm 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.
TitelIm Abschnitt "Titel" kann die Schriftart, Textfarbe, Strichstärke, Textformatierung und Hintergrundfarbe vom Titel (2) konfiguriert werden.
Content-OverlayIm 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.
HoverIm Abschnitt "Hover" kannst du einen Hover-Effekt für den Inhalt (=Titel) auswählen.
Farb-OverlayIm Abschnitt "Farb-Overlay" kann ein Farb-Overlay aktiviert und konfiguriert werden.
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für den Titel sowie 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.
Experten-EinstellungenIm 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!
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.
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.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Klicke auf das "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren