< SHOPWARE 6 FRONTEND EDITING />

Lernen Sie hier mit dem Frontend Editor umzugehen

Diese Anleitung beschreibt Schritt für Schritt, wie Seiten mit Hilfe des Frontend Editors mit Inhalten befüllt. Mit jedem Schritt lernen Sie eine Funktion des Frontend Editors kennen. Arbeiten Sie sich durch diese Anleitung durch, um mit allen Funktionen des Frontend Editors vertraut zu werden.

Stellen Sie vor dem Start sicher, dass das Frontend Editing Plugin in Ihrem Shopware korrekt installiert und aktiviert ist.

Wenn Sie Entwickler sind und technische Erweiterungen vornehmen möchten, lesen Sie bitte das Entwicklerhandbuch.

< Frontend Editor />

Der Frontend Editor ist über die URL "/frontend-editing" in Ihrem Storefront erreichbar (z.B. https://www.storefront.example/frontend-editing). Loggen Sie sich mit den Daten ein, die Sie auch für die Shopware Administration verwenden.

Innerhalb des Frontend Editors können Sie, wie mit einem herkömmlichen Browser, durch Ihr Shopware Frontend navigieren.

Sobald die Startseite von Ihrem Shop im Frontend Editor geladen ist, sehen sie zwei grau umrahmte rechteckige Bereiche. Diese Bereiche sind Inhaltsbereiche, die mit Inhaltselementen befüllt werden können.

Achtung: Sollten Sie die Inhaltsbereiche nicht sehen, liegt es gegebenenfalls an Ihrem Shopware-Theme, welches nicht die standardmäßigen Shopware-Twig-Blöcke verwendet. Lassen Sie das Theme von Ihrem Entwickler entsprechend anpassen. Technische Informationen finden Sie im Entwicklerhandbuch.

Neben der Startseite finden Sie diese Inhaltsbereiche standardmäßig auch auf Kategorieseiten und Produktdetailseiten.

< Inhaltselemente />

Um ein neues Inhaltselement zu erstellen, klicken Sie unten links auf "Inhaltselemente". Es erscheint eine Liste von allen Inhaltselementen, die Ihnen zur Verfügung stehen. Drücken Sie mit der linken Maustaste auf das Text-Element und halten Sie dabei die Maustaste gedrückt. Die Liste mit den Inhaltselementen verschwindet und Sie können nun das Element in einen der Inhaltsbereiche schieben. Fahren Sie dafür einfach über einen Inhaltsbereich, sodass er sich blau verfärbt. Der grüne Marker zeigt Ihnen dabei an, an welcher Position das Inhaltselement platziert wird. Lassen Sie die Maustaste los, um das Text-Element zu platzieren.

Tipp: Auf der Startseite und den Kategorieseiten finden Sie standardmäßig zwei Inhaltsbereiche. Wenn Sie über die Shopware6-Administration Erlebniswelten eingepflegen, erscheint der Inhalt der Erlebniswelten zwischen diesen beiden Inhaltsbereichen. Auf diese Weise können Sie bestimmen, ob die Inhaltselemente vor oder nach den Erlebniswelten ausgegeben werden sollen.

Um den Text des Text-Elements zu bearbeiten, klicken Sie doppelt auf das platzierte Text-Element. Der Text lässt sich nun verändern und formatieren. Um den Textbearbeitungsmodus zu verlassen, klicken Sie oben rechts auf das Hakensymbol oder klicken Sie einfach auf einen beliebigen Bereich außerhalb des Text-Elements.

Jedes Inhaltselement hat verschiedene Konfigurationsmöglichkeiten. Beim Text-Element lässt sich beispielsweise die Textfarbe konfigurieren. Klicken Sie dazu, diesmal mit einem einfachen Klick, auf das platzierte Text-Element. Es erscheint das Konfigurationsmenü, wo Sie eine der vorgegebenen Textfarben auswählen können.

< Breakpoints />

Innerhalb des Frontend Editors können Sie jederzeit zwischen verschiedenen Breakpoints umschalten. So können Sie jederzeit überprüfen, wie Ihre Inhaltsseite beispielsweise auf Smartphones oder Tablets aussehen würde. Unterhalb der Adresszeile des Frontend Editors finden Sie für jeden Breakpoint einen Tab den Sie anklicken können, um zwischen den verschiedenen Breakpoints zu wechseln. Der Tab "Auto" stellt keinen Breakpoint dar, sondern passt die Vorschau automatisch auf die Fenstergröße Ihres Browsers an.

Sie können das Verhalten von Inhaltselementen für jeden Breakpoint individuell konfigurieren. Klicken Sie dazu erneut mit einem einfachen Klick auf das platzierte Text-Element. Im Konfigurationsmenü sehen Sie ganz unten ebenfalls zu jedem Breakpoint einen Tab. Scrollen Sie bis zum Tab "Mobile Portrait" und klicken Sie diesen an. Aktivieren Sie nun innerhalb des Bereichs "Sichtbarkeit" die Checkbox "Versteckt" und schließen Sie das Konfigurationsmenü. Schalten Sie im Frontend Editor zwischen den verschiedenen Breakpoints um. Sie werden sehen, dass das Text-Element im Breakpoint "Mobile Portrait" nicht mehr ausgegeben wird.

Je nach Inhaltselement, stehen Ihnen verschiedene breakpointspezifische Konfigurationsmöglichkeiten zur Verfügung.

< Spaltenlayout />

Mit dem Spalten-Element lassen sich Inhaltselemente mehrspaltig anordnen. So ist es möglich zwei, drei, vier oder sechs Inhaltselemente nebeneinander anzuordnen.

Platzieren Sie ein neues Spalten-Element in einem Inhaltsbereich. Jetzt können Sie sehen, dass das Spalten-Element zwei eigene Inhaltsbereiche beinhaltet. Schieben Sie in die rechte Spalte ein Text-Element und in die linke Spalte ein Bild-Element. Um den Abstand zwischen den beiden Elementen zu entfernen, klicken Sie einmal auf das platzierte Spalten-Element, um zum Konfigurationsmenü zu gelangen. Wählen Sie nun aus dem Bereich "Spaltenabstände" die Option "Keine" aus.

< Bilder und Schnellvorschau />

Neu platzierte Bild-Elemente sind mit einem Platzhalterbild vorbefüllt. Um dieses zu ersetzen, klicken Sie einmal auf das vorhin platzierte Bild-Element, um ins Konfigurationsmenü zu gelangen. Mit einem Klick auf die große Schaltfläche unter "Bild" gelangen Sie zum Media Manager. Hier können Sie aus Ihren Shopware Medien ein Bild auswählen. Klicken Sie auf ein Verzeichnis und wählen Sie ein Bild Ihrer Wahl. Das Platzhalterbild wird nun durch das ausgewählte Bild ersetzt.

Über den Media Manager lassen sich Bilder auch direkt hochladen.

Gut zu wissen: Die Bilder werden abhängig von Ihrer Shopware Thumbnailkonfiguration gerätespezifisch geladen. Wird die Seite beispielsweise über ein Smartphone aufgerufen, wird das kleinstmögliche Thumbnail geladen, um Datenvolumen zu sparen. Auf Geräten mit großen Bildschirmen wird das größtmöglichste Thumbnail geladen.

Sollten die Bilder verpixelt/verschwommen dargestellt werden, müssen Sie für das entsprechende Album die Thumbnailkonfiguration so anpassen, dass für jede Bildschirmauflösung ausreichend große Thumbnails generiert werden (z.B. 320x320, 640x640, 1280x1280 und 1920x1920). Mehr über die Shopware-Thumbnailkonfiguration erfahren Sie hier.

Um einen genauen Eindruck Ihrer bisher gebauten Seite zu bekommen, klicken Sie oben rechts auf das Augensymbol. Dieses aktiviert die Schnellvorschau und blendet sämtliche Hilfslinien aus. Wenn die Schnellvorschau aktiviert ist, sehen Sie den tatsächlichen Zustand Ihrer Seite. Inhaltselemente lassen sich in der Schnellvorschau nicht umkonfigurieren und verschieben, sondern verhalten sich genauso, wie sie sich später auch im Frontend verhalten werden. Klicken Sie erneut auf das Augensymbol, um zurück in den Bearbeitungsmodus zu wechseln.

< Responsive Design />

Das Spaltenlayout-Element ermöglicht es Ihnen Ihre Inhaltselemente responsiv zu gestalten.
Klicken Sie dazu auf das platzierte Spaltenlayout-Element, um das Konfigurationsmenü zu öffnen. Wechseln Sie unten im Konfigurationsmenü zum Tab "Mobile Landscape". Wählen Sie unter "Spalten" die Option "1 Spalte (100%)" aus. Jetzt wird das Spaltenlayout-Element für alle Breakpoints, die kleiner als "Mobile Landscape" sind, einspaltig dargestellt. Klicken Sie sich im Frontend Editor durch die Breakpoints, um das Verhalten des Spaltenelements zu testen.

< Button-Element />

Auch Call-to-Action-Buttons lassen sich kinderleicht anlegen. Ziehen Sie ein neues Button-Element in einen Inhaltsbereich. Mit einem Doppelklick lässt sich der Text des Buttons anpassen. Im Konfigurationsmenü können Sie das Linkziel und die Optik des Buttons anpassen.

< Speichern und Seitenvorschau />

Klicken Sie im Frontend Editor oben rechts auf das Symbol mit den drei Punkten, um das Aktionsmenü zu öffnen. Klicken Sie anschließend auf "Speichern".

Info: Immer wenn Sie speichern ohne zu veröffentlichen, wirken sich Ihre Änderungen nicht im Shopware Frontend aus.

Um über das Frontend einen echten Eindruck von Ihrem aktuellen Arbeitsstand zu bekommen, klicken Sie im Aktionsmenü auf "URL in neuem Tab öffnen".

Da Sie Ihren Arbeitsstand noch nicht veröffentlicht haben, sehen Sie im Frontend nun eine Seitenvorschau von Ihrem zuletzt gespeicherten Arbeitsstand. Über die Leiste im unteren Seitenrand, lässt sich die Seitenvorschau deaktivieren. Wenn Sie die Seitenvorschau deaktivieren, sehen Sie den tatsächlichen Zustand der Seite, den aktuell auch Ihre Shopkunden sehen.

< Speichern und veröffentlichen />

Ihren aktuellen Arbeitsstand veröffentlichen Sie im Aktionsmenü mit einem Klick auf "Speichern und veröffentlichen". Öffnen Sie das Aktionsmenü erneut und klicken Sie auf "URL in neuem Tab öffnen".

Dadurch dass Sie Ihre Inhalte veröffentlicht haben, landen Sie nun nicht mehr in der Seitenvorschau, sondern sehen jetzt den tatsächlichen Zustand der Seite, der nun für jeden sichtbar ist.

< Versionierung />

Jedes mal wenn Sie speichern, wird eine neue Version von Ihrem Arbeitsstand erstellt. Das bedeutet, dass Sie jederzeit Ihren Arbeitsstand auf eine frühere Version zurücksetzen können.
Klicken Sie dazu im Aktionsmenü auf "Versionen". Hier sehen Sie alle Versionen der aktuellen Seite. Zur jeder Version können Sie sehen, wann und von wem sie erstellt wurde. Der blaue Haken zeigt an, welche Version momentan veröffentlicht ist. Der Pfeil rechts öffnet die Versionsvorschau. Mit einem Klick auf die Version selbst, setzen Sie Ihren Arbeitsstand zur geklickten Version zurück. Klicken Sie auf eine Version und anschließend auf "Bestätigen". Sie sehen nun, dass Ihr Arbeitsstatus zurückgesetzt wurde.

< Import/Export />

Wenn Ihr Shop in einer weiteren Sprache verfügbar ist, müssen Sie die Inhalte nicht erneut manuell erstellen, sondern Sie können die Inhalte einfach importieren. Wechseln Sie dazu im Frontend Editor zur gewünschten Sprache. Klicken Sie anschließend im Aktionsmenü auf "Import". Im nachfolgenden Dialog klicken Sie auf den Tab "Aus Verkaufskanal" und wählen Sie den Verkaufskanal aus, aus welchem Sie die Inhalte importieren wollen. Mit einem Klick auf "Bestätigen" werden die Inhalte importiert. Sie können nun die Texte für die importierten Inhalte anpassen bzw. übersetzen. Klicken Sie im Aktionsmenü auf "Speichern", um Ihre Inhalte für die Sprache zu speichern.

Tipp: Selbstverständlich können Sie in auch Inhaltselemente hinzufügen oder löschen. So können Sie für jede Sprache ganz individuelle Inhaltsseiten erstellen.

Wechseln Sie auf die Sprache zurück, in der Sie ursprünglich die Inhalte erstellt haben. Erstellen Sie ein neues Inhaltselement und klicken Sie im Aktionsmenü auf "Speichern". Begeben Sie sich nun wieder zur Sprache mit den übersetzten Inhalten und führen den Import erneut aus. Aktivieren Sie diesmal die Checkbox "Sprachspezifische Daten behalten". Sie sehen nun, dass das neue Inhaltselement importiert wurde, aber Ihre übersetzten Texte beibehalten wurden. Nicht nur übersetzte Texte werden mit dieser Option beibehalten, sondern auch anderweitige sprachspezifische Daten, wie z. B. Links.

Tipp: Sie können Ihre Inhalte im Aktionsmenü über den Menüpunkt "Export" in eine Datei exportieren lassen. Diese Datei können Sie beliebig importieren. Somit lassen sich Inhalte auf anderen Seiten oder sogar in andere Shopware-Systeme importieren.

< Inhaltselementbezogene Aktionen />

Um Ihnen die Arbeit zu erleichtern, stehen Ihnen zu jedem Inhaltselement über das Konfigurationsmenü folgende Hilfsfunktionen zur Verfügung:

  • Duplizieren: Mit dem runden Plus, können Sie das aktuelle Inhaltselement duplizieren.
  • Inhaltsbereich wechseln: Mit den zwei horizontalen Pfeilen lässt sich das aktuelle Inhaltselement in den nächsten bzw. vorhergehenden Inhaltsbereich verschieben.
  • Position wechseln: Mit den zwei vertikalen Pfeilen lässt sich die Position des aktuellen Inhaltselements innerhalb eines Inhaltsbereiches verändern.
  • Löschen: Mit dem Mülleimer lässt sich das aktuelle Inhaltselement löschen.

Platzierte Inhaltselemente lassen sich auch via Drag and Drop verschieben und löschen.

Neu: Seit der Version 1.2.0 lassen sich platzierte Inhaltselemente als Vorlagen speichern, welche dann später wieder verwendet werden können. Dadurch wird die Inhaltspflege deutlich verschnellert.

< Karussell-Element />

Selbst Karussell-Elemente, auch Slider genannt, lassen sich spielend leicht erstellen. Jede Seite innerhalb eines Karusell-Elements beinhaltet einen Inhaltsbereich, der sich mit beliebigen Inhaltselementen befüllen lässt.

< Beispiel: Landingpage />

Tablet Portrait

Landingpage Tablet Portrait

Mobile Landscape

Landingpage Mobile Landscape