Page Builder Exemplarische Vorgehensweise: Teil 1: einfache Seite

Laden Sie die Datei simple-page-assets herunter und speichern Sie sie auf Ihrem lokalen System.

Navigieren Sie zur heruntergeladenen Datei und extrahieren Sie die komprimierten Dateien.

Klicken Sie auf einem Windows-System mit der rechten Maustaste und wählen Sie Extract All Dateien aus. Wählen Sie dann den Zielordner aus und klicken Sie auf Extract.

Auf einem Mac-System können Sie einfach auf die ZIP-Datei doppelklicken und die extrahierten Dateien in den Zielordner verschieben.

Der Ordner enthält die folgenden Bilddateien:

{width="500"}

Wechseln Sie in der Seitenleiste Admin zu Content > Elements>Pages.

Klicken Sie oben rechts auf Add New Page und führen Sie folgende Schritte aus:

• Um zu verhindern, dass diese Seite in Ihrem Store veröffentlicht wird, setzen Sie Enable Page auf No.

• Geben Sie für Page Title den Wert Simple Page ein.

{width="600" modal="regular"}

Erweitern Sie im Abschnitt Design .

Beachten Sie, dass Layout standardmäßig auf Page -- Full Width gesetzt ist. Zusätzlich zu den fünf standardmäßigen layout -Optionen fügt Page Builder Layouts mit voller Breite für Seiten, Kategorien und Produkte hinzu.

Wenn die Beispieldaten verfügbar sind, setzen Sie New Theme auf Magento Luma. Andernfalls können Sie ein anderes verfügbares Design auswählen oder es leer lassen, um das Standarddesign zu verwenden.

Mit der Einstellung New Theme ​können Sie das Standarddesign überschreiben und ein anderes Design auf die Seite anwenden.

{width="600" modal="regular"}

Klicken Sie in der oberen rechten Ecke auf Save.

Wenn die Seite gespeichert wird, wird der Name Einfache Seite in der oberen linken Ecke der Seite angezeigt.

Erweitern Sie im Abschnitt Content .

Diese Aktion zeigt die Vorschau von Page Builder mit einer leeren Zeile an.

{width="600" modal="regular"}

Klicken Sie auf Edit with Page Builder oder im Inhaltsvorschaubereich.

Im erweiterten Arbeitsbereich Page Builder 2} bietet das Bedienfeld auf der linken Seite die Inhaltswerkzeuge, die Sie zum Erstellen Ihres Inhalts in der Bühne verwenden können.

Bewegen Sie den Mauszeiger über die leere Zeile, um die Toolbox anzuzeigen.

Jeder Inhaltscontainer verfügt über eine Toolbox mit ähnlichen Optionen.

{width="600" modal="regular"}

Wählen Sie in der Zeilen-Symbolleiste das Symbol Einstellungen ( {width="20"}).

Wählen Sie unter Appearance ​die Option Vollständiger Anschnitt.

Mit der Einstellung für das vollständige Anschnitt-Erscheinungsbild wird der linke und rechte Rand des Inhaltsbereichs der Zeile und des Hintergrunds auf die gesamte Seitenbreite erweitert.

{width="600" modal="regular"}

Scrollen Sie nach unten zum Abschnitt Advanced ​und setzen Sie alle Margins and Padding ​Einstellungen auf 0.

Mit dieser Einstellung wird sichergestellt, dass das Banner die gesamte Breite der Zeile erweitert.

{width="600" modal="regular"}

Um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren, scrollen Sie nach oben auf der Seite und klicken Sie in der oberen rechten Ecke auf Save .

Erweitern Sie im Bedienfeld Page Builder den Eintrag Media und ziehen Sie einen Platzhalter für Banner auf die Bühne.

{width="600" modal="regular"}

Bewegen Sie den Mauszeiger über den Banner-Container, um die Toolbox anzuzeigen.

Zusätzlich zur Toolbox sind die Schaltflächen Bild hochladen und Aus Galerie auswählen enthalten, damit Sie das Banner direkt von der Bühne aus ändern können.

{width="600" modal="regular"}

Wählen Sie in der Banner-Toolbox das Symbol Einstellungen ( {width="20"} ).

Wählen Sie unter "Appearance"die Option "Collage Right".

Mit der Einstellung "Rechts reduzieren"wird Inhalt auf der rechten Seite des Banners positioniert.

{width="600" modal="regular"}

Scrollen Sie nach unten zum Abschnitt Background ​und legen Sie das Hintergrundbild für das Banner fest:

• Klicken Sie für "Background Image"auf "Hochladen".

  {width="600" modal="regular"}

  Navigieren Sie zum Verzeichnis, in dem Sie die extrahierten einfachen Seiten-Assets gespeichert haben, und wählen Sie die Datei "wide-banner-background.jpg".

  Das Bild wird hochgeladen und eine Miniaturansicht des hochgeladenen Bildes wird angezeigt. Dateiname, Bilddimensionen und Dateigröße sind unten aufgeführt.

  {width="600" modal="regular"}

• Klicken Sie für "Background Mobile Image"auf "Hochladen".

  Wählen Sie im selben Dateiverzeichnis die Datei "wide-banner-background-mobile.jpg".

  Das mobile Hintergrundbild wird für Mobilgeräte und immer dann verwendet, wenn die Größe eines Desktop-Browserfensters auf die Breite eines Mobilgeräts geändert wird.

  {width="600" modal="regular"}

• Scrollen Sie zurück zum Anfang der Seite und klicken Sie auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

  Der Hintergrund wird auf der Bühne angezeigt und erweitert die gesamte Breite der Zeile.

  {width="600" modal="regular"}

Beachten Sie den Platzhaltertext, der rechts in der Zeile angezeigt wird. Die Position dieses Textes spiegelt die Einstellung für das Erscheinungsbild von Collage Right wider.

Klicken Sie auf den Platzhaltertext und geben Sie die folgende Meldung in zwei Zeilen ein:

Get fit and look fab in new seasonal styles.

New LUMA yoga collection

Die Editor-Symbolleiste wird über dem Textfeld angezeigt. Text kann entweder direkt von der Bühne aus eingegeben und formatiert werden oder durch Auswahl von Einstellungen in der Banner-Toolbox.

{width="600" modal="regular"}

Formatieren Sie den Text:

• Wählen Sie die erste Textzeile aus. Wählen Sie dann in der Editor-Symbolleiste unter Formate die Option Heading 2.

  {width="600" modal="regular"}

• Wählen Sie die zweite Textzeile aus. Wählen Sie dann in der Editor-Symbolleiste unter Formate die Option Paragraph.

Die Formateinstellungen wenden die Stile aus dem Stylesheet an, das dem aktuellen Design zugeordnet ist.

{width="600" modal="regular"}

Um die Banner-Toolbox anzuzeigen, wählen Sie erneut das Symbol Einstellungen ( {width="20"} ) und scrollen Sie dann zum Abschnitt Content.

Beachten Sie, dass Ihr Text im Feld Nachrichtentext angezeigt wird. Text kann entweder in der Bühne oder im Abschnitt Content ​der Bannereinstellungen eingegeben und bearbeitet werden.

{width="600" modal="regular"}

Fahren Sie mit dem Abschnitt Content ​fort und legen Sie den Bannerlink und die Schaltfläche fest:

• Setzen Sie Link auf Category und klicken Sie dann auf Select, um den Kategoriebaum anzuzeigen.

• Wählen Sie What's New als verknüpfte Kategorie.

  {width="600" modal="regular"}

• Setzen Sie Show Button auf Always.

• Geben Sie für Button Text Shop Now als Text ein, der auf der Schaltfläche angezeigt wird.

• Für Button Type akzeptieren Sie den Standardwert Primary .

  Der Schaltflächenstil des aktuellen Designs bestimmt das Schaltflächenformat.

Bannerüberlagerung festlegen:

Sie können eine Überlagerung verwenden, um eine Hintergrundfarbe auf den aktiven Inhaltsbereich anzuwenden, der durch die Einstellung Erscheinungsbild definiert wird. Das Hintergrundbild des Banners bleibt für die gesamte Breite des Banners sichtbar.

• Setzen Sie Show Overlay auf Always.

• Führen Sie für Overlay Color einen der folgenden Schritte aus:

  • Klicken Sie auf das Farbfeld und wählen Sie das weiße Farbfeld aus.
  • Klicken Sie in das Textfeld Keine Farbe und geben Sie White oder den Hexadezimalwert #ffffff ein.

  Klicken Sie dann auf Apply.

  {width="600" modal="regular"}

• Scrollen Sie zurück zum Anfang der Seite und klicken Sie auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

  Die Schaltfläche wird auf der Bühne unter der Bannermeldung angezeigt.

  {width="600" modal="regular"}

Klicken Sie in der oberen rechten Ecke der Bühne auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, gelangen Sie zum Abschnitt "Content"für die Seite, in der die Vorschau angezeigt wird.

Sie können jederzeit zwischen den beiden Arbeitsbereichsmodi wechseln.

Klicken Sie in der oberen rechten Ecke auf den Pfeil Save und wählen Sie Save & Close.

Wenn Sie dazu aufgefordert werden, klicken Sie oben auf der Seite in der Meldung auf den Link Cache-Verwaltung und aktualisieren Sie den ungültigen Cache.

Suchen Sie im Raster Seiten die einfache Seite , die Sie im ersten Teil dieser Übung erstellt haben, und wählen Sie Edit in der Spalte Action ​aus.

Erweitern Sie im Abschnitt Content .

Klicken Sie auf Edit with Page Builder oder im Inhaltsvorschaubereich.

Ziehen Sie im Bedienfeld Page Builder unter Layout ​einen Platzhalter Row ​auf die Bühne und platzieren Sie ihn über dem Banner.

Die rote Führungslinie markiert die Grenze zwischen den beiden Zeilen.

{width="600" modal="regular"}

Bewegen Sie den Mauszeiger über die neue Zeile, um die Werkzeugleiste anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ).

{width="600" modal="regular"}

Akzeptieren Sie unter Appearance ​die Standardeinstellung Contained.

Diese Einstellung beschränkt den Inhaltsbereich der Zeile auf die Breite der Seite, wie vom Design definiert.

{width="600" modal="regular"}

Klicken Sie oben rechts auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

Ziehen Sie im Bedienfeld Page Builder unter Layout ​einen Column ​Platzhalter in die neue Zeile.

{width="600" modal="regular"}

Die Zeile ist nun in zwei Spalten mit gleicher Breite unterteilt. Jede Spalte ist ein separater Container für Inhalte mit einer eigenen dedizierten Toolbox mit Optionen.

{width="600" modal="regular"}

Klicken Sie in der linken oberen Ecke der ersten Spalte auf das kreisförmige Steuerelement Raster ( ), um die Rasterrichtlinien anzuzeigen.

Das Raster stellt sicher, dass Inhalte konsistent ausgerichtet und auf Desktop- und Mobilgeräten korrekt dargestellt werden. Informationen zum Konfigurieren der Rastergröße finden Sie im Abschnitt Konfigurieren Page Builder im Abschnitt Page Builder Setup .

Die Zahlen in Klammern (6/12) am oberen Rand jedes Spaltenbehälters geben die Anzahl der Rasterdivisionen in jeder Spalte und die Gesamtzahl der Divisionen in der Zeile an.

{width="600" modal="regular"}

Erweitern Sie im Bedienfeld Page Builder den Abschnitt Media und ziehen Sie einen Platzhalter Image in die erste Spalte.

{width="600" modal="regular"}

Fügen Sie das Beispielbild in den Platzhalter ein.

{width="600" modal="regular"}

Für ein Bild, das sich auf Ihrem System befindet, können Sie eine der folgenden Methoden wählen:

• Laden Sie die Bilddatei hoch: Klicken Sie in der ersten Spalte auf Upload Image. Navigieren Sie dann zu dem Ordner, in dem Sie die extrahierten einfachen Seiten-Assets gespeichert haben, und wählen Sie die Datei "small-banner-1.jpg".

  {width="600" modal="regular"}

  Wiederholen Sie diesen Vorgang, um die Datei small-banner-2.jpg zur zweiten Spalte hinzuzufügen.

• Ziehen Sie die Bilddatei in den Arbeitsbereich: Öffnen Sie auf Ihrem Desktop den Ordner für einfache Seiten-Assets und positionieren Sie ihn neben dem Admin-Browserfenster, in dem Sie mit der Page Builder -Bühne arbeiten. Ziehen Sie dann die Datei "small-banner-1.jpg" aus dem Asset-Ordner der einfachen Seite und legen Sie sie in der ersten Spalte ab.

  {width="600" modal="regular"}

  Wiederholen Sie diesen Vorgang, um die Datei small-banner-2.jpg zur zweiten Spalte hinzuzufügen.

Bestimmen Sie, welche Seite aus Ihrem Katalog Sie mit jedem Bild verknüpfen möchten.

Bewegen Sie den Mauszeiger über das Bild in der ersten Spalte, um die Symbolleiste anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ).

{width="600" modal="regular"}

Verknüpfen Sie das Bild mit einer Kategorie:

• Scrollen Sie nach unten und legen Sie Link auf Category fest.

• Führen Sie im Kategoriebaum einen Drilldown durch und wählen Sie die Kategorie Men's Hoodies & Sweatshirt aus.

• In der oberen rechten Ecke Save die Einstellungen und kehren zum Arbeitsbereich Page Builder zurück.

Wiederholen Sie den vorherigen Schritt, um das Bild in der zweiten Spalte mit der Kategorie Zahnrad zu verknüpfen.

Klicken Sie in der oberen rechten Ecke der Bühne auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, gelangen Sie zum Abschnitt "Content"für die Seite, in der die Vorschau angezeigt wird.

Klicken Sie in der oberen rechten Ecke auf den Pfeil Save und wählen Sie Save & Close.

Wenn Sie dazu aufgefordert werden, klicken Sie oben auf der Seite in der Meldung auf den Link Cache-Verwaltung und aktualisieren Sie alle ungültigen Cache-Dateien.

Suchen Sie im Raster Seiten die einfache Seite , die Sie im ersten Teil dieser Übung erstellt haben, und wählen Sie Edit in der Spalte Action ​aus.

Erweitern Sie im Abschnitt Content .

Klicken Sie auf Edit with Page Builder oder im Inhaltsvorschaubereich.

Ziehen Sie im Bedienfeld Page Builder unter Layout ​einen Row ​Platzhalter auf die Bühne und platzieren Sie ihn über der Zeile, die im zweiten Teil dieser Übung erstellt wurde.

Eine rote Führungslinie markiert die Grenze zwischen den beiden Zeilen.

{width="600" modal="regular"}

Bewegen Sie den Mauszeiger über die neue Zeile, um die Werkzeugleiste anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ).

{width="600" modal="regular"}

Wählen Sie auf der Seite "Zeile bearbeiten"unter Appearance ​die Option Full Width.

Diese Einstellung beschränkt den Inhaltsbereich auf die maximale Seitenbreite, die vom Design definiert wird. Die Hintergrundfarbe und/oder das Bild sind nicht beschränkt und erweitern die gesamte Breite der Zeile.

{width="600" modal="regular"}

Geben Sie im Abschnitt Background ​den Wert #f1f1f1 als den Wert Background Color ​ein.

{width="600" modal="regular"}

Scrollen Sie nach unten zum Abschnitt Advanced ​und setzen Sie alle Werte für Ränder und Abstand ​auf 0.

{width="600" modal="regular"}

Scrollen Sie zurück zum Anfang der Seite und klicken Sie auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

Die Hintergrundfarbe der Zeile ist jetzt hellbeige.

{width="600" modal="regular"}

Ziehen Sie im Bedienfeld Page Builder unter Layout ​einen Platzhalter Column ​in die oberste Zeile auf der Bühne.

{width="600" modal="regular"}

Ziehen Sie den rechten Rand der ersten Spalte an die vier von 12 (4/12) Position auf dem Raster.

Die Größe der zweiten Spalte wird auf acht von 12 (8/12) angepasst.

{width="600" modal="regular"}

Bewegen Sie den Mauszeiger über den ersten Spaltenbehälter, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ).

Scrollen Sie nach unten zum Abschnitt Advanced ​und setzen Sie alle Werte für Ränder und Abstand ​auf 0.

{width="600" modal="regular"}

Scrollen Sie zurück zum Anfang der Seite und klicken Sie auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

Erweitern Sie im Bedienfeld Page Builder den Wert Media und ziehen Sie einen Inhaltstyp Image in die erste Spalte.

{width="600" modal="regular"}

Klicken Sie im Bild-Platzhalter auf Upload Image.

{width="600" modal="regular"}

Navigieren Sie zum Verzeichnis, in dem Sie die extrahierten einfachen Seiten-Assets gespeichert haben, und wählen Sie die Datei "review-image.jpg".

Das hochgeladene Bild wird in der ersten Spalte angezeigt und lässt sich nahtlos mit der Hintergrundfarbe der Zeile kombinieren.

{width="600" modal="regular"}

Erweitern Sie im Bedienfeld Page Builder den Abschnitt Elements und ziehen Sie den Inhaltstyp Text in die zweite Spalte.

{width="600" modal="regular"}

Klicken Sie in das Textelement, um die Editor-Symbolleiste anzuzeigen.

Klicken Sie in der Symbolleiste auf das Symbol Bild einfügen ( ) und führen Sie die folgenden Schritte aus:

{width="600" modal="regular"}

• Klicken Sie im Dialogfeld Insert/edit image ​auf das Symbol_ Suchen _( ) neben dem Feld​ Source .

  {width="600" modal="regular"}

• Klicken Sie auf der Seite Select Images ​auf Choose Files.

• Wählen Sie in dem Ordner, in dem Sie die einfachen Seiten-Assets gespeichert haben, rating.png aus.

• Doppelklicken Sie auf der Seite auf die Bildkachel, um sie auszuwählen und die URL in das Source-Feld einzufügen.

  {width="600" modal="regular"}

• Geben Sie für Image Description den Wert 5-Star Rating ein und klicken Sie auf OK , um das Bild in die Spalte einzufügen.

• Klicken Sie in der Editor-Symbolleiste auf Zentrieren ( ), um das Bild in der Spalte zu zentrieren.

  {width="600" modal="regular"}

Positionieren Sie den Einfügepunkt direkt nach dem 5-Sterne-Bild, drücken Sie die Eingabetaste, um eine neue Zeile zu beginnen, und geben Sie folgenden Text ein:

Awesome Tank!

I'm a long distance runner and it keeps me pretty comfortable, although these companies always act like their shirts are magical and really it's just pretty basic stuff. Still it's a great shirt, and I would recommend it.

Antonia Racer Tank – Reviewed by Allyson

Der Text wird bei der Eingabe zentriert.

{width="600" modal="regular"}

Formatieren Sie den Text:

• Klicken Sie an eine beliebige Stelle in der ersten Textzeile und wählen Sie in der Editor-Symbolleiste unter Formate die Option Heading 2 aus.

• Wählen Sie den verbleibenden Text aus und wählen Sie in der Editor-Symbolleiste unter Formate die Option Paragraph.

Der Text wird entsprechend dem Stylesheet formatiert, das dem Design zugeordnet ist.

Rufen Sie die Abmessungen des Bildes ab, damit Sie den Inhalt vertikal in der Spalte zentrieren können:

• Bewegen Sie den Mauszeiger über das Bild in der ersten Spalte, um die Symbolleiste anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ).

• Beachten Sie unter der Miniaturansicht des Bildes die Abmessungen des Bildes.

  {width="600" modal="regular"}

• Klicken Sie oben rechts auf Schließen.

Zentrieren Sie den Inhalt in der zweiten Spalte vertikal:

• Bewegen Sie den Mauszeiger über die zweite Spalte, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen (

  {width="20"}

  ).

• Geben Sie für "Minimum Height"als Höhe in Pixel für das Bild in der ersten Spalte 450 ein.

• Setzen Sie Vertical Alignment auf Center.

{width="600" modal="regular"}

Scrollen Sie nach unten zum Abschnitt Advanced ​und setzen Sie alle Margins and Padding-Werte auf null ( 0 ).

{width="600" modal="regular"}

Scrollen Sie zurück zum oberen Seitenrand und klicken Sie oben rechts auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

{width="600" modal="regular"}

Wählen Sie den Text Antonia Racer Tank aus und klicken Sie in der Editor-Symbolleiste auf das Symbol Link einfügen ( ).

Geben Sie im Dialogfeld Link einfügen den Link zum Katalogprodukt an:

• Geben Sie das Produkt URL ein.

  Sie können entweder eine relative oder eine vollständig qualifizierte URL eingeben. Für dieses Beispiel wird der folgende relative Link eingegeben:

  ../antonia-racer-tank.html

• (Optional) Geben Sie für Titel den Produktnamen ein.

  Das Attribut Titel-Link wird von einigen Browsern als QuickInfo verwendet.

  {width="600" modal="regular"}

• Klicken Sie nach Abschluss des Vorgangs auf OK , um den Link zu speichern.

  Der verknüpfte Text wird jetzt im Banner hervorgehoben.

  {width="600" modal="regular"}

Klicken Sie in der oberen rechten Ecke der Bühne auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, gelangen Sie zum Abschnitt "Content"für die Seite, in der die Vorschau angezeigt wird.

Klicken Sie in der oberen rechten Ecke auf Save.

Erweitern Sie ggf. den Abschnitt um den Abschnitt Content.

Klicken Sie auf Edit with Page Builder oder im Inhaltsvorschaubereich.

Bewegen Sie den Mauszeiger über die erste Zeile auf der Bühne, um die Werkzeugleiste anzuzeigen, und wählen Sie das Symbol Verschieben ( ).

{width="600" modal="regular"}

Halten Sie die Maustaste gedrückt, während Sie überprüfen, ob der gesamte Zeileninhalt ausgewählt ist, und ziehen Sie die Zeile unter der roten Führungslinie am unteren Rand der Seite an die gewünschte Position.

{width="600" modal="regular"}

Wiederholen Sie diesen Vorgang, um die erste Zeile an die zweite Position zu verschieben.

Die Reihenfolge der Zeilen auf Ihrer Seite entspricht nun dem Beispiel Einfache Seite .

Klicken Sie in der oberen rechten Ecke der Bühne auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, gelangen Sie zum Abschnitt "Content"für die Seite, in der die Vorschau angezeigt wird.

Klicken Sie in der oberen rechten Ecke auf den Pfeil Save und wählen Sie Save & Close.

Wenn Sie dazu aufgefordert werden, klicken Sie oben auf der Seite in der Meldung auf den Link Cache-Verwaltung und aktualisieren Sie den ungültigen Cache.