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
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:
Allgemein > Grundlayout > Header (mobil)
Einzeiliger Header
Allgemein > Produktbilder > Breite Artikelbild
1890*
Allgemein > Produktbilder > Höhe Artikelbild
2400*
Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links
true
Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis
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
Die Sektion besteht aus einem Slider, einem Textbereich und einem dreispaltigen Teaser Element.
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:
0pxLinker Abstand:
0pxRechter Abstand:
0px
Der Bild Text Slider besteht aus vier Bildern, welche optisch ineinander übergehen. Maße pro Bild ca. 1920x2000px
Der Bild Text Slider besteht aus vier Bildern. Die Besonderheit in den Einstellungen (1) des Sliders ist der eingestellte Modus (2). Im Karussell-Modus (2) werden zwei Slider-Elemente (3) gleichzeitig angezeigt. Der Abstand (4) zwischen den einzelnen Bilder beträgt 0px, sodass die Bilder optisch miteinander verschmelzen.
Die Einstellungen von Slide #1 und #3 sind bis auf den Text identischt. In den Slides #2 und #4 wurden keine Einstellungen getätigt.
Im Text-Editor des Slides wurde der Text und der Button mit ein paar Styles und Klassen aus dem zugrunde liegenden Framework aufgepeppt:
<h3 class="display-3 font-weight-bold">Create your natural beautiful online shop</h3>
<p class="lead" style="max-width: 460px;">With Theme Horizon Demo 2 you can create your individual beautiful online shop with just a few clicks.</p>
<a rel="noopener" target="_blank" href="#" class="btn btn-buy">Jetzt kostenlos testen</a>Farbe:
#244143Hintergrund:
transparentVertikale Ausrichtung:
MitteHorizontale Ausrichtung:
LinksMinimale Breite:
-Maximale Breite:
90%
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:
#f1d2b6Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
-Oberer Abstand:
150pxUnterer Abstand:
150pxLinker Abstand:
autoRechter Abstand:
auto
Spalte 1 wird mit einem einfachen Text-Element gefüllt und dessen Inhalt geleert. Wir benötigen das Element nur als Platzhalter, damit der mittlere Text nicht zu breit wird.
Das Text-Element hat folgenden Inhalt:
<div style="text-align: center;">
<font color="#981f0f">Lorel ipsum dolor</font>
</div>
<h3 class="display-4 font-weight-bold" style="text-align: center;">
<font color="#981f0f">Organic & Natural Body Oil that makes you a true beauty!</font>
</h3>
<div style="text-align: center;">
<a href="#" class="btn btn-secondary">Shop Now</a>
</div>Spalte 3 wird mit einem einfachen Text-Element gefüllt und dessen Inhalt geleert. Wir benötigen das Element nur als Platzhalter, damit der mittlere Text nicht zu breit wird.
Teaser - Drei Spalten
Elemente (Horizon) > Teaser - Drei Spalten
Hintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
zen-animate slide-in-blurred-bottomOberer Abstand:
40pxUnterer Abstand:
100pxLinker Abstand:
autoRechter Abstand:
auto
Mouse-Over Effekt:
slide-in-blurred-bottomMouse-Out Effekt:
slide-out-blurred-bottom
Schriftart:
Schriftart ÜberschriftenText Ausrichtung:
MitteSchriftgröße:
36pxSchriftgewicht:
Semi-bold - 600Farbe:
#344854Hintergrund:
-Vertikale Ausrichtung:
UntenHorizontale Ausrichtung:
MitteMinimale Breite:
-Maximale Breite:
300px
Anzeigemodus:
StreckenVertikale Ausrichtung:
-Bild Mouse-Over:
Bild Zoom
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 InhaltHintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-
Teaser-Text
Text > Teaser-Text
Hintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
zen-animate slide-in-blurred-bottomOberer Abstand:
100pxUnterer Abstand:
20pxLinker Abstand:
autoRechter Abstand:
auto
Der Inhalt des Text Elementes lautet:
<h2 style="text-align: center; font-size: 36px;">Top sellers</h2>
<p style="text-align: center;">
Lorem ipsum dolor sit amet.
</p>Keine
Produkt-Slider
Commerce > Produkt-Slider
Hintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
zen-animate fade-in-topOberer Abstand:
20pxUnterer Abstand:
20pxLinker Abstand:
autoRechter Abstand:
auto
Slider-Titel:
-
Anzeigemodus:
BeinhaltenVertikale Ausrichtung:
ObenLayout-Typ:
Minimaler InhaltNavigation:
JaAutomatischer Wechsel:
NeinRahmen:
NeinMinimale Weite:
300px
Teaser-Text
Text > Teaser-Text
Hintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
-Oberer Abstand:
0pxUnterer Abstand:
100pxLinker Abstand:
autoRechter Abstand:
auto
Zur Darstellung des Buttons kann folgender Code verwendet werden:
<div style="text-align: center;">
<a class="btn btn-buy" href="#">Alle ansehen</a>
</div>Die Raute ist durch den Link zu ersetzen.
Keine
Sektion 3
Sektion-Einstellungen:
CSS-Klassen:
-Größenmodus:
Zentrierter InhaltHintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-
Teaser
Elemente (Horizon) > Teaser
Hintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
zen-animate slide-in-blurred-bottomOberer Abstand:
20pxUnterer Abstand:
20pxLinker Abstand:
autoRechter Abstand:
auto
Mouse-Over Effekt:
keineMouse-Out Effekt:
keineCSS-Klassen:
-
Schriftart:
Schriftart TextText Ausrichtung:
MitteSchriftgröße:
46pxSchriftgewicht:
Semi-bold - 600Farbe:
#981f0fHintergrund:
transparentVertikale Ausrichtung:
MitteHorizontale Ausrichtung:
MitteMinimale Breite:
-Maximale Breite:
750pxIndividuelle Abstände:
0px16px100px16pxText Mouse-Over:
Keine
Anzeigemodus:
FüllenMinimale Höhe:
770pxVertikale Ausrichtung:
-Bild Mouse-Over:
Bild ZoomAbgerundete Ecken:
20px20px20px20px
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-bottomOberer Abstand:
20pxUnterer Abstand:
20pxLinker Abstand:
autoRechter Abstand:
auto
Spalte 1 wird mit einem einfachen Text-Element gefüllt und dessen Inhalt geleert. Wir benötigen das Element nur als Platzhalter, damit der mittlere Text nicht zu breit wird.
Das Text-Element hat folgenden Inhalt:
<p class="lead text-center" style="font-size: 24px">"Millions of combinations, meaning you create a totally unique online shop exactly the way you want it."</p>Spalte 3 wird mit einem einfachen Text-Element gefüllt und dessen Inhalt geleert. Wir benötigen das Element nur als Platzhalter, damit der mittlere Text nicht zu breit wird.
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-bottomOberer Abstand:
20pxUnterer Abstand:
20pxLinker Abstand:
100pxRechter Abstand:
100px
Bild: maße ca.
540x324pxAnzeigemodus:
StreckenVertikale Ausrichtung:
Mitte
Alle sechs Bild-Elemente haben identische Einstellungen
Sektion 4
Sektion-Einstellungen:
CSS-Klassen:
-Größenmodus:
Zentrierter InhaltHintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-
Teaser-Text
Text > Teaser-Text
Hintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
zen-animate slide-in-blurred-bottomOberer Abstand:
100pxUnterer Abstand:
20pxLinker Abstand:
autoRechter Abstand:
auto
Der Inhalt des Text Elementes lautet:
<h2 style="text-align: center; font-size: 36px;">Recent Arrivals</h2>
<p style="text-align: center;">
Lorem ipsum dolor sit amet.
</p>Keine
Produkt-Slider
Commerce > Produkt-Slider
Hintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
zen-animate fade-in-topOberer Abstand:
20pxUnterer Abstand:
20pxLinker Abstand:
autoRechter Abstand:
auto
Slider-Titel:
-
Anzeigemodus:
BeinhaltenVertikale Ausrichtung:
ObenLayout-Typ:
Minimaler InhaltNavigation:
JaAutomatischer Wechsel:
NeinRahmen:
NeinMinimale Weite:
300px
Teaser-Text
Text > Teaser-Text
Hintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
-Oberer Abstand:
0pxUnterer Abstand:
100pxLinker Abstand:
autoRechter Abstand:
auto
Zur Darstellung des Buttons kann folgender Code verwendet werden:
<div style="text-align: center;">
<a class="btn btn-buy" href="#">Alle ansehen</a>
</div>Die Raute ist durch den Link zu ersetzen.
Keine
Sektion 5
Sektion-Einstellungen:
CSS-Klassen:
-Größenmodus:
Zentrierter InhaltHintergrundfarbe:
-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-5Oberer Abstand:
100pxUnterer Abstand:
100pxLinker Abstand:
100pxRechter 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.
Bild: Das Bild besteht optisch aus zwei versetzten Bildern. Maße ca.
1600x2000pxAnzeigemodus:
StandardVertikale Ausrichtung:
Mitte
Inhalt:
<p class="lead text-center" style="font-size: 24px">"Millions of combinations, meaning you create a totally unique online shop exactly the way you want it."</p>Einstellungen:
Vertikale Ausrichtung:
Mitte
Features
Elemente (Horizon) > Features
Hintergrundfarbe:
-Hintergrundbild:
-Bildmodus:
-CSS-Klassen:
-Oberer Abstand:
20pxUnterer Abstand:
20pxLinker Abstand:
autoRechter Abstand:
auto
Feature 1 - Icon:
package-closedFeature 1 - Text:
Free Shipping <small>From 1€ minimum order value</small>Feature 2 - Icon:
historyFeature 2 - Text:
Free returnals <small>Don’t love it? Send it back, on us.</small>Feature 3 - Icon:
shieldFeature 3 - Text:
Safe shopping <small>Trusted Shopping with SSL/TLS.</small>
Last updated
Was this helpful?