Erlebniswelten

Den Menüpunkt Erlebniswelten findest Du unterhalb von Inhalte. In den Erlebniswelten kannst Du Content-Seiten wie Landingpages, Shopseiten und Kategorie-Layouts erstellen und diese zentral verwalten. 
Die erstellten Layouts bestehen aus Sektionen, in die einzelne Blöcke hinzugefügt werden, die wiederum aus einem oder mehreren Elementen wie Texten oder Bildern bestehen. 

Weitere Funktionen für die Erlebniswelten stellt die Erweiterung CMS-Erweiterungen bereit, welches Dir ab der Shopware Professional Edition zur Verfügung steht.

Übersicht

In der Übersicht findest Du alle bereits angelegten Layouts in einer Liste (1). Über das Suchfenster (2) kannst Du direkt nach einem erstellten Layout suchen. Im Dropdown Menü Sortieren nach: (3) kannst Du die Liste nach Erstelldatum oder Bearbeitungsdatum sortieren.
Auf der linken Seite im Menü Layouts (4) lassen sich die Layouts thematisch Filtern. Hier kannst Du beispielsweise die Anzeige auf alle Shopseiten oder alle Landingpages begrenzen. 
Über das Kontextmenü (5) in jedem Eintrag kannst Du das jeweilige Layout löschen, duplizieren oder eine Vorschau hinterlegen. Diese Vorschau dient dazu, die Layouts in dieser Übersicht schneller unterscheiden zu können. 
Mit dem Button Neues Layout anlegen (6) kannst Du ein neues Layout erstellen. 
Um ein Layout zu bearbeiten reicht es, auf den entsprechenden Eintrag zu klicken. 

Neues Layout anlegen

Beim Anlegen eines neuen Layouts werden zunächst einige Punkte für die Konfiguration über eine Schritt-für-Schritt-Abfrage definiert.

Layout Typ

Nachdem Du auf Neues Layoutanlegen geklickt hast, erhältst Du eine Auswahl, für welchen Seitentyp Du ein Layout gestalten möchtest. Dieser dient zum einen dazu, Deine Layouts in der Übersicht besser zu sortieren. Des Weiteren stehen Dir je nach Typ verschiedene Blöcke zur Verfügung. Aktuell kannst Du Shopseiten, Landigpages und Kategorieseiten erstellen.

• Shopseite:
  Als Shopseiten sind alle Service Seiten Deines Shops zu verstehen. Dies können beispielsweise die AGB Seite, die Versandbedingungen oder das Kontaktformular sein.
• Landingpage:
  Landingpages bieten Dir vielfältige Gestaltungs- und Marketingmöglichkeiten in Deinem Shop. Dies können Themenseiten sein, in denen sich Marketing betreiben lässt oder andere Seiten, auf denen Deine Kunden im Rahmen des Shopbesuchs landen können.
• Kategorieseite: 
  Die Kategorieseite beinhaltet automatisch bereits ein Produktlisting.
  Des Weiteren hast Du auf einer Kategorieseite die Möglichkeit, dynamisch Texte aus der entsprechenden Kategorie anzeigen zu lassen. Hierzu steht Dir in den Elementeinstellungen eines Text Elementes rechts über dem Editor die Datenzuordnung zur Verfügung.

Sektion

Wenn Du Dich für einen Typ entschieden hast, kannst Du auswählen, wie die Sektion des Layouts aufgebaut werden soll. Dir steht hierzu ein Layout mit einer Sidebar oder alternativ die volle Seitenbreite zur Verfügung.
Die Sidebar bietet sich z.B. an, um dort die Kategorienavigation oder Filter zu platzieren.
Bei der späteren Bearbeitung kannst Du weitere Sektionen hinzufügen, diese müssen nicht vom gleichen Layouttyp sein wie die initiale Auswahl.

Name

Auf der folgenden Seite vergibst Du den Namen für das zu erstellende Layout. Dieser sollte so gewählt werden, dass Du daran später direkt erkennen kannst, wofür das Layout verwendet werden soll.

Nachdem Du die Schritte für die Grundkonfiguration abgeschlossen hast, öffnet sich der Layout-Editor.

 

Layout-Editor

 

Im Layout-Editor erstellst Du neue Layouts, Du kannst aber auch bereits vorhandene Layouts öffnen und diese anpassen.
 

Der zentrale Bereich dient zur Bearbeitung (1) Deines Layouts.
Auf der rechten Seite befindet sich die Menüleiste, über die Du die einzelnen Funktionen zur Bearbeitung aufrufen kannst. Diese sind unterteilt in die Bereich Einstellungen (2), Blöcke (3) und Navigator (5). Je nachdem, ob Du einen bestimmten Block angeklickt hast oder die gesamte Sektion (9), gelangst Du über (4) zu den Block-Einstellungen oder den Sektion-Einstellungen.

Detaillierte Informationen erhältst Du im jeweiligen Abschnitt weiter unten.
Über die +-Button (6) und (7) im Editor hast Du die Möglichkeit, eine weitere Sektion hinzuzufügen. Diese Sektion muss nicht den gleichen Aufbau (mit oder ohne Sidebar) verwenden wie die bereits vorhandene Sektion. 
Über die Symbole (8) in der Leiste am oberen Bildschirmrand kannst Du zwischen den einzelnen Viewports wechseln und so erkennen, wie das Layout in den unterschiedlichen Ansichten dargestellt wird. Außerdem kannst Du dort in Listendarstellung der vorhandenen Elemente wechseln, um schneller den Inhalt der Elemente füllen zu können, ohne jedes Element einzeln öffnen zu müssen.
 

Einstellungen

In den Einstellungen kannst Du den bei der Anlage vergebenen Layout-Namen und nachträglich den Layout Typ ändern.

Blöcke

Im Menüpunkt Blöcke stehen dir diverse, vordefinierte Blöcke zur Verfügung, diese sind nach Kategorien gruppiert, welche Du über das Dropdown Menü auswählen kannst. Die Blöcke bestehen aus einem Element oder mehreren Elementen, die einzeln mit Inhalt gefüllt werden können. 
 

Blöcke hinzufügen
Du kannst sie per Drag&Drop in den Editor ziehen und an der gewünschten Stelle platzieren.

Element mit Inhalt füllen
Um den Inhalt eines Elements innerhalb eines Blocks anzupassen, fahre in der Vorschau mit der Maus über das Element. Dadurch werden im Element oben rechts 2 Symbole angezeigt. Das Zahnrad-Symbol (1) öffnet ein neues Fenster, in dem Du den Inhalt des Elements festlegen kannst.
Über das Symbol mit den 2 Pfeilen (2) kannst Du da Element austauschen, z.B. ein Textelement gegen ein Bild.
 

Je nachdem, welchen Block Du bearbeiten möchtest, gibt es verschiedene Einstellungsmöglichkeiten. 

Text
 

Bild

In den Elementeinstellungen eines Bildes kannst Du zunächst das Bild ändern, welches angezeigt werden soll. Bei Anzeigemodus entscheidest Du, wie das Bild im Block dargestellt werden soll. Bei Standard passt sich das Bild bis zu seiner nativen Größe an die umgebende Box an. Bei Füllen wird die Box mit dem Bild komplett gefüllt. Bei Strecken wird das Bild auf die Größe der Box gestreckt. 
Unter Link zu kannst Du eine URL angeben, auf die das Bild verlinken soll. Dies kann wahlweise im gleichen Tab oder in einem neuen Tab geschehen. 
 

Eine Größenbegrenzung hat das Bild Element nicht. Du solltest aber generell darauf achten, dass das Bild aus Performance Gründen nicht zu groß ist. In den Demodaten verwenden wir beispielsweise ein ganzflächiges Bild mit einer Auflösung von 1280x528px.
Die Bild-Breite ist im Standard-Template auf maximal 1320 Pixel bei FullHD-Auflösung (und höher) festgelegt und wird bei kleineren Auflösungen dynamisch herunterskaliert.

Neben den hier erläuterten grundlegenden Einstellungen der meisten Bild-Elemente kannst Du bei Slidern und Galerien tiefergreifende Einstellungen vornehmen. Diese erläutern wir Dir nachfolgend.

Slider

• Anzeigemodus
  • Standard: Das Bild wird komplett angezeigt. Die Höhe des gesamten Slider-Elements ist daher dynamisch und passt sich automatisch entsprechend an. Daher ist es zu empfehlen, dass alle Bilder im Slider das gleiche Seitenverhältnis aufweisen, da sonst die Elemente unterhalb des Sliders "hoch- und runterspringen".
  • Füllen: Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt. 
  • Beinhalten: Die Höhe des Elements wird automatisch anhand des höchsten hinterlegten Bildes ermittelt. Im Gegensatz zum Modus Standard wird diese aber nicht beim Wechsel zwischen verschiedenen Bildern angepasst. Die Ausrichtung von niedrigeren Bildern kannst Du über den Punkt Vertikale Ausrichtung definieren.
• Minimale Höhe: Diese Einstellung ist nur für den Anzeigemodus Füllen verfügbar. Es ist dann erforderlich, eine Eingabe vorzunehmen, da sonst keine Bilder angezeigt werden. Die Angabe wird in Pixeln als Ganzzahl vorgenommen und zusätzlich wird nach der Zahl direkt "px" (als Abkürzung für Pixel) angehängt. Die Eingabe könnte also z.B. so aussehen: 500px
• Vertikale Ausrichtung: Diese Einstellung wird beim Anzeigemodus Beinhalten verfügbar und legt fest, wie die Bilder innerhalb des Slider-Elements platziert werden soll. Bei kleineren Bildern werden entsprechende freie Flächen angezeigt.
• Pfeile-Navigation: Fügt Pfeile zum durchklicken der Bilder hinzu. Du kannst festlegen, ob die Pfeile auf oder neben dem angezeigten Bild dargestellt werden sollen oder diese auch ausblenden.
• Punkte-Navigation: Alternativ (oder zusätzlich) zu der Pfeilnavigation kannst Du die Punkte-Navigation verwenden. Diese stellt für jedes hinterlegte Bild einen kleinen Punkt dar, über den Du direkt das jeweilige Bild aufrufen kannst.
  Die Darstellung ist auf oder unter dem Bild möglich.

Außerdem ist es möglich, nachdem Du Bilder dem Slider hinzugefügt hast, für jedes Bild eine URL zu hinterlegen, die beim Klick auf das Bild aufgerufen wird. Optional kann der Aufruf in einem neuen Browser-Tab erfolgen.


Galerie

• Anzeigemodus
  • Standard: Das Bild wird komplett angezeigt. Die Höhe des gesamten Slider-Elements ist daher dynamisch und passt sich automatisch entsprechend an. Daher ist es zu empfehlen, dass alle Bilder im Slider das gleiche Seitenverhältnis aufweisen, da sonst die Elemente unterhalb des Sliders "hoch- und runterspringen".
  • Füllen: Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt. 
  • Beinhalten: Die Höhe des Elements wird automatisch anhand des höchsten hinterlegten Bildes ermittelt. Im Gegensatz zum Modus Standard wird diese aber nicht beim Wechsel zwischen verschiedenen Bildern angepasst. Die Ausrichtung von niedrigeren Bildern kannst Du über den Punkt Vertikale Ausrichtung definieren.
• Minimale Höhe: Diese Einstellung ist nur für den Anzeigemodus Füllen verfügbar. Es ist dann erforderlich, eine Eingabe vorzunehmen, da sonst keine Bilder angezeigt werden. Die Angabe wird in Pixeln als Ganzzahl vorgenommen und zusätzlich wird nach der Zahl direkt "px" (als Abkürzung für Pixel) angehängt. Die Eingabe könnte also z.B. so aussehen: 500px
• Vertikale Ausrichtung: Diese Einstellung dient beim Anzeigemodus Beinhalten verfügbar und legt fest, wie die Bilder innerhalb des Slider-Elements platziert werden soll. Bei kleineren Bildern werden entsprechende freie Flächen angezeigt.
• Pfeile-Navigation: Fügt Pfeile zum durchklicken der Bilder hinzu. Du kannst festlegen, ob die Pfeile auf oder neben dem angezeigten Bild dargestellt werden sollen oder diese auch ausblenden.
• Punkte-Navigation: Alternativ (oder zusätzlich) zu der Pfeilnavigation kannst Du die Punkte-Navigation verwenden. Diese stellt für jedes hinterlegte Bild einen kleinen Punkt dar, über den Du direkt das jeweilige Bild aufrufen kannst.
  Die Darstellung ist auf oder unter dem Bild möglich.
• Vorschau-Navigation: Lege fest, ob die kleinen Bilder für die Galerie-Vorschau links neben dem Bild oder unterhalb angezeigt werden soll.
• Zoom: Wenn Du diese Option aktivierst, wird eine vergrößerte Darstellung des Bildes angezeigt, wenn der Shopbesucher mit der Maus über das Bild fährt.
• Vollbild-Galerie: Ermöglicht es mit einem Klick auf das Bild die Galerie vollflächig im Browserfenster anzuzeigen.

Commerce

In den Elementeinstellungen für Produktlisting-Elemente kannst Du entscheiden, in welchem Layout-Typ das Produkt präsentiert werden soll. Du kannst das Produkt in der Standard Ansicht präsentieren, mit großem Bild oder mit minimalem Text.

Video
Die Elementeinstellungen zu einem Video hängen davon ab, ob Du ein YouTube Video oder ein Vimeo Video hinterlegt hast. 

YouTube
 

Nachdem Du ein Video Link hinterlegt hast, kannst Du noch einige Einstellungen treffen, wie genau das Video angezeigt werden soll. Aktivierst Du den Erweiterten Datenschutzmodus, werden von YouTube keine Informationen von den Besuchern gespeichert, bis sie sich das Video ansehen. Zudem kannst Du per Start und Endzeit noch genau auswählen, welcher Ausschnitt des Videos angezeigt werden soll.

Vimeo
 

Für Vimeo Videos kannst Du kannst Du zudem auswählen, in welcher Farbe die Navigation angezeigt werden soll und welche Informationen vom Video Ersteller angezeigt werden sollen. 

Sidebar
Für die Sidebar Blöcke sind keine eigenen Einstellungen notwendig. Sie werden automatisch mit Inhalt gefüllt.

Formular

Für den Formular Block kannst Du in den Elementeinstellungen zunächst das Formular auswählen, welches angezeigt werden soll. Außerdem kannst Du ein Titel und einen Bestätigungstext hinterlegen.
Im Reiter Einstellungen hinterlegst Du die Empfänger Adressen, welche das ausgefüllte Formular erhalten.

Das Kontaktformular wird nach dem Ausfüllen durch einen Shopbesucher per E-Mail an den Shopbetreiber gesandt. Für diese E-Mail steht in den E-Mail-Vorlagen eine entsprechende Vorlage mit dem Namen Kontaktformular bereit, welche angepasst werden kann. 

Produktlisting
Wenn Du beim Erstellen eines Layouts den Layout-Typ Kategorieseite auswählst, enthält Dein Layout automatisch einen Produkt Listing Block. Hier werden im Standard die Produkte der jeweiligen Kategorie angezeigt.

In den Einstellungen dieses Blocks kannst Du im Reiter Inhalt zwischen den Darstellungen Standard, große Bilder und minimaler Inhalt auswählen. Welche Unterschiede diese Darstellungen haben erfährst Du hier. 

Im Reiter Sortierungen kannst Du einstellen, wie die Produkte aus dem Produktlisting sortiert werden sollen. 

Produktsortierung anzeigen (1): Hier kannst Du die Auswahl von Sortierungen für dieses Produktlisting aktivieren oder deaktivieren. 
Eigene Sortierungen verwenden (2): Wenn Du keine eigenen Sortierungen verwendest, werden die Standardsortierungen verwendet, die Du im Bereich Einstellungen>Shop>Produkte ausgewählt hast.  
Standard Sortierung (3): Wenn eigene Sortierungen (2) aktiviert wurde, kannst Du hier die Sortierung auswählen, nach der das Produktlisting standardmäßig sortiert sein soll. Die Sortierungen kannst Du unter Einstellungen>Shop>Produkte anlegen und bearbeiten. 
Produktsortierungen (4): Hier kannst Du alle Sortierungen auswählen, die der Kunde in dem Produktlisting auswählen können soll. Die Sortierungen werden im Frontend dann als Dropdown Menü angezeigt. 
Priorität (5): Klicke in der Liste der ausgewählten Sortier-Optionen doppelt auf die Priorität um diese zu ändern. Im Frontend werden die verfügbaren Sortier-Optionen in der Reihenfolge der Priorität beginnend mit der höchsten angezeigt. 
Löschen (6): Über das Dropdown Menü auf der rechten Seite kannst Du die ausgewählte Sortier-Option wieder aus der Liste entfernen.

Block-Einstellungen

Die Blockeinstellungen öffnest Du, indem Du in der Vorschau einen Block anklickst und dann auf das Symbol für die Blockeinstellungen klickst, welches sich direkt unter dem Plus Symbol für neue Blöcke befindet. 
Hier hinterlegst Du grundlegende Einstellungen für den aktuell ausgewählten Block.

Name (1): Dieser Name dient dazu, diesen Block besser unterscheiden zu können. er wird beispielsweise im Navigator angezeigt. 
Hintergrundfarbe (2): Hier wählst Du die Hintergrundfarbe des Blockes. Um einheitliche Farbgebungen zu realisieren kannst Du die Farbe auch anhand des Hexadezimalwertes angeben. 
Hintergrundbild (3): Anstatt einer Hintergrundfarbe kannst Du an dieser Stelle ein eigenes Hintergrundbild verwenden. Dies kann beispielsweise ein Muster sein oder ein Hintergrundbild zu einem Text. 
Bildmodus (4): Wenn Du ein Hintergrundbild hinterlegt hast, kannst Du hier auswählen, ob es den Block ausfüllen soll, oder sich das Bild an dem Block ausrichten soll. 
Layout settings (5): In den Layout settings bestimmst Du den Abstand der Elemente eines Blocks zu dessen Rändern und kannst zusätzlich eine eigene CSS-Klasse einbinden.

Sektion-Einstellungen

Sektionsname (1): Dieser Name dient dazu, diese Sektion besser unterscheiden zu können. er wird beispielsweise im Navigator angezeigt. 
CSS-Klassen(2): Du kannst eine oder mehrere, mit Leerzeichen getrennte, CSS Klassen hinzufügen. 
Größenmodus(3): Hier entscheidest Du ob der Inhalt auf die volle Breite gezogen werden soll oder zentriert bleiben soll. 
Mobiles Sidebar-Verhalten(4): Aktivierst Du hier die Option Nicht angezeigt, wird der Inhalt der Sidebar in der mobilen Ansicht ausgeblendet. Info: Diese Einstellungen steht nur für Layouts mit Sidebar zur Verfügung.
Hintergrundfarbe (5): Hier wählst Du die Hintergrundfarbe der Sektion. Um einheitliche Farbgebungen zu realisieren kannst Du die Farbe auch anhand des Hexadezimalwertes angeben. 
Hintergrundbild (6) und Bildmodus (7): Anstatt einer Hintergrundfarbe kannst Du an dieser Stelle ein eigenes Hintergrundbild verwenden. Dies kann beispielsweise ein Muster sein oder ein Hintergrundbild zu einem Text.

Navigator

Im Navigator siehst Du eine Übersicht aller Blöcke anhand ihres Namens. Durch Drag & Drop kannst Du die Blöcke nach oben und unten verschieben und somit die Reihenfolge der Blöcke verändern. 
Mit dem Plus Symbol kannst Du unterhalb des jeweiligen Blockes eine Kopie des Blockes erzeugen. Über das Papierkorb Symbol kannst Du den jeweiligen Block entfernen. 

Erlebniswelten einer Seite in der Storefront zuweisen

Es gibt verschiedene Möglichkeiten, eine Erlebniswelt in der Storefront zu verwenden.

Shopseiten

Erlebniswelten werden dazu verwendet, um Shopseiten wie AGB, Impressum usw. darzustellen. Die Zuweisung erfolgt unter Einstellungen > Shops > Stammdaten im Bereich Shopseiten.
 

Kategorien

Du kannst Erlebniswelten in den Kategorien verwenden, um das Layout des Kategorielistings anzupassen. Zum anderen ist es aber auch möglich, eine Landingpage zuzuweisen.
 

Landingpage
Eine Erlebniswelt vom Typ Landingpage enthält keine fest integriertes Listingelement, um Produkte einzubinden.
Soll es nicht möglich sein, die Landingpage aus dem normalen Navigationsmenü aufzurufen, aktivere den Schalter In der Navigation ausblenden im Bereich Menü-Einstellungen.
Die Landingpage ist dann über die URL der Kategorie, der die Erlebniswelt zugewiesen ist, aufrufbar.