Responsive Erlebniswelten mit Bootstrap
In dieser Anleitung erfährst du, wie du responsive Erlebniswelten mit Bootstrap CSS-Klassen erstellen kannst.
Achtung: Shopware ab Version 6.5 nutzt Bootstrap 5. Dieser Artikel ist dann veraltet und wird bald überarbeitet.
Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® ebenfalls vollständig kompatibel mit Bootstrap.
Nachfolgend stellen wir dir die entsprechenden CSS-Klassen vor und zeigen dir ein paar Anwendungsbeispiele.
Um Erlebniswelt-Blöcke in bestimmten Viewports ein- oder auszublenden, können die nachfolgenden Bootstrap Display-CSS-Klassen genutzt werden. Damit lassen sich beispielsweise Bild-Elemente für verschiedene Viewports optimieren.
Tipp: Ab Shopware 6.4.19.0 kannst du die Sichtbarkeit von Sektionen und Blöcken ganz einfach im Erlebniswelt-Editor einstellen: siehe Responsive Erlebniswelten
Übersicht der Bootstrap Display-CSS-Klassen:
Element immer ausblenden: d-none
Element anzeigen bis 576px: d-block d-sm-none
Element anzeigen bis 768px: d-block d-md-none
Element anzeigen bis 992px: d-block d-lg-none
Element anzeigen bis 1200px: d-block d-xl-none
Element anzeigen ab 576px: d-none d-sm-block
Element anzeigen ab 768px: d-none d-md-block
Element anzeigen ab 992px: d-none d-lg-block
Element anzeigen ab 1200px: d-none d-xl-block
Element anzeigen von 0px bis 576px: d-block d-sm-none
Element anzeigen von 578px bis 768px: d-none d-sm-block d-md-none
Element anzeigen von 769px bis 992px: d-none d-md-block d-lg-none
Element anzeigen von 993px bis 1200px: d-none d-lg-block d-xl-none
Diese CSS-Klassen kannst du im Erlebniswelt-Editor über das Feld "CSS-Klassen" in den Block-Einstellungen bzw. Sektion-Einstellungen hinzufügen.
Hinweis: Diese CSS-Klassen machen Sektionen und Blöcke lediglich unsichtbar, der entsprechende HTML-Code ist nach wie vor in der Storefront vorhanden.
In diesem Abschnitt integrieren wir ein Bildelement in die Sidebar, welches auf einen Rabatt aufmerksam macht. Im Smartphone-Viewport würde das Motiv zu viel Platz einnehmen, darum blenden wir es für diesen Viewport aus.
Tipp: Ein Anwendungsbeispiel für ein "10% Rabatt"-Element in der Sidebar findest du in unserem Demoshop.
- Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
- Wähle die Landingpage der entsprechenden Kategorie mit Sidebar aus oder erstelle Sie und bearbeite die Erlebniswelt.
- Wähle als Block-Kategorie "Bilder" und füge dann den Block mit dem Namen "Bild, zentriert" per Drag & Drop zur Sidebar hinzu.
- Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
- Block-Name: Banner
- CSS-Klassen:
d-none d-lg-block
Konfiguriere nun das Element in diesem Block.
- Bild: Wähle dein gewünschtes Motiv mit einer Breite von ca. 400px aus.
- Anzeigemodus: Strecken
Tipp: Mit den CSS-Klassend-none d-lg-blockkannst du auch die Sidebar-Navigation für mobile Viewports ausblenden.
In diesem Abschnitt erstellen wir zwei Varianten eines Banners mit jeweils verschiedenen Bildgrößen für zwei unterschiedliche Viewports.
- Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
- Wähle die Landingpage der entsprechenden Kategorie mit Sidebar aus oder erstelle Sie und bearbeite die Erlebniswelt.
- Wähle als Block-Kategorie "Bilder" und füge dann den Block mit dem Namen "Bild, zentriert" per Drag & Drop der Erlebniswelt hinzu.
- Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
- Block-Name: Banner
- CSS-Klassen:
d-none d-sm-block
Konfiguriere nun das Element in diesem Block.
- Bild: Wähle dein gewünschtes Motiv mit einer Breite ca. 1920px aus.
- Anzeigemodus: Standard
- Wähle als Block-Kategorie "Bilder" und füge dann den Block mit dem Namen "Bild, zentriert" per Drag & Drop der Erlebniswelt hinzu.
- Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
- Block-Name: Banner Mobil
- CSS-Klassen:
d-block d-sm-none
Konfiguriere nun das Element in diesem Block.
- Bild: Wähle dein gewünschtes Motiv mit einer Breite von ca. 580px aus.
- Anzeigemodus: Strecken
Tipp: Du kannst auch ein drittes Bild-Element für den Tablet-Viewport ergänzen.
Wichtig: Bitte beachte, dass Bilder erheblich den Page-Speed beeinflussen können und komprimiere diese so gut wie möglich mit Online-Tools wie TinyPNG.
Mit Abstandsklassen kannst du Abstände von Erlebniswelt-Elementen je Viewports definieren. Nachfolgend zeigen wir dir ein Anwendungs-Beispiel:
Dieser Abschnitt folgt...
Hinweis: Mehr Informationen zum Aufbau der CSS-Klassen selber findest du im Artikel Erlebniswelten mit Bootstrap CSS-Klassen optimieren.
Last modified 5mo ago