Du siehst Dir gerade eine ältere Version dieses Artikels an!

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. 

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


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 wuaswä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 notwendigt. 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. 

 

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



Die Sektionseinstellungen öffnest Du, indem Du in der Vorschau links das Symbol für die jeweilige Sektion anklickst und dann auf das Symbol für die Sektions-Einstellungen klickst, welches sich direkt unter dem Plus Symbol für neue Blöcke befindet. 
Hier hinterlegst Du grundlegende Einstellungen für die aktuell ausgewählte Sektion.

Sektionsame (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. 
Sizing mode(3): Hier entscheidest Du ob der Inhalt auf die volle Breite gezogen werden soll oder zentriert bleiben soll. 
sw-cms.sidebar.mobile(4): Aktivierst Du hier die Option OptionHidden, wird der Inhalt der Sidebar in der mobilen Ansicht ausgeblendet. 
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 und Bildmodus (6): Anstatt einer Hintergrundfarbe kannst Du an dieser Stelle ein eigenes Hintergrundbild verwenden. Dies kann beispielsweise ein Muster sein oder ein Hintergrundbild zu einem Text.



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. 

War dieser Artikel hilfreich?