# Responsive Erlebniswelten mit Bootstrap {% hint style="warning" %} **Achtung**: Shopware ab Version 6.5 nutzt Bootstrap 5. Dieser Artikel ist dann veraltet und wird bald überarbeitet. {% endhint %} 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. {% hint style="success" %} **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](/wissensdatenbank/anleitungen/erlebniswelten/responsive-erlebniswelten.md) {% endhint %} Ü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. {% hint style="info" %} **Hinweis**: Diese CSS-Klassen machen Sektionen und Blöcke lediglich unsichtbar, der entsprechende HTML-Code ist nach wie vor in der Storefront vorhanden. {% endhint %} ### 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. {% hint style="success" %} **Tipp**: Ein Anwendungsbeispiel für ein "10% Rabatt"-Element in der Sidebar findest du in unserem [Demoshop](https://demo.themeware.design/modern/Hoehenluft-Abenteuer/). {% endhint %} #### 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. {% hint style="warning" %} **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](https://tinypng.com). {% endhint %} ### 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 {% hint style="info" %} **Hinweis**: Mehr Informationen zum Aufbau der CSS-Klassen selber findest du im Artikel [Erlebniswelten mit Bootstrap CSS-Klassen optimieren](/wissensdatenbank/profiwissen/erlebniswelten-mit-bootstrap-css-klassen-optimieren.md). {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/responsive-erlebniswelten-mit-bootstrap.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.