Erste Schritte / Schnellanleitung

In diesem Guide gehen wir die ersten Schritte durch, die erforderlich sind um eine neue CMS Seite zu erstellen. Als Voraussetzung muss das Plugin zunächst als Kauf- oder Testversion installiert werden.

Weitere Informationen hierzu finden Sie unter: Lizenzierung und Installation von lizenzpflichtigen Plugins

Zuweisung als Landingpage

Alternativ zu den Kategorie- und Artikelzuweisungen kann eine CMS Seite auch als Landingpage definiert werden. In diesem Fall muss eine Url definiert werden, unter der diese anschließend zur Verfügung stehen soll. 

In diesem Fall würde die Langingpage unter der folgenden Url zur Verfügung stehen:
http://[IHRE-SHOP-DOMAIN]/Testseite-zur-Demonstration-der-ersten-Schritte

Erstes Inhaltselement hinzufügen

Nachdem die Einstellungen / Zuweisungen gespeichert wurden, wechseln Sie auf den Tab-Reiter Inhaltselemente

Hier kann mit einem Klick auf die Schaltfläche Inhaltselement hinzufügen ein neues Inhaltselement hinzugefügt werden.

Als ersten Test fügen wir hierbei ein Inhaltselement des Typs Text mit Bild ein. Das Feld Beschreibung kann optional definiert werden. Hierbei handelt es sich um eine interne Beschreibung für die Baumansicht.

Nachdem das Inhaltselement über die Schaltfläche Speichern hinzugefügt wurde, kann die Bearbeitung über das Stift-Icon gestartet werden.

Anschließend definieren wir die Überschrift sowie einen Blindtext als Inhalt. Ist dies erledigt, speichern wir die Inhalte über die gleichnamige Schaltfläche.

Live-Vorschau der Seite starten

Im nächsten Schritt starten wir die Live-Vorschau, um den aktuellen Stand sowie die zukünftigen Veränderungen der Seite Live zu betrachten. Klicken Sie hierzu auf die Schaltfläche Live-Vorschau der Seite

In dem folgenden Dialog kann die Konfiguration der Vorschau vorgenommen werden. Diese belassen wir zunächst einmal so und klicken auf Vorschau starten. Sollten Sie nur mit einem Monitor arbeiten empfiehlt es sich stattdessen auf Vorschau in neuem Tab starten zu klicken.

Die Vorschau wird hierbei als Pop-up geöffnet, damit das Fenster - bei Verwendung von zwei Bildschirmen - neben dem Shopware Backend Browser-Fenster plaziert werden kann. Da Pop-ups von den meisten Browsern standardmäßig blockiert werden, muss diese Funktion - in den meisten Fällen - erst einmal für Ihre Shopdomain einmalig erlaubt werden.

Im Fall des Google Chrome Browsers reicht es bspw. aus, auf das Icon oben rechts in der Adresszeile zu klicken und hierrüber die Pop-ups für die Seite zu erlauben.

Über die Live-Vorschau können anschließend die verschiedenen Devicegrößen simuliert werden. Sobald ein neues Inhaltselement hinzugefügt oder ein bestehendes aktualisiert wird, findet eine automatische Aktualisierung der Live-Vorschau statt.

Darstellung per Spalten-Layout

Im Folgenden wollen wir das aktuelle Beispiel unter Verwendung des Struktur-Inhaltselements Spalten-Layout erweitern. Hierzu fügen wir dieses zunächst über die Schaltfläche Inhaltselement hinzufügen hinzu. 

Nachdem Sie das Inhaltselement Spalten-Layout hinzugefügt haben, erscheint auch dieses in der Baumansicht.

Bei diesem Inhaltselement handelt es sich um ein Element, was andere Elemente beinhalten kann. Da wir unser bereits hinzugefügtes "Bild mit Text"-Element über das Spalten-Layout darstellen wollen, verschieben wir dieses in das Spalten-Layout. Klicken Sie hierzu mit der linken Maustaste auf das "Text mit Bild"-Element und halten Sie die Maustaste gedrückt. Fahren Sie mit der Maus anschließend über das Spalten-Layout Element und lassen Sie Maustaste los.

Bestätigen Sie den folgenden Dialog

Zur besseren Verdeutlichung der Funktion des Spalten-Layouts duplizieren wir das "Text mit Bild"-Element zwei mal. Klicken Sie hierzu auf die auf das duplizieren-Icon und legen Sie entsprechend zwei Duplikate an.

Anschließend sollte Ihre Baumansicht wie folgt aussehen

Klicken Sie nun auf das Stift-Icon, um das Spalten-Layout zu bearbeiten

An dieser Stelle hinterlegen wir die folgende Beispiel-Konfiguration

Nachdem die Konfiguration gespeichert wurde, kann das folgende Verhalten in der Live-Vorschau nachgestellt werden.

Ansicht im Desktop und Tablet Landscape Größenbereich

Darstellung bei Tablet Portrait und Mobile Landscape

Darstellung mit einer Spalte im Mobile Portrait Größenbereich