Designeinstellungen für Widgets
Visual CMS erlaubt es, responsive Webseiten zu erstellen. In den Designeinstellungen ist es möglich, die horizontale Position und die Breite der Widgets für die jeweiligen Gerätetypen gezielt zu bestimmen.
Gerätetyp-Umschalter
In der Toolbar des Editors befinden sich Schaltflächen zum Wechsel zwischen verschiedenen Gerätetypen:
Von links nach rechts stehen folgende Gerätetypen zur Verfügung:
Kleines Smartphone — kleine Mobilgeräte (< 576px)
Smartphone — Mobilgeräte (576px – 768px)
Tablet — Tablets im Hochformat (768px – 992px) — Standardansicht beim Öffnen des Editors
Kleiner Bildschirm — Laptops (992px – 1200px)
Großer Bildschirm — Desktop-Computer (1200px – 1399px)
Extra großer Bildschirm — sehr breite Bildschirme (> 1399px)
Der aktuell ausgewählte Gerätetyp wird farbig hervorgehoben. Klicken Sie auf einen Gerätetyp, um die Ansicht im Editor umzuschalten. Widget-Positionen und -Breiten können dann für diesen Gerätetyp individuell angepasst werden.
Hint
Der Editor öffnet standardmäßig in der Tablet-Ansicht. Sie können Ihre Design-Anpassungen jedoch bei jedem beliebigen Gerätetyp beginnen — es gibt keine erzwungene Reihenfolge. Werte, die für einen größeren Gerätetyp nicht explizit gesetzt sind, werden automatisch vom nächstkleineren Gerätetyp übernommen (Mobile-First-Kaskade).
Breite direkt im Editor ändern
Die Breite eines Widgets pro Gerätetyp können Sie auf zwei Arten festlegen. Der schnellere Weg führt direkt über die CMS-Seite: Fahren Sie mit der Maus über ein Inhalts-Widget und ziehen Sie dessen rechten Rand. Das Widget wird horizontal in Spalten-Schritten breiter oder schmaler — die Höhe ergibt sich automatisch aus dem Inhalt. Verändert wird dabei ausschließlich die Breite für den aktuell im Toolbar gewählten Gerätetyp; Werte für andere Gerätetypen bleiben unverändert. Wechseln Sie den Gerätetyp im Toolbar und ziehen Sie erneut, um die Breite für einen weiteren Gerätetyp festzulegen.
Der Resize-Handle am rechten Rand eines Inhalts-Widgets. Ziehen Sie ihn horizontal, um die Breite für den aktuell im Toolbar gewählten Gerätetyp anzupassen.
Row-Widgets selbst lassen sich auf der CMS-Seite nicht in der Breite verändern — sie nehmen immer die volle Gridbreite ein. Nur Inhalts-Widgets innerhalb einer Row tragen den Resize-Handle.
Responsive Einstellungen
Für die feinere Kontrolle — insbesondere für Versatz (Offset) und das gezielte Ausblenden pro Gerätetyp — öffnen Sie die Designeinstellungen eines Widgets:
Im ersten Feld ganz oben kann dem DIV-Container des Widgets eine eigene CSS-Klasse gegeben werden. Dadurch lässt sich der DIV-Container gezielt per CSS über die hinzugefügte CSS-Klasse anpassen.
Die horizontale Positionierung und Breite von Widgets werden über Spalten definiert. Visual CMS Seiten haben eine Gesamtbreite von 12 Spalten (änderbar in den Moduleinstellungen im OXID eShop Administrationsbereich unter ).
Für jeden der sechs Gerätetypen können folgende Einstellungen vorgenommen werden:
- Gerät
In dieser Spalte sind die sechs Gerätetypen (Kleines Smartphone, Smartphone, Tablet, Kleiner Bildschirm, Großer Bildschirm, Extra großer Bildschirm) abgebildet.
- Versatz (Offset)
Hier kann zusätzlich zur horizontalen Positionierung des Widgets per Maus auf der CMS-Seite eine Verschiebung nach rechts festgelegt werden.
- Breite
Die Breite des Widgets lässt sich hier in Spalten einstellen. Wird kein Wert angegeben, wird die Einstellung vom nächstkleineren Gerätetyp übernommen.
- Ausblenden
Auf welchem Gerätetyp ein Widget zu sehen sein soll, kann hier bestimmt werden.
Note
Das Ziehen mit der Maus auf der CMS-Seite und die Designeinstellungen-Tabelle schreiben dieselben Werte für Versatz, Breite und Sichtbarkeit pro Gerätetyp — nutzen Sie den Weg, der für die jeweilige Anpassung am schnellsten geht.
Um komplett unterschiedliche Seiten oder Widget-Anordnungen für verschiedene Gerätetypen zu erstellen, siehe das Kapitel Spalten.