Alle Seiten
Bereitgestellt von GitBook
1 von 1

Loading...

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.

ThemeWare® "Runder Teaser"

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


Element konfigurieren

Den ThemeWare® Teaser "Runder 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 "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.


Die Konfiguration vom "Runden Teaser" ist recht selbsterklärend. Die Beschriftung und das Bild sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.

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.

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 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-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.


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.


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


Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

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.

ThemeWare® "Runder Teaser" konfigurieren
Elemente vom "Runder Teaser"

Konfiguration

Hinweis: Nutze für den "Runden Teaser" quadratische Bilder.

Allgemein

Layout

SEO & Pagespeed

Erweitert

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

Maximale Breite

Datenzuordnung (folgt)

Demo

Runder TeaserDemostore
ThemeWare® Demoshop => Runder Teaser
Logo