# Erlebniswelt Beispiel

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:

{% embed url="<https://docs.shopware.com/de/shopware-6-de/inhalte>" %}

Beispiel:

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-9fc602ee0032cbd07483fcf4428b5ed3e88f70ba%2Fdocs-de-storefront-theme-cms-example-preview.jpg?alt=media)

### Step 1: Neues Layout anlegen

Lege ein neues Layout wie in der Shopware Doku beschrieben an:

{% embed url="<https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten?category=shopware-6-de/inhalte#neues-layout-anlegen>" %}

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

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-71033efa0387e2c5016fbba1168489e466836533%2Fadmin-erlebnisweltn-beispiel-sektion-1%20\(1\).png?alt=media)

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

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-913e5b0b627716a29807b34c0a43f7c411ea62c5%2Fadmin-erlebnisweltn-beispiel-sektion-1-element-wechseln.png?alt=media)

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.

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-8106ded6445312baa84f9554b327431208fb9546%2Fadmin-erlebnisweltn-beispiel-sektion-1-element-wechseln-popup.png?alt=media)

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.

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-4221c3bfe38591f93caff0ac0a0f6773f602d593%2Fadmin-erlebnisweltn-beispiel-sektion-1-element-produkt-slider-einstellungen.png?alt=media)

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.

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-d13b39005774184b72e286370bc0b513ba819fec%2Fadmin-erlebnisweltn-beispiel-sektion-2%20\(1\).png?alt=media)

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

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-cadb6c981bb06a730a2f6f9768d8b506c503d0f0%2Fadmin-erlebnisweltn-beispiel-sektion-3.png?alt=media)

Beim Inhalt des Textes wurde mit ein wenig Inline-CSS und bekannten Klassen des in Shopware 6 integrierten Frameworks [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) nachgeholfen.

```
<div style="padding: 80px;">
<p style="letter-spacing: 2px;">FASHION STORIES</p>
<h2 style="font-weight: 300; line-height: 1; font-size: 60px;">New Fashion Trend - <br>Hippie Revivals</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren...</p>
<p><a class="btn btn-outline-secondary" href="/Shop/Fashion/Stories/">mehr erfahren</a></p>
</div>
```

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.

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-91b04b4131e7045ef08130d113382dcd2edc21bd%2Fadmin-erlebnisweltn-beispiel-sektion-4.png?alt=media)

Ü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](https://getbootstrap.com/docs/4.6/utilities/spacing/).

#### 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](https://getbootstrap.com/docs/4.6/utilities/spacing/).

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

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-29b0c2f8f431cb7eaef210ec6a7b4ed7bb83027b%2Fadmin-erlebnisweltn-beispiel-sektion-6.png?alt=media)

Aus der Block-Kategorie Commerce haben wir zwei `Drei Spalten, Produkt Boxen` verwenden. Darüber noch ein `Teaser-Text` Element mit folgendem HTML-Inhalt:

```
<p style="text-align: center; letter-spacing: 2px;">BEST FASHION DEALS</p>
<h2 style="text-align: center; font-weight: 300; font-size: 60px;">Recent Arrivals</h2>
<br>
<p style="text-align: center;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
```

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](https://themedocs.zenit.design/content/erlebniswelten/block-innen-abstaende) in dieser Doku.

Ganz am Ende der Erlebniswelt haben wir noch einen Call-to-action-Button integriert.

![Call-to-action Button](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-2379e876426c39e5fdf9394caeb78ab3775d9e5d%2Fadmin-erlebnisweltn-beispiel-sektion-5-show-more.png?alt=media)

Auch hierfür kam der `Teaser-Text` mit seiner HTML-Funktion im Editor zum Einsatz:

```
<p style="text-align: center;">
<a class="btn btn-lg btn-outline-primary" href="#" target="_self">Show more</a>
</p>
```