Horizon - Demo 2
Das Layout zeichnet sich durch seine klaren Schrift und seiner markanten Farbgebung aus. Das Hauptmenü wird als Dropdown ausgegeben.
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.
Detailseite
In unserer Demo verwenden wir für einige Produkte auf der Produkt-Detailseite statt des normalen Galerie-Sliders die Darstellung des Galerie-Rasters. Diese Einstellung kann in den Theme-Einstellung global gesetzt werden oder über die Zusatzfelder in jedem Produkt einzeln hinterlegt werden.
Im Bereich der Zusatzfelder (1) des Produktes im Tab Galerie (2) kann der Galerie Modus (3) auf Galerie Raster
gesetzt werden.
Beispiel:
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:
*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
Die Sektion besteht aus einem Slider, einem Textbereich und einem dreispaltigen Teaser Element.
Sektion-Einstellungen:
CSS-Klassen:
-
Größenmodus:
Volle Breite
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
Bild Text Slider
Elemente (Horizon) > Bild Text Slider
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
CSS-Klassen:
-
Oberer Abstand:
0px
Unterer Abstand:
0px
Linker Abstand:
0px
Rechter Abstand:
0px
Beispiel:
Drei Spalten 3/6/3
Spalten (Horizon) > Drei Spalten 3/6/3
Der Block "Drei Spalten 3/6/3" enthält zunächst keine Elemente, welche im nächsten Schritt hinzugefügt werden.
Hintergrundfarbe:
#f1d2b6
Hintergrundbild:
-
Bildmodus:
-
CSS-Klassen:
-
Oberer Abstand:
150px
Unterer Abstand:
150px
Linker Abstand:
auto
Rechter Abstand:
auto
Teaser - Drei Spalten
Elemente (Horizon) > Teaser - Drei Spalten
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
CSS-Klassen:
zen-animate slide-in-blurred-bottom
Oberer Abstand:
40px
Unterer Abstand:
100px
Linker Abstand:
auto
Rechter Abstand:
auto
Alle drei Teaser sind identisch in ihren Einstellungen. Sie unterscheiden sich lediglich im ausgewählten Bild, Text und der Verlinkung.
Sektion 2
Sektion-Einstellungen:
CSS-Klassen:
-
Größenmodus:
Zentrierter Inhalt
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
Teaser-Text
Text > Teaser-Text
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
CSS-Klassen:
zen-animate slide-in-blurred-bottom
Oberer Abstand:
100px
Unterer Abstand:
20px
Linker Abstand:
auto
Rechter Abstand:
auto
Produkt-Slider
Commerce > Produkt-Slider
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
CSS-Klassen:
zen-animate fade-in-top
Oberer Abstand:
20px
Unterer Abstand:
20px
Linker Abstand:
auto
Rechter Abstand:
auto
Teaser-Text
Text > Teaser-Text
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
CSS-Klassen:
-
Oberer Abstand:
0px
Unterer Abstand:
100px
Linker Abstand:
auto
Rechter Abstand:
auto
Sektion 3
Sektion-Einstellungen:
CSS-Klassen:
-
Größenmodus:
Zentrierter Inhalt
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
Teaser
Elemente (Horizon) > Teaser
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
CSS-Klassen:
zen-animate slide-in-blurred-bottom
Oberer Abstand:
20px
Unterer Abstand:
20px
Linker Abstand:
auto
Rechter Abstand:
auto
Drei Spalten 3/6/3
Spalten (Horizon) > Drei Spalten 3/6/3
Der Block "Drei Spalten 3/6/3" enthält zunächst keine Elemente, welche im nächsten Schritt hinzugefügt werden.
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
CSS-Klassen:
zen-animate slide-in-blurred-bottom
Oberer Abstand:
20px
Unterer Abstand:
20px
Linker Abstand:
auto
Rechter Abstand:
auto
Sechs Spalten
Spalten (Horizon) > Sechs Spalten
Der Block "Sechs Spalten" wird nach dem Platzieren mit Bild Elementen befüllt.
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
CSS-Klassen:
zen-animate slide-in-blurred-bottom
Oberer Abstand:
20px
Unterer Abstand:
20px
Linker Abstand:
100px
Rechter Abstand:
100px
Alle sechs Bild-Elemente haben identische Einstellungen
Sektion 4
Sektion-Einstellungen:
CSS-Klassen:
-
Größenmodus:
Zentrierter Inhalt
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
Teaser-Text
Text > Teaser-Text
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
CSS-Klassen:
zen-animate slide-in-blurred-bottom
Oberer Abstand:
100px
Unterer Abstand:
20px
Linker Abstand:
auto
Rechter Abstand:
auto
Produkt-Slider
Commerce > Produkt-Slider
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
CSS-Klassen:
zen-animate fade-in-top
Oberer Abstand:
20px
Unterer Abstand:
20px
Linker Abstand:
auto
Rechter Abstand:
auto
Teaser-Text
Text > Teaser-Text
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
CSS-Klassen:
-
Oberer Abstand:
0px
Unterer Abstand:
100px
Linker Abstand:
auto
Rechter Abstand:
auto
Sektion 5
Sektion-Einstellungen:
CSS-Klassen:
-
Größenmodus:
Zentrierter Inhalt
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
Zwei Spalten 8/4
Spalten (Horizon) > Zwei Spalten 8/4
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
CSS-Klassen:
zen-animate slide-in-blurred-bottom zen-cms-g-5
Oberer Abstand:
100px
Unterer Abstand:
100px
Linker Abstand:
100px
Rechter Abstand:
100px
Die Klasse zen-cms-g-5
sorgt für einen größeren Abstand zwischen den Spalten des Zwei Spalten 8/4 Blocks. Mehr über die Einstellungen von Abständen der Spalten, findest Du unter Block Abstände.
Features
Elemente (Horizon) > Features
Hintergrundfarbe:
-
Hintergrundbild:
-
Bildmodus:
-
CSS-Klassen:
-
Oberer Abstand:
20px
Unterer Abstand:
20px
Linker Abstand:
auto
Rechter Abstand:
auto
Last updated