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.
Elemente für Viewports ein-/ausblenden
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:
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.
Beispiel: Bild-Element in der Sidebar auf Smartphones ausblenden
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.
Schritt 1: Erlebniswelt bearbeiten
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.
Schritt 1.1: Block anlegen
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
Schritt 1.3: Element(e) des Blocks konfigurieren
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-Klassen
d-none d-lg-block
kannst du auch die Sidebar-Navigation für mobile Viewports ausblenden.
Beispiel: Banner für verschiedene Viewports erstellen
In diesem Abschnitt erstellen wir zwei Varianten eines Banners mit jeweils verschiedenen Bildgrößen für zwei unterschiedliche Viewports.
Schritt 1: Erlebniswelt bearbeiten
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.
Schritt 1.1: Block anlegen
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
Schritt 1.2: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
Bild: Wähle dein gewünschtes Motiv mit einer Breite ca. 1920px aus.
Anzeigemodus: Standard
Schritt 1.3: Block anlegen
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
Schritt 1.4: Element(e) des Blocks konfigurieren
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.
Beispiel: Abstände für verschiedene Viewports definieren
Mit Abstandsklassen kannst du Abstände von Erlebniswelt-Elementen je Viewports definieren. Nachfolgend zeigen wir dir ein Anwendungs-Beispiel:
Dieser Abschnitt folgt...
Weiterführende Hinweise
Hinweis: Mehr Informationen zum Aufbau der CSS-Klassen selber findest du im Artikel Erlebniswelten mit Bootstrap CSS-Klassen optimieren.
Last updated