Advanced-Teaser

Hinweis: Dieser Artikel ist in Arbeit.

Die ThemeWare® "Advanced-Teaser" ist unabhängig von ihrem CMS-Block. Du kannst sie 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: Bitte beachte, dass sich dieses Element in einer Testphase befindet, probiere es gerne einmal aus.

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


Element konfigurieren

Den ThemeWare® "Advanced-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 entsprechende CMS-Element

  3. Es öffnet sich das Pop-up "Element-Einstellungen"

  4. Nehme die gewünschten Änderungen vor

  5. Speichere deine Änderungen

Du hast das CMS-Element nun konfiguriert.


Konfiguration

Die Konfiguration vom "Advanced-Teaser" ist recht selbsterklärend. Das Bild und die "Minimale Höhe" sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.

Allgemein

Im Tab "Allgemein" konfigurierst du den Content des Elementes.

Content (Inhalt)

Im Abschnitt "Content" kannst du die Überschrift (3), die Zwischenüberschrift (4), den Text (5) und den Button-Text (6+7) für den Teaser eingeben.

Bild

Im Abschnitt "Bild" definierst du das Hintergrundbild des Teasers. Die "Minimale Höhe" ist ein Pflichtfeld (Standard: 340px).

Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.

Layout

Im Tab "Layout" kannst das Overlay (2), die Überschrift (3), die Zwischenüberschrift (4), die Text (5), die zwei Buttons (6+7), das Scrollverhalten vom Bild (1), einen Parallax-Effekt und ein Farb-Overlay (1) konfigurieren. Zudem stehen dir Konfigurationen für die Ausrichtung des Text-Inhaltes zur Verfügung.

Allgemein

Im Abschnitt "Allgemein" kannst du die allgemeine Hintergrundfarbe konfigurieren.

Content (Inhalt)

Im Abschnitt "Content" kannst du die gewünschte Textausrichtung auswählen.

Überschrift

Im Abschnitt "Überschrift" kannst du die Schriftart, die Strichstärke, die Textformatierung und die Textfarbe für die Überschrift (3) konfigurieren.

Zwischenüberschrift

Im Abschnitt "Zwischenüberschrift" kannst du die Schriftart und die Textfarbe für die Überschrift (4) konfigurieren.

Text

Im Abschnitt "Text" kannst du die Schriftart, die Textfarbe, Linkfarben für den Text (5) konfigurieren.

Button

Im Abschnitt "Button" kannst du den Button-Stil (die Farbe) konfigurieren und festlegen ob der Button (5) gefüllt oder als Outline-Button dargestellt werden soll.

Button 2

Im Abschnitt "Button 2" kannst du den Button-Stil (die Farbe) konfigurieren und festlegen ob der Button (6) gefüllt oder als Outline-Button dargestellt werden soll.

Bild

Im Abschnitt "Bild" kannst das Attachment vom Bild konfigurieren und festlegen ob ein JavaScript-gesteuerter Parallax-Effekt angewendet werden soll.

Content-Overlay

Im Abschnitt "Content-Overlay" kannst du die horizontale Ausrichtung und die vertikale Ausrichtung sowie die Breite (z.B. auto oder 90%) und die maximale Breite (z.B. 90% oder 740px) vom "Content-Overlay" konfigurieren.

Mit der Konfiguration "Overlay-Styling anwenden" kannst du Konfigurationsfelder zum gestalten des Overlays aktivieren. Hier kannst du die Hintergrundfarbe festlegen, einen Hintergrund-Effekt, einen Schlagschatten und abgerundete Ecken auswählen.

Farb-Overlay

Im Abschnitt "Farb-Overlay" kann ein Farb-Overlay (1) aktiviert und konfiguriert werden.

SEO & Pagespeed

Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für die Überschrift und die Zwischenüberschrift 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.


Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

Demo folgt...

Last updated

Logo

© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH