Links

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:
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.

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.