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:

Galerie Raster

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

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

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

Block Einstellungen

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

• CSS-Klassen: -

• Oberer Abstand: 0px

• Unterer Abstand: 0px

• Linker Abstand: 0px

• Rechter Abstand: 0px

Element Inhalt

Der Bild Text Slider besteht aus vier Bildern, welche optisch ineinander übergehen. Maße pro Bild ca. 1920x2000px

Element Einstellungen

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.

#1

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

• Hintergrund: transparent

• Vertikale Ausrichtung: Mitte

• Horizontale Ausrichtung: Links

• Minimale 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.

Block Einstellungen

• Hintergrundfarbe: #f1d2b6

• Hintergrundbild: -

• Bildmodus: -

• CSS-Klassen: -

• Oberer Abstand: 150px

• Unterer Abstand: 150px

• Linker Abstand: auto

• Rechter Abstand: auto

Spalte 1: Text Element

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.

Spalte 2: Text Element

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 &amp; 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: Text Element

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

Block Einstellungen

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

• CSS-Klassen: zen-animate slide-in-blurred-bottom

• Oberer Abstand: 40px

• Unterer Abstand: 100px

• Linker Abstand: auto

• Rechter Abstand: auto

Element Inhalt

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

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

Element Text

• Schriftart: Schriftart Überschriften

• Text Ausrichtung: Mitte

• Schriftgröße: 36px

• Schriftgewicht: Semi-bold - 600

• Farbe: #344854

• Hintergrund: -

• Vertikale Ausrichtung: Unten

• Horizontale Ausrichtung: Mitte

• Minimale Breite: -

• Maximale Breite: 300px

Element Bild

• Anzeigemodus: Strecken

• Vertikale 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 Inhalt

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

Teaser-Text

Text > Teaser-Text

Block Einstellungen

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

• CSS-Klassen: zen-animate slide-in-blurred-bottom

• Oberer Abstand: 100px

• Unterer Abstand: 20px

• Linker Abstand: auto

• Rechter Abstand: auto

Element Inhalt

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>

Element Einstellungen

Keine

Produkt-Slider

Commerce > Produkt-Slider

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 Inhalt

• Slider-Titel: -

Element Einstellungen

• Anzeigemodus: Beinhalten

• Vertikale Ausrichtung: Oben

• Layout-Typ: Minimaler Inhalt

• Navigation: Ja

• Automatischer Wechsel: Nein

• Rahmen: Nein

• Minimale Weite: 300px

Teaser-Text

Text > Teaser-Text

Block Einstellungen

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

• CSS-Klassen: -

• Oberer Abstand: 0px

• Unterer Abstand: 100px

• Linker Abstand: auto

• Rechter Abstand: auto

Element Inhalt

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.

Element Einstellungen

Keine

Sektion 3

Sektion-Einstellungen:

• CSS-Klassen: -

• Größenmodus: Zentrierter Inhalt

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

Teaser

Elemente (Horizon) > Teaser

Block Einstellungen

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

• CSS-Klassen: zen-animate slide-in-blurred-bottom

• Oberer Abstand: 20px

• Unterer Abstand: 20px

• Linker Abstand: auto

• Rechter Abstand: auto

Element Inhalt

• Mouse-Over Effekt: keine

• Mouse-Out Effekt: keine

• CSS-Klassen: -

Element Text

• Schriftart: Schriftart Text

• Text Ausrichtung: Mitte

• Schriftgröße: 46px

• Schriftgewicht: Semi-bold - 600

• Farbe: #981f0f

• Hintergrund: transparent

• Vertikale Ausrichtung: Mitte

• Horizontale Ausrichtung: Mitte

• Minimale Breite: -

• Maximale Breite: 750px

• Individuelle Abstände: 0px 16px 100px 16px

• Text Mouse-Over: Keine

Element Bild

• Anzeigemodus: Füllen

• Minimale Höhe: 770px

• Vertikale Ausrichtung: -

• Bild Mouse-Over: Bild Zoom

• Abgerundete Ecken: 20px 20px 20px 20px

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.

Block Einstellungen

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

• CSS-Klassen: zen-animate slide-in-blurred-bottom

• Oberer Abstand: 20px

• Unterer Abstand: 20px

• Linker Abstand: auto

• Rechter Abstand: auto

Spalte 1: Text Element

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.

Spalte 2: Text Element

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

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.

Block Einstellungen

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

• CSS-Klassen: zen-animate slide-in-blurred-bottom

• Oberer Abstand: 20px

• Unterer Abstand: 20px

• Linker Abstand: 100px

• Rechter Abstand: 100px

Element Bild

• Bild: maße ca. 540x324px

• Anzeigemodus: Strecken

• Vertikale Ausrichtung: Mitte

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

Block Einstellungen

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

• CSS-Klassen: zen-animate slide-in-blurred-bottom

• Oberer Abstand: 100px

• Unterer Abstand: 20px

• Linker Abstand: auto

• Rechter Abstand: auto

Element Inhalt

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>

Element Einstellungen

Keine

Produkt-Slider

Commerce > Produkt-Slider

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 Inhalt

• Slider-Titel: -

Element Einstellungen

• Anzeigemodus: Beinhalten

• Vertikale Ausrichtung: Oben

• Layout-Typ: Minimaler Inhalt

• Navigation: Ja

• Automatischer Wechsel: Nein

• Rahmen: Nein

• Minimale Weite: 300px

Teaser-Text

Text > Teaser-Text

Block Einstellungen

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

• CSS-Klassen: -

• Oberer Abstand: 0px

• Unterer Abstand: 100px

• Linker Abstand: auto

• Rechter Abstand: auto

Element Inhalt

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.

Element Einstellungen

Keine

Sektion 5

Sektion-Einstellungen:

• CSS-Klassen: -

• Größenmodus: Zentrierter Inhalt

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

Zwei Spalten 8/4

Spalten (Horizon) > Zwei Spalten 8/4

Block Einstellungen

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

Spalte 1: Bild Element

• Bild: Das Bild besteht optisch aus zwei versetzten Bildern. Maße ca. 1600x2000px

• Anzeigemodus: Standard

• Vertikale Ausrichtung: Mitte

Spalte 2: Text Element

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

Block Einstellungen

• Hintergrundfarbe: -

• Hintergrundbild: -

• Bildmodus: -

• CSS-Klassen: -

• Oberer Abstand: 20px

• Unterer Abstand: 20px

• Linker Abstand: auto

• Rechter Abstand: auto

Element Einstellungen

• Feature 1 - Icon: package-closed

• Feature 1 - Text: Free Shipping <small>From 1€ minimum order value</small>

• Feature 2 - Icon: history

• Feature 2 - Text: Free returnals <small>Don’t love it? Send it back, on us.</small>

• Feature 3 - Icon: shield

• Feature 3 - Text: Safe shopping <small>Trusted Shopping with SSL/TLS.</small>