< SHOPWARE FRONTEND EDITING />

Inhaltsseiten erstellen Sie, indem Sie gewöhnliche Shopseiten erstellen. Klicken Sie dazu auf "Inhalte > Shopseiten". Anschließend klicken Sie auf die Schaltfläche "Neue Seite" und tragen als Titel "hello" ein. Weisen Sie nun die Gruppe "In Bearbeitung" zu und scrollen Sie zum Bereich "Freitextfelder".

Das Frontend Editing Plugin hat für Sie folgende Felder angelegt:

• No breadcrumb: Steuert, ob auf der Shopseite die Brotkrümelnavigation angezeigt werden soll
• No headline: Steuert, ob auf der Shopseite die Überschrift angezeigt werden soll
• No sidebar: Steuert, ob auf der Shopseite die Sidebar angezeigt werden soll
• Hide recently seen articles: Steuert, ob auf der Shopseite die zuletzt angesehenen Artikel angezeigt werden sollen
• Full screen size: Steuert, ob die Shopseite vollflächig angezeigt werden soll

In diesem Beispiel aktivieren wir nur die Checkbox "No sidebar". Klicken Sie anschließend auf speichern.

Info: Diese Konfigurationsmöglichkeiten sind auch für Kategorien verfügbar.

Öffnen Sie den Frontend Editor über den Menüeintrag "Inhalte > Frontend Editing".

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

Klicken Sie in die Adresszeile des Frontend Editors und geben Sie /hello ein und bestätigen Sie die Eingabe mit der Entertaste, um zur vorhin erstellten Shopseite zu navigieren.

Wenn die Seite 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 diese Inhaltsbereiche nicht sehen, liegt es gegebenenfalls an einer fehlerhaften HTTP-Cache-Konfiguration (lesen Sie dazu die Installationsanleitung des Frontend Editing Plugins). Sollte das Problem trotz korrekter HTTP-Cache-Konfiguration immer noch bestehen, liegt es höchstwahrscheinlich an Ihrem Shopware-Theme, welches nicht die standardmäßigen Shopware-Smarty-Blöcke verwendet. Lassen Sie das Theme von Ihrem Entwickler entsprechend anpassen. Technische Informationen finden Sie im Entwicklerhandbuch.

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

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 Shopseiten finden Sie standardmäßig zwei Inhaltsbereiche. Falls Sie über das Shopware-Backend Text auf der Shopseite eingepflegt haben, erscheint der Shopware-Text zwischen diesen beiden Inhaltsbereichen. Auf diese Weise können Sie bestimmen, ob die Inhaltselemente vor oder nach dem Shopware-Text 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.

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.

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

Platzieren Sie ein neues Spaltenlayout-Element in einem Inhaltsbereich. Jetzt können Sie sehen, dass das Spaltenlayout-Element zwei eigene Inhaltsbereiche beinhaltet. Schieben Sie in die rechte Spalte ein Text-Element und in die linke Spalte ein Bild-Element. Um einen Abstand zwischen den beiden Elementen zu erhalten, klicken Sie einmal auf das platzierte Spaltenlayout-Element, um zum Konfigurationsmenü zu gelangen. Unter "Spaltenabstand" können Sie nun zwischen verschiedenen Spaltenabständen wählen (S, M, L, XL oder keiner).

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.

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.

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.

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.

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.

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.

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 in Ihren Sprachshop und stellen Sie sicher, dass Sie sich immer noch auf der Seite "hello" befinden. Klicken Sie anschließend im Aktionsmenü auf "Import". Im nachfolgenden Dialog klicken Sie auf den Tab "Aus Shop" und wählen Sie den Shop 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 den Sprachshop zu speichern.

Tipp: Selbstverständlich können Sie in Ihrem Sprachshop auch neue Inhaltselemente hinzufügen oder löschen. So lassen sich für Ihren Sprachshop komplett individuelle Inhaltsseiten erstellen.

common.importExportBody2

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.

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.

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.

Tablet Portrait

Mobile Landscape