#2150 Responsive Erlebniswelten mit Bootstrap

Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® ebenfalls vollständig kompatibel mit Bootstrap.


In diesem Tutorial erfährst du, wie du responsive Erlebniswelten mit Bootstrap CSS-Klassen erstellen kannst.



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


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



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


Ein Anwendungsbeispiel für ein "10% Rabatt"-Element in der Sidebar findest du z.B. in unserem Demoshop über folgenden Link: https://modern.themeware.shop/Hoehenluft-Abenteuer/


Schritt 1: Erlebniswelt bearbeiten

  • Wechsel in deinem Shopware Adminbereich 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.



Anleitung: 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 in deinem Shopware Adminbereich 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.


Hinweis: Bitte beachte, dass Bilder erheblich den Page-Speed beeinflussen können und komprimiere diese so gut wie möglich mit Tools wie TinyPNG.



Anleitung: 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 in Kürze...


Hinweis: Mehr Informationen zum Aufbau der Klassen selber findest du in unserem Artikel "Erlebniswelten mit Bootstrap CSS-Klassen optimieren" (Link siehe unten).



Weiterführende Links:


Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

ec4860b76928cd06138b6ef7b8579cbc
Kurz die Cookies, dann geht's weiter...
Auch diese Seite nutzt die üblichen Arten von Cookies: Technische und funktionale Cookies sind unbedingt nötig,damit diese Website überhaupt funktionieren kann.Zusätzlich nutzen wir Marketing-Cookies,damit wir dich auf unseren Seiten wiedererkennen und unsere Website und Kampagnen stets verbessern können, sowie Personalisierungs-Cookies mit denen wir dich, auch außerhalb dieser Website, besser ansprechen können.

Mit der Auswahl "Akzeptieren und Schließen" erlaubst Du uns die Verwendung dieser Cookies und Technologien. Bitte besuche unsere Datenschutzerklärung für weitere Informationen. Dort erfährst Du auch wie wir die Daten für erforderliche Zwecke (z. B. Sicherheit) verwenden.

Hier kannst du einstellen, welche Cookies du zulassen möchtest.

Technisch erforderlich

Wir nutzen Cookies, um die Bedienung und die Bereitstellung der Website zu ermöglichen und um sicherzustellen, dass bestimmte Funktionen ordnungsgemäß funktionieren. Diese Cookies sind immer aktiviert, da Du die Website sonst nicht ordnungsgemäß bedienen könntest.

Marketing

Die TC-Innovations GmbH und unsere Werbepartner (einschließlich Social Media-Plattformen wie Google, Facebook und Instagram) nutzen Tracking, um Dir personalisierte Angebote anzubieten, die Dir das volle Nutzererlebnis bieten. Dies beinhaltet das Anzeigen von "Direktwerbung auf Werbeplattformen Dritter", wie in der Datenschutzerklärung beschrieben. Wenn Du dieses Tracking nicht akzeptierst, wirst Du dennoch zufällige Werbeanzeigen von uns auf anderen Plattformen angezeigt bekommen.

Analyse

Um unsere Websites und Services stetig zu verbessern, analysieren wir das Nutzerverhalten auf unseren Websites.

Mehr Informationen findest du in unserer Datenschutzerklärung.

SpeichernCookie-EinstellungenAkzeptieren und Schließen