Erlebniswelt Beispiel
Nützliche Tipps und Tricks zum Erstellen einer Erlebniswelt wie in unserer Demo Atmos Set 1
Im Folgenden möchten wir Dir ein paar Tricks und Kniffe zur Gestaltung unserer Vorlagen zeigen. Voraussetzung hierfür ist, dass Du schon einmal einen Blick in die Shopware Doku für die Erlebniswelten geworfen hast. War das bisher nicht der Fall, schaue Dir zunächst die untern verlinkte Doku von Shopware an:
Beispiel:
Step 1: Neues Layout anlegen
Lege ein neues Layout wie in der Shopware Doku beschrieben an:
Step 2: Gestaltung - los gehts!
Sektion 1
Zuerst haben wir in der ersten Sektion ein Hintergrundbild hinterlegt. Über das Sektions-Icon (1) gelangt man in die Sektions-Einstellungen. Im Bereich Hintergrundbild (2) haben wir ein Bild hinterlegt. Optional kann hier auch der Größenmodus Volle Breite (anstatt zentrierter Inhalt) gesetzt werden.
Über die Funktion der Blöcke (Doku: https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten?category=shopware-6-de/inhalte#bloecke) haben wir in der ersten Zeile (3) einen Zwei Spalten, Teaser Text platziert. Den rechten Bereich haben wir hierbei einfach ohne Inhalt abgespeichert.
In der zweiten Zeile (4) haben wir ebenfalls den Block Zwei Spalten, Teaser Text platziert und den rechten Bereich leer abgespeichert. Aber wie kommt nun der Artikel-Slider in den linken Text-Block?
Ganz einfach! Über das Element Tauschen-Icon (1) der Block-Einstellungen in der oberen rechten Ecke bietet Shopware die Möglichkeit, die einzelnen Elemente in den Blöcken zu ersetzen.
Tausche in dem Modal-Fenster das Text-Element gegen einen Produkt-Slider aus. Daraufhin kannst Du das Element wie gewohnt über das Zahnrad der Block-Einstellungen konfigurieren.
Um drei Artikel-Bilder bei Desktop-Größen nebeneinander darzustellen haben wir in den Produkt-Slider Einstellungen des Elementes die Minimale Weite (1) auf 180px gestellt. Da hier nur sehr wenig Platz vorhanden ist, verwenden wir den Layout-Typ (2) Minimaler Inhalt.
Sektion 2
Sektion 2 besteht aus einem Bild-Raster ohne besondere Einstellungen.
Sektion 3
Diese Sektion besteht aus einem Zwei Spalten, gestrecktes Bild & Text Block. Der Hintergrund der Sektion wurde wie in Sektion 1 beschrieben nicht mit einem Hintergrundbild, dafür aber mit einer Hintergrundfarbe hinterlegt.
Beim Inhalt des Textes wurde mit ein wenig Inline-CSS und bekannten Klassen des in Shopware 6 integrierten Frameworks Bootstrap nachgeholfen.
Die vertikale Ausrichtung des Textes zum Bild lässt sich in den Element-Einstellungen einstellen.
Sektion 4
Diese Sektion besteht aus einem veränderten Zwei Spalten, gestrecktes Bild & Text Element. Auch hier bedienen wir uns wieder der Möglichkeit, Elemente gegen andere Elemente auszutauschen.
Über das in Sektion 1 beschriebene Austausch Icon in der oberen rechten Ecke des Elementes haben wir in die rechte Seite des Blocks ein Bild und in der linken Seite einen Produkt-Slider eingefügt.
Im Feld CSS-Klassen sind folgende Klassen eingetragen:
zen-animate slide-in-bottom p-5 py-md-0 pr-md-0
Die ersten beiden Klassen zen-animate slide-in-bottom sorgen dafür, dass der Inhalt beim Scrollen animiert erscheint.
Die anderen drei Klassen p-5 py-md-0 pr-md-0 sorgen für den Innenabstand auf mobilen Geräten und sind Bestandteil des CSS Frameworks Bootstrap.
Sektion 5
Verhält sich analog zur Sektion 4. Lediglich die Reihenfolge der Elemente ist invertiert.
Im Feld CSS-Klassen sind folgende Klassen eingetragen:
zen-animate slide-in-bottom p-5 py-md-0 pl-md-0
Die ersten beiden Klassen zen-animate slide-in-bottom sorgen dafür, dass der Inhalt beim Scrollen animiert erscheint.
Die anderen drei Klassen p-5 py-md-0 pl-md-0 sorgen für den Innenabstand auf mobilen Geräten und sind Bestandteil des CSS Frameworks Bootstrap.
Sektion 6
In dieser Sektion haben wir den Größenmodus (1) Zentrierter Inhalt verwendet, sodass die Artikel nicht bis an den Browserrand ragen können und die drei Element nicht zu breit werden.
Aus der Block-Kategorie Commerce haben wir zwei Drei Spalten, Produkt Boxen verwenden. Darüber noch ein Teaser-Text Element mit folgendem HTML-Inhalt:
Im Feld CSS-Klassen sind folgende Klassen eingetragen:
zen-animate slide-in-bottom zen-cms-gy-5
Die ersten beiden Klassen zen-animate slide-in-bottom sorgen dafür, dass der Inhalt beim Scrollen animiert erscheint.
Die andere Klassen zen-cms-gy-5 sorgt für einen vertikalen Abstand. Mehr Informationen findest Du unter Block Abstände in dieser Doku.
Ganz am Ende der Erlebniswelt haben wir noch einen Call-to-action-Button integriert.
Auch hierfür kam der Teaser-Text mit seiner HTML-Funktion im Editor zum Einsatz:
Last updated
