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
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:
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
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 BreiteHintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-
Bild Text Slider
Elemente (Horizon) > Bild Text Slider
Hintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
-Oberer Abstand:
0pxUnterer Abstand:
80pxLinker Abstand:
0pxRechter Abstand:
0px
Der Bild Text Slider besteht aus vier Bildern. Maße pro Bild ca. 1920x800px
Anzeigemodus:
BeinhaltenMinimale Höhe:
-Vertikale Ausrichtung:
-Pfeile Navigation:
InnenPunkte Navigation:
InnenAutomatisch rotieren:
JaPause bei Mouse-Over:
JaUnterbrechung:
5000Geschwindigkeit:
500Modus:
KarussellAchse:
HorizontalElemente:
1
Die Einstellungen von Slide #1 bis #4 sind identisch.
Inhalt:
<h2 class="h1">Theme Stratus<br><small>Vorlage 1</small></h2>Farbe:
#3d3d3dHintergrund:
transparentVertikale Ausrichtung:
MitteHorizontale Ausrichtung:
LinksMinimale Breite:
-Maximale Breite:
600pxEingangsanimation: flip-in-hor-bottom
Animation: Ken-Burns unten links
Sektion 2
Sektion-Einstellungen:
CSS-Klassen:
-Größenmodus:
Zentrierter InhaltHintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-
Teaser - Drei Spalten
Elemente (Stratus) > Teaser - Drei Spalten
Hintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
zen-animate slide-in-blurred-bottom zen-cms-g-0Oberer Abstand:
autoUnterer Abstand:
autoLinker Abstand:
autoRechter Abstand:
auto
Bild Maße ca.
1000x1000pxMouse-Over Effekt:
slide-in-blurred-bottomMouse-Out Effekt:
slide-out-blurred-bottom
Schriftart:
Schriftart ÜberschriftenText Ausrichtung:
MitteSchriftgröße:
16pxSchriftgewicht:
Semi-bold - 400Farbe:
#ffffffHintergrund:
#00000033Vertikale Ausrichtung:
UntenHorizontale Ausrichtung:
MitteMinimale Breite:
100%Maximale Breite:
-Individuelle Innenabstände:
16px16px16px16pxIndividuelle Außenabstände:
0000
Anzeigemodus:
FüllenVertikale Ausrichtung:
480pxBild Mouse-Over:
Keine
Bild Maße ca.
1000x1000pxMouse-Over Effekt:
fade-in-topMouse-Out Effekt:
flip-out-hor-bottom
Schriftart:
Schriftart ÜberschriftenText Ausrichtung:
MitteSchriftgröße:
16pxSchriftgewicht:
Semi-bold - 400Farbe:
#ffffffHintergrund:
transparentVertikale Ausrichtung:
UntenHorizontale Ausrichtung:
MitteMinimale Breite:
100%Maximale Breite:
-Individuelle Innenabstände:
-Individuelle Außenabstände:
-
Anzeigemodus:
FüllenVertikale Ausrichtung:
480pxHintergrundbild mit Farbe überlagern:
JaFarbe:
#000000Sichtbarkeit:
20%Bild Mouse-Over:
Keine
Bild Maße ca.
1000x1000pxMouse-Over Effekt:
slide-in-rightMouse-Out Effekt:
slide-out-right
Schriftart:
Schriftart ÜberschriftenText Ausrichtung:
MitteSchriftgröße:
16pxSchriftgewicht:
Semi-bold - 400Farbe:
#ffffffHintergrund:
transparentVertikale Ausrichtung:
UntenHorizontale Ausrichtung:
MitteMinimale Breite:
100%Maximale Breite:
-Individuelle Innenabstände:
-Individuelle Außenabstände:
-
Anzeigemodus:
FüllenVertikale Ausrichtung:
480pxHintergrundbild mit Farbe überlagern:
JaFarbe:
#000000Sichtbarkeit:
20%Bild Mouse-Over:
Keine
Teaser - Drei Spalten
Elemente (Stratus) > Teaser - Drei Spalten
Hintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
zen-animate slide-in-blurred-bottom zen-cms-g-0Oberer Abstand:
autoUnterer Abstand:
autoLinker Abstand:
autoRechter Abstand:
auto
Bild Maße ca.
1000x1000pxMouse-Over Effekt:
slide-in-leftMouse-Out Effekt:
slide-out-left
Schriftart:
Schriftart ÜberschriftenText Ausrichtung:
MitteSchriftgröße:
16pxSchriftgewicht:
Semi-bold - 400Farbe:
#3d3d3dHintergrund:
transparentVertikale Ausrichtung:
UntenHorizontale Ausrichtung:
MitteMinimale Breite:
100%Maximale Breite:
-Individuelle Innenabstände:
-Individuelle Außenabstände:
-
Anzeigemodus:
FüllenVertikale Ausrichtung:
480pxHintergrundbild mit Farbe überlagern:
JaFarbe:
#9ca6baSichtbarkeit:
10%Bild Mouse-Over:
Keine
Bild Maße ca.
1000x1000pxMouse-Over Effekt:
slide-in-bottomMouse-Out Effekt:
slide-out-bottom
Schriftart:
Schriftart ÜberschriftenText Ausrichtung:
MitteSchriftgröße:
16pxSchriftgewicht:
Semi-bold - 400Farbe:
#3d3d3dHintergrund:
transparentVertikale Ausrichtung:
UntenHorizontale Ausrichtung:
MitteMinimale Breite:
0Maximale Breite:
300pxIndividuelle Innenabstände:
-Individuelle Außenabstände:
-
Anzeigemodus:
FüllenVertikale Ausrichtung:
480pxHintergrundbild mit Farbe überlagern:
JaFarbe:
#9ca6baSichtbarkeit:
10%Bild Mouse-Over:
Keine
Bild Maße ca.
1000x1000pxMouse-Over Effekt:
slide-in-blurred-bottomMouse-Out Effekt:
slide-out-blurred-bottom
Schriftart:
Schriftart ÜberschriftenText Ausrichtung:
MitteSchriftgröße:
16pxSchriftgewicht:
Semi-bold - 400Farbe:
#3d3d3dHintergrund:
#9ca6ba1aVertikale Ausrichtung:
UntenHorizontale Ausrichtung:
MitteMinimale Breite:
100%Maximale Breite:
-Individuelle Innenabstände:
16px16px16px16pxIndividuelle Außenabstände:
0000
Anzeigemodus:
FüllenVertikale Ausrichtung:
480pxBild Mouse-Over:
Keine
Produkt-Slider
Commerce > Produkt-Slider
Hintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
-Oberer Abstand:
40pxUnterer Abstand:
40pxLinker Abstand:
autoRechter Abstand:
auto
Slider-Titel:
Topseller
Anzeigemodus:
BeinhaltenVertikale Ausrichtung:
-Layout-Typ:
Minimaler InhaltNavigation:
JaAutomatischer Wechsel:
JaRahmen:
NeinMinimale Weite:
300px
Sektion 3
Sektion-Einstellungen:
CSS-Klassen:
-Größenmodus:
Zentrierter InhaltHintergrundfarbe:
-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.
Hintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
zen-animate fade-in-topOberer Abstand:
40pxUnterer Abstand:
40pxLinker Abstand:
autoRechter Abstand:
auto
Schriftart:
Schriftart TextText Ausrichtung:
MitteSchriftgröße:
16pxSchriftgewicht:
Semi-bold - 400Farbe:
#333333Hintergrund:
ffffffVertikale Ausrichtung:
UntenHorizontale Ausrichtung:
RechtsMinimale Breite:
-Maximale Breite:
300pxText Mouse-Over:
Zeige Pfeil
Anzeigemodus:
FüllenMinimale Höhe:
480pxVertikale Ausrichtung:
-Hintergrundbild mit Farbe überlagern:
JaFarbe:
#000000Sichtbarkeit:
20%Bild Mouse-Over:
Bild Zoom
Anzeigemodus:
BeinhaltenVertikale Ausrichtung:
MitteLayout-Typ:
Großes BildNavigation:
JaAutomatischer
Wechsel: NeinRahmen:
NeinMinimale Weite:
250px
Sektion 4
Sektion-Einstellungen:
CSS-Klassen:
-Größenmodus:
Zentrierter InhaltHintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-
Drei Spalten, Bild/Text-Karten
Text & Bild > Drei Spalten, Bild/Text-Karten
Hintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
zen-animate fade-in-topOberer Abstand:
20pxUnterer Abstand:
20pxLinker Abstand:
autoRechter Abstand:
auto
Bild: Maße ca.
1000x500pxAnzeigemodus:
FüllenMinimale Höhe:
340pxVertikale Ausrichtung:
-
<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>Vertikale Ausrichtung:
-
Die Einstellungen aller drei Spalten unterscheiden sich nur im Bildmotiv.
Last updated
Was this helpful?