# Stratus - Demo 1

## Einstellungen der Zusatzfelder

Über Zusatzfelder erweitert das Theme die Funktionen des Shops in den Bereichen *Kataloge > Kategorien* und *Kataloge > Produkte*. Zusatzfelder können so die Darstellung für jede Kategorie oder jedes Produkt einzeln verändern.

### Startseite

{% hint style="info" %}
Diese Demo nutzt keine abweichenden Einstellungen in den Zusatzfeldern.
{% endhint %}

### Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > [Kategoriebild](https://themedocs.zenit.design/content/kategorie/kategoriebild) mehr zu den Möglichkeiten.

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-1ba03c700cb4a4c7138156d0eec396543785276c%2Fdocs-de-custom-fields-category-image-stratus-demo-1-storefront.png?alt=media)

## Abweichende Einstellungen

Konfigurationen, welche wir über ein Update implementiert haben, können oft nicht mit dem Standard-Wert ausgeliefert werden, der in der Demo dargestellt wird. Damit stellen wir sicher, dass bestehende Onlineshops nicht ohne das Wissen des Kunden verändert werden.

Die abweichenden Einstellungen haben wir hier aufgelistet:

<table><thead><tr><th width="630.2550199284714">Styling</th><th>Wert</th><th data-hidden></th></tr></thead><tbody><tr><td>Allgemein > Grundlayout > Header (mobil)</td><td>Einzeiliger Header</td><td></td></tr><tr><td>Allgemein > Produktbilder > Breite Artikelbild</td><td>1890*</td><td></td></tr><tr><td>Allgemein > Produktbilder > Höhe Artikelbild</td><td>2400*</td><td></td></tr><tr><td>Header > Main Navigation > Unternavigation Aussehen</td><td>Dropdown Navigation</td><td></td></tr><tr><td>Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links</td><td>true</td><td></td></tr><tr><td>Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis</td><td>false</td><td></td></tr><tr><td>Footer > Footer Bottom > Grundeinstellungen > Service-Navigation anzeigen</td><td>false</td><td>aus</td></tr><tr><td>Produkt > Details > Produkt Details > alle Switch Felder</td><td>true</td><td></td></tr><tr><td>Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren</td><td>true</td><td></td></tr></tbody></table>

<table><thead><tr><th width="631">Einstellungen</th><th>Wert</th></tr></thead><tbody><tr><td>Youtube Video Consent</td><td>Ja</td></tr></tbody></table>

\*Diese Werte sind angepasst an unsere Produktbilder. Eine Übernahme dieser Werte ist daher nicht empfehlenswert.

## Erlebniswelt

Eine grundlegende Einleitung zu den Erlebniswelten findest Du in der Shopware Doku im Bereich [Erlebniswelten](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten). Dort werden die grundlegenden Begriffe und Einstellungen der Layouts, Sektionen und Blöcke erklärt.

### Sektion 1

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-595bf29bccc330cdc12b1c7ee88fccd26f988998%2Fdocs-de-storefront-stratus-demo-1-shopping-cms-1.png?alt=media)

*Sektion-Einstellungen:*

* CSS-Klassen: `-`
* Größenmodus: `Volle Breite`
* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`

#### Bild Text Slider

*Elemente (Horizon) > Bild Text Slider*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `-`
* Oberer Abstand: `0px`
* Unterer Abstand: `80px`
* Linker Abstand: `0px`
* Rechter Abstand: `0px`
  {% endtab %}

{% tab title="Element Inhalt" %}
Der Bild Text Slider besteht aus vier Bildern. Maße pro Bild ca. `1920x800px`
{% endtab %}

{% tab title="Element Einstellungen" %}

* Anzeigemodus: `Beinhalten`
* Minimale Höhe: `-`
* Vertikale Ausrichtung: `-`
* Pfeile Navigation: `Innen`
* Punkte Navigation: `Innen`
* Automatisch rotieren: `Ja`
* Pause bei Mouse-Over: `Ja`
* Unterbrechung: `5000`
* Geschwindigkeit: `500`
* Modus: `Karussell`
* Achse: `Horizontal`
* Elemente: `1`
  {% endtab %}

{% tab title="#1" %}
Die Einstellungen von Slide #1 bis #4 sind identisch.

Inhalt:

```html
<h2 class="h1">Theme Stratus<br><small>Vorlage 1</small></h2>
```

* Farbe: `#3d3d3d`
* Hintergrund: `transparent`
* Vertikale Ausrichtung: `Mitte`
* Horizontale Ausrichtung: `Links`
* Minimale Breite: `-`
* Maximale Breite: `600px`
* Eingangsanimation: flip-in-hor-bottom
* Animation: Ken-Burns unten links
  {% endtab %}
  {% endtabs %}

### Sektion 2

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-82bd168657a48bb6f87cf2ad9a69ee263449f0a6%2Fdocs-de-storefront-stratus-demo-1-shopping-cms-2.png?alt=media)

*Sektion-Einstellungen:*

* CSS-Klassen: `-`
* Größenmodus: `Zentrierter Inhalt`
* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`

#### Teaser - Drei Spalten

*Elemente (Stratus) > Teaser - Drei Spalten*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate slide-in-blurred-bottom zen-cms-g-0`
* Oberer Abstand: `auto`
* Unterer Abstand: `auto`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title="Element 1 Inhalt" %}

* Bild Maße ca. `1000x1000px`
* Mouse-Over Effekt: `slide-in-blurred-bottom`
* Mouse-Out Effekt: `slide-out-blurred-bottom`
  {% endtab %}

{% tab title="Element 1 Text" %}

* Schriftart: `Schriftart Überschriften`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `16px`
* Schriftgewicht: `Semi-bold - 400`
* Farbe: `#ffffff`
* Hintergrund: `#00000033`
* Vertikale Ausrichtung: `Unten`
* Horizontale Ausrichtung: `Mitte`
* Minimale Breite: `100%`
* Maximale Breite: `-`
* Individuelle Innenabstände: `16px` `16px` `16px` `16px`
* Individuelle Außenabstände: `0` `0` `0` `0`
  {% endtab %}

{% tab title="Element 1 Bild" %}

* Anzeigemodus: `Füllen`
* Vertikale Ausrichtung: `480px`
* Bild Mouse-Over: `Keine`
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title="Element 2 Inhalt" %}

* Bild Maße ca. `1000x1000px`
* Mouse-Over Effekt: `fade-in-top`
* Mouse-Out Effekt: `flip-out-hor-bottom`
  {% endtab %}

{% tab title="Element 2 Text" %}

* Schriftart: `Schriftart Überschriften`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `16px`
* Schriftgewicht: `Semi-bold - 400`
* Farbe: `#ffffff`
* Hintergrund: `transparent`
* Vertikale Ausrichtung: `Unten`
* Horizontale Ausrichtung: `Mitte`
* Minimale Breite: `100%`
* Maximale Breite: `-`
* Individuelle Innenabstände: `-`
* Individuelle Außenabstände: `-`
  {% endtab %}

{% tab title="Element 2 Bild" %}

* Anzeigemodus: `Füllen`
* Vertikale Ausrichtung: `480px`
* Hintergrundbild mit Farbe überlagern: `Ja`
* Farbe: `#000000`
* Sichtbarkeit: `20%`
* Bild Mouse-Over: `Keine`
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title="Element 3 Inhalt" %}

* Bild Maße ca. `1000x1000px`
* Mouse-Over Effekt: `slide-in-right`
* Mouse-Out Effekt: `slide-out-right`
  {% endtab %}

{% tab title="Element 3 Text" %}

* Schriftart: `Schriftart Überschriften`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `16px`
* Schriftgewicht: `Semi-bold - 400`
* Farbe: `#ffffff`
* Hintergrund: `transparent`
* Vertikale Ausrichtung: `Unten`
* Horizontale Ausrichtung: `Mitte`
* Minimale Breite: `100%`
* Maximale Breite: `-`
* Individuelle Innenabstände: `-`
* Individuelle Außenabstände: `-`
  {% endtab %}

{% tab title="Element 3 Bild" %}

* Anzeigemodus: `Füllen`
* Vertikale Ausrichtung: `480px`
* Hintergrundbild mit Farbe überlagern: `Ja`
* Farbe: `#000000`
* Sichtbarkeit: `20%`
* Bild Mouse-Over: `Keine`
  {% endtab %}
  {% endtabs %}

#### Teaser - Drei Spalten

*Elemente (Stratus) > Teaser - Drei Spalten*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate slide-in-blurred-bottom zen-cms-g-0`
* Oberer Abstand: `auto`
* Unterer Abstand: `auto`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title="Element 1 Inhalt" %}

* Bild Maße ca. `1000x1000px`
* Mouse-Over Effekt: `slide-in-left`
* Mouse-Out Effekt: `slide-out-left`
  {% endtab %}

{% tab title="Element 1 Text" %}

* Schriftart: `Schriftart Überschriften`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `16px`
* Schriftgewicht: `Semi-bold - 400`
* Farbe: `#3d3d3d`
* Hintergrund: `transparent`
* Vertikale Ausrichtung: `Unten`
* Horizontale Ausrichtung: `Mitte`
* Minimale Breite: `100%`
* Maximale Breite: `-`
* Individuelle Innenabstände: `-`
* Individuelle Außenabstände: `-`
  {% endtab %}

{% tab title="Element 1 Bild" %}

* Anzeigemodus: `Füllen`
* Vertikale Ausrichtung: `480px`
* Hintergrundbild mit Farbe überlagern: `Ja`
* Farbe: `#9ca6ba`
* Sichtbarkeit: `10%`
* Bild Mouse-Over: `Keine`
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title="Element 2 Inhalt" %}

* Bild Maße ca. `1000x1000px`
* Mouse-Over Effekt: `slide-in-bottom`
* Mouse-Out Effekt: `slide-out-bottom`
  {% endtab %}

{% tab title="Element 2 Text" %}

* Schriftart: `Schriftart Überschriften`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `16px`
* Schriftgewicht: `Semi-bold - 400`
* Farbe: `#3d3d3d`
* Hintergrund: `transparent`
* Vertikale Ausrichtung: `Unten`
* Horizontale Ausrichtung: `Mitte`
* Minimale Breite: `0`
* Maximale Breite: `300px`
* Individuelle Innenabstände: `-`
* Individuelle Außenabstände: `-`
  {% endtab %}

{% tab title="Element 2 Bild" %}

* Anzeigemodus: `Füllen`
* Vertikale Ausrichtung: `480px`
* Hintergrundbild mit Farbe überlagern: `Ja`
* Farbe: `#9ca6ba`
* Sichtbarkeit: `10%`
* Bild Mouse-Over: `Keine`
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title="Element 3 Inhalt" %}

* Bild Maße ca. `1000x1000px`
* Mouse-Over Effekt: `slide-in-blurred-bottom`
* Mouse-Out Effekt: `slide-out-blurred-bottom`
  {% endtab %}

{% tab title="Element 3 Text" %}

* Schriftart: `Schriftart Überschriften`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `16px`
* Schriftgewicht: `Semi-bold - 400`
* Farbe: `#3d3d3d`
* Hintergrund: `#9ca6ba1a`
* Vertikale Ausrichtung: `Unten`
* Horizontale Ausrichtung: `Mitte`
* Minimale Breite: `100%`
* Maximale Breite: `-`
* Individuelle Innenabstände: `16px` `16px` `16px` `16px`
* Individuelle Außenabstände: `0` `0` `0` `0`
  {% endtab %}

{% tab title="Element 3 Bild" %}

* Anzeigemodus: `Füllen`
* Vertikale Ausrichtung: `480px`
* Bild Mouse-Over: `Keine`
  {% endtab %}
  {% endtabs %}

#### Produkt-Slider

*Commerce > Produkt-Slider*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `-`
* Oberer Abstand: `40px`
* Unterer Abstand: `40px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Element Inhalt" %}

* Slider-Titel: `Topseller`
  {% endtab %}

{% tab title="Element Einstellungen" %}

* Anzeigemodus: `Beinhalten`
* Vertikale Ausrichtung: `-`
* Layout-Typ: `Minimaler Inhalt`
* Navigation: `Ja`
* Automatischer Wechsel: `Ja`
* Rahmen: `Nein`
* Minimale Weite: `300px`
  {% endtab %}
  {% endtabs %}

### Sektion 3

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-a4db90f0a76715ab2314095931e51475d40ccb97%2Fdocs-de-storefront-stratus-demo-1-shopping-cms-3.png?alt=media)

*Sektion-Einstellungen:*

* CSS-Klassen: `-`
* Größenmodus: `Zentrierter Inhalt`
* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`

#### Zwei Spalten

*Spalten (Stratus) > Zwei Spalten*

Die zweite Sektion besteht aus drei Blöcken die jeweils im Wechsel mit einem Teaser-Element und einem Produkt-Slider gefüllt sind. Die Einstellungen sind für alle drei "Zwei Spalten" Blöcke identisch.

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate fade-in-top`
* Oberer Abstand: `40px`
* Unterer Abstand: `40px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Spalte 1: Teaser Inhalt" %}

* Mouse-Over Effekt: `keine`
* Mouse-Out Effekt: `keine`
* CSS-Klassen: `-`
  {% endtab %}

{% tab title="Spalte 1: Text" %}

* Schriftart: `Schriftart Text`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `16px`
* Schriftgewicht: `Semi-bold - 400`
* Farbe: `#333333`
* Hintergrund: `ffffff`
* Vertikale Ausrichtung: `Unten`
* Horizontale Ausrichtung: `Rechts`
* Minimale Breite: `-`
* Maximale Breite: `300px`
* Text Mouse-Over: `Zeige Pfeil`
  {% endtab %}

{% tab title="Spalte 1: Bild" %}

* Anzeigemodus: `Füllen`
* Minimale Höhe: `480px`
* Vertikale Ausrichtung: `-`
* Hintergrundbild mit Farbe überlagern: `Ja`
* Farbe: `#000000`
* Sichtbarkeit: `20%`
* Bild Mouse-Over: `Bild Zoom`
  {% endtab %}

{% tab title="Spalte 2: Produkt Slider" %}

* Anzeigemodus: `Beinhalten`
* Vertikale Ausrichtung: `Mitte`
* Layout-Typ: `Großes Bild`
* Navigation: `Ja`
* Automatischer `Wechsel: Nein`
* Rahmen: `Nein`
* Minimale Weite: `250px`
  {% endtab %}
  {% endtabs %}

### Sektion 4

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-7c55fa9659db8907f99903bfab3d1036407452ef%2Fdocs-de-storefront-stratus-demo-1-shopping-cms-4.png?alt=media)

*Sektion-Einstellungen:*

* CSS-Klassen: `-`
* Größenmodus: `Zentrierter Inhalt`
* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`

#### Drei Spalten, Bild/Text-Karten

*Text & Bild > Drei Spalten, Bild/Text-Karten*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate fade-in-top`
* Oberer Abstand: `20px`
* Unterer Abstand: `20px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Element oben: Bild" %}

* Bild: Maße ca. `1000x500px`
* Anzeigemodus: `Füllen`
* Minimale Höhe: `340px`
* Vertikale Ausrichtung: `-`
  {% endtab %}

{% tab title="Element unten: Inhalt" %}

```html
<h2 style="text-align: center;">Lorem Ipsum dolor</h2>
                        <p style="text-align: center;">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.</p>
```

{% endtab %}

{% tab title="Element unten: Einstellungen" %}

* Vertikale Ausrichtung: `-`
  {% endtab %}
  {% endtabs %}

Die Einstellungen aller drei Spalten unterscheiden sich nur im Bildmotiv.