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 erstellen

Ü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 Informationen

Hinweis: Mehr Informationen zum Aufbau der CSS-Klassen selber findest du im Artikel Erlebniswelten mit Bootstrap CSS-Klassen optimieren.