ThemeWare® CSS-Klassen für Erlebniswelten

In dieser Anleitung findest du, eine Übersicht über die ThemeWare® CSS-Klassen für Erlebniswelten.

Mit ThemeWare® stehen dir viele zusätzliche CSS-Klassen für Erlebniswelten zur Verfügung welche dir noch mehr Layout-Möglichkeiten bieten.

Diese CSS-Klassen können in den Erlebniswelten (Hauptnavigation "Inhalte" => "Erlebniswelten") über die Sektion- und Block-Einstellungen verwendet werden:

Der der Übersichtlichkeit halber gibt es zu einigen Themen separate Artikel. Die Links findest du im entsprechenden Absatz.

Zusätzlich findest du zu allen Themen Anwendungsbeispiele in unseren Demoshops.

Tipp: Es ist möglich verschiedene Effekte zu kombinieren indem mehrere Klassen in einen Block angewendet werden.

Hinweis: Fehlt dir eine CSS-Klasse aktualisiere ThemeWare® auf die neuste Version.


ThemeWare® CMS-Styling

ThemeWare® nutzt ein vordefiniertes Styling für CMS-Blöcke. Durch diese sogenannte "ThemeWare® CMS-Styling" erhalten alle CMS-Blöcke in Erlebniswelten mit dem Größenmodus "Zentrierter Inhalt" (= boxed) ein Rahmenfarbe, eine Hintergrundfarbe und einen Außenabstand nach unten.

Dieses Styling lässt sich zum einen konfigurieren (ab Version 0.3.1), zum anderen kannst du das "ThemeWare® CMS-Styling" für verschiedene Seitentypen in der Konfiguration aktivieren bzw. deaktivieren.

Doch damit noch nicht genug: Es ist zudem möglich über CSS-Klassen das "ThemeWare® CMS-Styling" für bestimmte Blöcke zu nutzen oder gezielt nicht zu benutzen. Dafür stehen dir die folgenden Klassen zur Verfügung:

Beispiel

Mehr Informationen dazu findest du in unserem Artikel:


Abstandsklassen

Neben den CSS-Abstandsklassen von Bootstrap stehen dir mit den ThemeWare® CSS-Abstandsklassen weitere (pixelbasierte) Abstandsklassen zur Verfügung um Abstände in Erlebniswelten zu definieren.

Die Abstandsklassen werden nach dem folgenden Muster benannt:

// Abstandsklassen:
twt-{Eigenschaft}{Seiten}-{Größe} // für xs

// Erweiterte Abstandsklassen:
twt-{Eigenschaft}{Seiten}-{Breakpoint}-{Größe} // für sm, md, lg und xl

Beispiel

Mehr Informationen dazu findest du in folgendem Artikel:


Full-width Sektionen - Sektionen über die volle Breite

Da die CSS-Klasse container nicht in jedem Szenario die perfekte Lösung ist, gibt es in ThemeWare® CSS-Klassen um CMS-Blöcke oder CMS-Sektionen in deinen Erlebniswelten "boxed" zu gestalten.

Beispiel

Mehr Informationen dazu findest du in unserem Artikel:


Dekorationsklassen für Bilder

ThemeWare® bietet dir diverse CSS-Dekorationsklassen für Bilder in CMS-Blöcken zur Verfügung. Mit diesen CSS-Klassen kannst du Bilder mit Rahmen oder Schatten dekorieren oder die Bilder abrunden.

Beispiel

Mehr Informationen dazu findest du in unserem Artikel:


Hover-Effekte für Bilder

Mit ThemeWare® erhältst du eine große Auswahl an CSS-Klassen, welche dir verschiedenste Hover-Effekte für Bilder in CMS-Blöcken ermöglichen.

Beispiel

Mehr Informationen dazu findest du in unserem Artikel:


CSS-Scroll-Animationen

ThemeWare® bietet dir eine umfangreiche Auswahl an CSS-Animationen für deine Erlebniswelten. Nutze dafür die entsprechende CSS-Klasse an CMS-Blöcken oder gewünschten HTML-Elementen.

CSS-Klassen

Beispiel

Mehr Informationen dazu findest du in unserem Artikel:

Animationen (für erfahrende Anwender)

Ergänzend liefert dir ThemeWare® eine Sammlung an CSS-Klassen für Animationen für erfahrende Anwender.

Mehr Informationen dazu findest du in folgendem Artikel:


Spaltenabstände in CMS-Blöcken

ThemeWare® stellt dir eine umfangreiche Auswahl an CSS-Klassen zu Verfügung mit welchen du die Spaltenabstände in CMS-Blöcken modifizieren kannst.

Beispiel

Mehr Informationen dazu findest du in unserem Artikel:


Überschriften in CMS-Blöcken

Mit ThemeWare® erhältst du individuelle CSS-Klassen um die aus unseren Shopware 5 Themes bekannten Überschriften auch in deinen Shopware 6 Erlebniswelten nutzen zu können.

Beispiel

Mehr Informationen dazu findest du in unserem Artikel:


Demoshops

Startseiten der Demoshops (Home)

Für die Erlebniswelten der Startseiten unserer Demoshops nutzen wir teils individuelle CSS-Klassen um bestimmte Layouts zu ermöglichen. In diesem Abschnitt stellen wir dir diese Klasse vor.

Hinweis: Eine "Schritt-für-Schritt PDF-Anleitung" für unsere Erlebniswelten erhältst du kostenfrei über die ThemeWare® Utilities.

CSS-Klassen

Overlay-Banner (Höhenluft)

Dieser Overlay-Banner ist mit den Standard CMS-Elementen von Shopware möglich und braucht kein spezielles CMS-Element.

Hinweis: Ein Beispiel findest du in der Kategorie "Höhenluft & Abenteuer" in unseren Demoshops: Höhenluft & Abenteuer

CSS-Klassen

Beispiel

Sonstige

In diesem Abschnitt findest du weitere Klassen die bei der Gestaltung deiner individuellen Erlebniswelten hilfreich sein können.

CSS-Klassen

Beispiele

Last updated

Logo

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