Ctrlk
Theme kaufenThemesSupport
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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

  • Hintergrundfarbe: -

  • Hintergrundbild: -

  • Bildmodus: -

  • CSS-Klassen: -

  • Oberer Abstand: 0px

  • Unterer Abstand: 0px

  • Linker Abstand: 0px

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

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

  • Hintergrundfarbe: #f1d2b6

  • Hintergrundbild: -

  • Bildmodus: -

  • CSS-Klassen: -

  • Oberer Abstand: 150px

  • Unterer Abstand: 150px

  • Linker Abstand: auto

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

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

  • Oberer Abstand: 40px

  • Unterer Abstand: 100px

  • Linker Abstand: auto

  • Rechter Abstand: auto

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

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

  • 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

  • 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

  • Hintergrundfarbe: -

  • Hintergrundbild: -

  • Bildmodus: -

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

  • Oberer Abstand: 100px

  • Unterer Abstand: 20px

  • Linker Abstand: auto

  • Rechter Abstand: auto

Der Inhalt des Text Elementes lautet:

Keine

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

  • Slider-Titel: -

  • Anzeigemodus: Beinhalten

  • Vertikale Ausrichtung: Oben

  • Layout-Typ: Minimaler Inhalt

  • Navigation: Ja

  • Automatischer Wechsel: Nein

  • Rahmen: Nein

  • Minimale Weite: 300px

Teaser-Text

Text > Teaser-Text

  • Hintergrundfarbe: -

  • Hintergrundbild: -

  • Bildmodus: -

  • CSS-Klassen: -

  • Oberer Abstand: 0px

  • Unterer Abstand: 100px

  • Linker Abstand: auto

  • Rechter Abstand: auto

Zur Darstellung des Buttons kann folgender Code verwendet werden:

Die Raute ist durch den Link zu ersetzen.

Keine

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

  • Mouse-Over Effekt: keine

  • Mouse-Out Effekt: keine

  • CSS-Klassen: -

  • 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

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

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

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

  • Oberer Abstand: 20px

  • Unterer Abstand: 20px

  • Linker Abstand: 100px

  • Rechter Abstand: 100px

  • 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

  • Hintergrundfarbe: -

  • Hintergrundbild: -

  • Bildmodus: -

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

  • Oberer Abstand: 100px

  • Unterer Abstand: 20px

  • Linker Abstand: auto

  • Rechter Abstand: auto

Der Inhalt des Text Elementes lautet:

Keine

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

  • Slider-Titel: -

  • Anzeigemodus: Beinhalten

  • Vertikale Ausrichtung: Oben

  • Layout-Typ: Minimaler Inhalt

  • Navigation: Ja

  • Automatischer Wechsel: Nein

  • Rahmen: Nein

  • Minimale Weite: 300px

Teaser-Text

Text > Teaser-Text

  • Hintergrundfarbe: -

  • Hintergrundbild: -

  • Bildmodus: -

  • CSS-Klassen: -

  • Oberer Abstand: 0px

  • Unterer Abstand: 100px

  • Linker Abstand: auto

  • Rechter Abstand: auto

Zur Darstellung des Buttons kann folgender Code verwendet werden:

Die Raute ist durch den Link zu ersetzen.

Keine

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.

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

  • Anzeigemodus: Standard

  • Vertikale Ausrichtung: Mitte

Inhalt:

Einstellungen:

  • Vertikale Ausrichtung: Mitte

Features

Elemente (Horizon) > Features

  • Hintergrundfarbe: -

  • Hintergrundbild: -

  • Bildmodus: -

  • CSS-Klassen: -

  • Oberer Abstand: 20px

  • Unterer Abstand: 20px

  • Linker Abstand: auto

  • Rechter Abstand: auto

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

Last updated