Die neuen Designeinstellungen bei Widgets (OXID 7)
verfübar ab OXID 7.x
In den Einstellungen eines Widgets finden Sie die Registerkarte Designeinstellungen:
In dieser Registerkarte können Sie festlegen, welche Breite und welchen Versatz (= Abstand nach rechts) ein Widget auf den unterschiedlichen Viewports einnehmen soll.
Das Vflex-Core-Modul erweitert die Standard-Viewports von OXID, sodass alle Viewports, die durch Bootstrap verfügbar sind, angeboten werden. Zudem ist der größte Viewport als Standard festgelegt.
| OXID-Standard | Durch das Modul erweitert |
|---|---|
 |
 |
Was sind Viewports?
Als Viewport wird der Bereich des Browserfensters bezeichnet, der für die Darstellung der Inhalte zur Verfügung steht. Je nach Endgerät unterscheidet sich dieser Bereich. Texte und Bilder werden z. B. auf einem Handy anders dargestellt als auf einem Notebook, damit sie optimal lesbar sind.
Das Design moderner Websites basiert heutzutage zumeist auf Grids (Raster), die aus Spalten und Zeilen bestehen. Die maximale Breite von Container-Elementen auf der Website entspricht 12 Spalten pro Zeile, die minimale Breite 1 Spalte.
Bezogen auf das v-flex-Theme bedeutet das:
Bei einem Raster von 12 Spalten können Sie im größten Viewport (z. B. Desktop-Bildschirm) pro Zeile 4 Elemente mit einer maximalen Breite von 3 Spalten anzeigen lassen:
Viewports von Bootstrap
Das v-flex-Theme verwendet die Viewports von Bootstrap, sodass abhängig der Bildschirmauflösung Elemente auf einer Zeile in die nächste Zeile umgebrochen werden.
| Viewport | Bildschirmauflösung |
|---|---|
| xs | < 576px |
| sm | ≥ 576px |
| md | ≥ 768px |
| lg | ≥ 992px |
| xl | ≥ 1200px |
| xxl | ≥ 1400px |
Beispiel: In der Desktop-Ansicht (Auflösung: xxl) sehen Sie 4 Artikel in einer Zeile. Wenn Sie die gleiche Shop-Seite auf Ihrem Tablet betrachten und das Tablet hochkant halten (Auflösung: sm) sehen Sie nur 1 Artikel in einer Zeile.
Regeln beim Festlegen der Breite
-
Wie viel Spalten ein Widget standardmäßig auf dem xxl-Viewport einnimmt, wird dadurch bestimmt, wie breit Sie das Widget in der Backend-Ansicht ziehen (xxl = Standard).
-
Für alle anderen Viewports sind 12 Spalten vorgesehen; diese Einstellung stammt aus dem xs-Viewport, bei dem standardmäßig 12 Spalten eingetragen sind.
Wenn dort z. B. 6 stünde, wird diese Breite für alle Viewports, außer dem xxl-Viewport, übernommen (sofern kein anderer Wert bei einem Viewport eingetragen ist).
-
Wenn eine Breite bei einem Viewport eingestellt ist, gilt diese Einstellung für die nachfolgenden Viewports bis zu dem Viewport, bei dem wieder eine andere Breite eingestellt ist, bzw. bis zum xxl-Viewport.
Wenn z. B. bei md eine Breite von 3 Spalten eingestellt ist, erben die Viewports lg und xl die Breite von 3 Spalten.
Tipp: Um Geerbt (Standard) wieder einzustellen, müssen Sie im Dropdown-Menü auf die Backspace-Taste drücken.
Regeln beim Festlegen des Versatzes
-
Der Versatz ist einstellbar für alle Viewports außer xxl. Bei xxl gilt der Abstand, wie er durch die Position in der Backend-Ansicht definiert ist.
-
Wenn bei einem Viewport ein Versatz eingestellt ist, gilt diese Einstellung für die nachfolgenden Viewports bis zu dem Viewport, bei dem wieder ein anderer Versatz eingestellt ist, bzw. bis zum xxl-Viewport.
Wenn z. B. bei md ein Versatz von 1 Spalte eingestellt ist, erben die Viewports lg und xl den Versatz von 1 Spalte.
Regeln für das Ausblenden von Widgets
-
Wenn bei einem Viewport die Option Ausblenden aktiviert ist, gilt diese Einstellung ab diesem Viewport für alle nachfolgenden Viewports.
Wenn die Option z. B. nur bei xs aktiviert ist, wird das Widget bei allen Viewports ausgeblendet.