Stratus - Demo 1

Das Minimal Design zeichnet sich durch seine globalen Layoutabstände aus, welche den Onlineshop wie einen Rahmen umgeben.

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

Diese Demo nutzt keine abweichenden Einstellungen in den Zusatzfeldern.

Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > Kategoriebild mehr zu den Möglichkeiten.

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:

Styling	Wert
Allgemein > Grundlayout > Header (mobil)	Einzeiliger Header
Allgemein > Produktbilder > Breite Artikelbild	1890*
Allgemein > Produktbilder > Höhe Artikelbild	2400*
Header > Main Navigation > Unternavigation Aussehen	Dropdown Navigation
Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links	true
Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis	false
Footer > Footer Bottom > Grundeinstellungen > Service-Navigation anzeigen	false
Produkt > Details > Produkt Details > alle Switch Felder	true
Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren	true

Einstellungen	Wert
Youtube Video Consent	Ja

*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. Dort werden die grundlegenden Begriffe und Einstellungen der Layouts, Sektionen und Blöcke erklärt.

Sektion 1

Sektion-Einstellungen:

• CSS-Klassen: -

• Größenmodus: Volle Breite

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

Bild Text Slider

Elemente (Horizon) > Bild Text Slider

Block Einstellungen

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

• CSS-Klassen: -

• Oberer Abstand: 0px

• Unterer Abstand: 80px

• Linker Abstand: 0px

• Rechter Abstand: 0px

Element Inhalt

Der Bild Text Slider besteht aus vier Bildern. Maße pro Bild ca. 1920x800px

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

#1

Die Einstellungen von Slide #1 bis #4 sind identisch.

Inhalt:

<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

Sektion 2

Sektion-Einstellungen:

• CSS-Klassen: -

• Größenmodus: Zentrierter Inhalt

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

Teaser - Drei Spalten

Elemente (Stratus) > Teaser - Drei Spalten

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

Element 1 Inhalt

• Bild Maße ca. 1000x1000px

• Mouse-Over Effekt: slide-in-blurred-bottom

• Mouse-Out Effekt: slide-out-blurred-bottom

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

Element 1 Bild

• Anzeigemodus: Füllen

• Vertikale Ausrichtung: 480px

• Bild Mouse-Over: Keine

Element 2 Inhalt

• Bild Maße ca. 1000x1000px

• Mouse-Over Effekt: fade-in-top

• Mouse-Out Effekt: flip-out-hor-bottom

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

Element 2 Bild

• Anzeigemodus: Füllen

• Vertikale Ausrichtung: 480px

• Hintergrundbild mit Farbe überlagern: Ja

• Farbe: #000000

• Sichtbarkeit: 20%

• Bild Mouse-Over: Keine

Element 3 Inhalt

• Bild Maße ca. 1000x1000px

• Mouse-Over Effekt: slide-in-right

• Mouse-Out Effekt: slide-out-right

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

Element 3 Bild

• Anzeigemodus: Füllen

• Vertikale Ausrichtung: 480px

• Hintergrundbild mit Farbe überlagern: Ja

• Farbe: #000000

• Sichtbarkeit: 20%

• Bild Mouse-Over: Keine

Teaser - Drei Spalten

Elemente (Stratus) > Teaser - Drei Spalten

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

Element 1 Inhalt

• Bild Maße ca. 1000x1000px

• Mouse-Over Effekt: slide-in-left

• Mouse-Out Effekt: slide-out-left

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

Element 1 Bild

• Anzeigemodus: Füllen

• Vertikale Ausrichtung: 480px

• Hintergrundbild mit Farbe überlagern: Ja

• Farbe: #9ca6ba

• Sichtbarkeit: 10%

• Bild Mouse-Over: Keine

Element 2 Inhalt

• Bild Maße ca. 1000x1000px

• Mouse-Over Effekt: slide-in-bottom

• Mouse-Out Effekt: slide-out-bottom

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

Element 2 Bild

• Anzeigemodus: Füllen

• Vertikale Ausrichtung: 480px

• Hintergrundbild mit Farbe überlagern: Ja

• Farbe: #9ca6ba

• Sichtbarkeit: 10%

• Bild Mouse-Over: Keine

Element 3 Inhalt

• Bild Maße ca. 1000x1000px

• Mouse-Over Effekt: slide-in-blurred-bottom

• Mouse-Out Effekt: slide-out-blurred-bottom

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

Element 3 Bild

• Anzeigemodus: Füllen

• Vertikale Ausrichtung: 480px

• Bild Mouse-Over: Keine

Produkt-Slider

Commerce > Produkt-Slider

Block Einstellungen

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

• CSS-Klassen: -

• Oberer Abstand: 40px

• Unterer Abstand: 40px

• Linker Abstand: auto

• Rechter Abstand: auto

Element Inhalt

• Slider-Titel: Topseller

Element Einstellungen

• Anzeigemodus: Beinhalten

• Vertikale Ausrichtung: -

• Layout-Typ: Minimaler Inhalt

• Navigation: Ja

• Automatischer Wechsel: Ja

• Rahmen: Nein

• Minimale Weite: 300px

Sektion 3

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.

Block Einstellungen

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

• CSS-Klassen: zen-animate fade-in-top

• Oberer Abstand: 40px

• Unterer Abstand: 40px

• Linker Abstand: auto

• Rechter Abstand: auto

Spalte 1: Teaser Inhalt

• Mouse-Over Effekt: keine

• Mouse-Out Effekt: keine

• CSS-Klassen: -

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

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

Spalte 2: Produkt Slider

• Anzeigemodus: Beinhalten

• Vertikale Ausrichtung: Mitte

• Layout-Typ: Großes Bild

• Navigation: Ja

• Automatischer Wechsel: Nein

• Rahmen: Nein

• Minimale Weite: 250px

Sektion 4

Sektion-Einstellungen:

• CSS-Klassen: -

• Größenmodus: Zentrierter Inhalt

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

Drei Spalten, Bild/Text-Karten

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

Block Einstellungen

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

• CSS-Klassen: zen-animate fade-in-top

• Oberer Abstand: 20px

• Unterer Abstand: 20px

• Linker Abstand: auto

• Rechter Abstand: auto

Element oben: Bild

• Bild: Maße ca. 1000x500px

• Anzeigemodus: Füllen

• Minimale Höhe: 340px

• Vertikale Ausrichtung: -

Element unten: Inhalt

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

Element unten: Einstellungen

• Vertikale Ausrichtung: -

Die Einstellungen aller drei Spalten unterscheiden sich nur im Bildmotiv.