Page Builder Anleitung Teil 1: Einfache Seite

Laden Sie die simple-page-assets-Datei herunter und speichern Sie die Datei 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 darauf und wählen Sie Extract All Dateien. 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 Grafikdateien:

{width="500"}

Navigieren Sie in Admin-Seitenleiste 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 Page Title Simple Page ein.

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

Erweitern Sie den Abschnitt Design .

Beachten Sie, dass Layout standardmäßig auf Page -- Full Width festgelegt ist. Zusätzlich zu den fünf standardmäßigen Layout-Optionen fügt Page Builder Layouts für Seiten, Kategorien und Produkte in voller Breite 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 Standard-Design zu verwenden.

Die New Theme ​kann verwendet werden, um das Standarddesign zu überschreiben und ein anderes Design auf die Seite anzuwenden.

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

Klicken Sie oben rechts auf Save.

Beim Speichern der Seite wird Name „Einfache" oben links auf der Seite angezeigt.

Erweitern Sie den Abschnitt Content .

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

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

Klicken Sie Edit with Page Builder oder in den Inhaltsvorschaubereich.

Im erweiterten Page Builder Arbeitsbereich bietet das Bedienfeld auf der linken Seite die Inhalts-Tools, die Sie zum Erstellen von Inhalten in der Phase verwenden können.

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

Jeder Inhalts-Container verfügt über eine Toolbox mit einem ähnlichen Satz von Optionen.

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

Wählen Sie in der Toolbox „Zeile das Symbol Einstellungen {width="20"}).

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

Mit der Einstellung Vollständiger Anschnitt werden 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 ​auf 0.

Durch diese 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 oben rechts auf Save .

Erweitern Sie im Page Builder Bedienfeld Media und ziehen Sie einen Banner-Platzhalter 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, sodass Sie direkt auf der Bühne schnelle Änderungen am Banner vornehmen können.

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

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

Wählen Sie unter Appearance ​die Option Collage Right ​aus.

Mit der Einstellung „Collage Right“ werden Inhalte 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 Background Image auf Hochladen.

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

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

  Das Bild wird hochgeladen und eine Miniaturansicht des hochgeladenen Bildes wird angezeigt. Der Dateiname, die Bildabmessungen und die Dateigröße werden unten angegeben.

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

• Klicken Sie Background Mobile Image auf Hochladen.

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

  Das mobile Hintergrundbild wird für Mobilgeräte verwendet und auch immer dann, wenn ein Desktop-Browser-Fenster 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 erstreckt sich über die gesamte Breite der Zeile.

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

Beachten Sie den Platzhaltertext, der rechts in der Zeile angezeigt wird. Die Position dieses Textes entspricht der Collage Right Erscheinungsbildeinstellung.

Klicken Sie auf den Platzhaltertext und geben Sie die folgende Nachricht 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 über die Bühne eingegeben und formatiert werden oder durch Auswahl von Einstellungen in der Banner-Toolbox.

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

Anwenden der Formatierung auf den Text:

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

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

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

Die Formateinstellungen wenden die Stile aus dem Stylesheet an, das mit dem aktuellen Design verknüpft ist.

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

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

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

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

Legen Sie anschließend im Abschnitt Content ​den Bannerlink und die Schaltfläche fest:

• Legen Sie Link auf Category fest und klicken Sie dann auf Select, um die Kategoriestruktur anzuzeigen.

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

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

• Legen Sie Show Button auf Always fest.

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

• Akzeptieren Sie Button Type den Primary.

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

Festlegen der Bannerüberlagerung:

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.

• Legen Sie Show Overlay auf Always fest.

• Führen Sie 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 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 unterhalb der Bannermeldung auf der Bühne angezeigt.

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

Klicken Sie oben rechts im Stadium auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, kehren Sie zum Content ​Abschnitt für die Seite mit der angezeigten Vorschau zurück.

Sie können jederzeit zwischen den beiden Arbeitsbereichsmodi wechseln.

Klicken Sie oben rechts auf den Save und wählen Sie Save & Close aus.

Wenn Sie dazu aufgefordert werden klicken Sie auf den LinkCache-Verwaltung“ in der Meldung oben auf der Seite und aktualisieren Sie alle ungültigen Cache-Einträge.

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

Erweitern Sie den Abschnitt Content .

Klicken Sie Edit with Page Builder oder in den Inhaltsvorschaubereich.

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

Die rote Richtlinie markiert die Grenze zwischen den beiden Zeilen.

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

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

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

Akzeptieren Sie unter Appearance ​die Standardeinstellung Enthalten.

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 Page Builder unter Layout ​einen Column ​Platzhalter in die neue Zeile.

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

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

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

Klicken Sie oben links in der ersten Spalte auf das runde Grid-Steuerelement ( ), um die Rasterrichtlinien anzuzeigen.

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

Die Zahlen in Klammern (6/12) am oberen Rand jedes Spaltencontainers geben die Anzahl der Rasteraufteilungen in jeder Spalte und die Gesamtzahl der Aufteilungen in der Zeile an.

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

Erweitern Sie im Page Builder den Abschnitt Media und ziehen Sie einen Image Platzhalter 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:

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

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

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

• Ziehen Sie die Bilddatei: Öffnen Sie auf Ihrem Desktop den Ordner Einfache Seiten-Assets und positionieren Sie ihn neben dem Admin-Browser-Fenster, in dem Sie mit dem Page Builder arbeiten. Ziehen Sie dann die Datei small-banner-1.jpg aus dem Ordner Einfache Seiten-Assets und legen Sie sie in der ersten Spalte ab.

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

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

Bestimmen Sie, welche Seite aus Ihrem Katalog mit den einzelnen Bildern verknüpft werden soll.

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

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

Verknüpfen des Bildes mit einer Kategorie:

• Scrollen Sie nach unten und setzen Sie Link auf Category.

• Gehen Sie in der Kategoriestruktur nach unten und wählen Sie die Men's Hoodies & Sweatshirt Kategorie aus.

• Save Sie oben rechts die Einstellungen aus und kehren Sie 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 oben rechts im Stadium auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, kehren Sie zum Content ​Abschnitt für die Seite mit der angezeigten Vorschau zurück.

Klicken Sie oben rechts auf den Save und wählen Sie Save & Close aus.

Wenn Sie dazu aufgefordert werden klicken Sie auf den LinkCache-Verwaltung“ in der Nachricht oben auf der Seite und aktualisieren Sie alle ungültigen Cache-Einträge.

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

Erweitern Sie den Abschnitt Content .

Klicken Sie Edit with Page Builder oder in den Inhaltsvorschaubereich.

Ziehen Sie im Page Builder Bedienfeld 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 Richtlinie markiert die Grenze zwischen den beiden Zeilen.

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

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

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

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

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#f1f1f1 als Background Color ​ein.

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

Scrollen Sie nach unten zum Abschnitt Advanced ​und legen Sie alle Werte Ränder und Abstand ​auf 0 fest.

{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 ein blasses Beige.

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

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

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

Ziehen Sie den rechten Rand der ersten Spalte an die vier der 12 (4/12) -Positionen im Raster.

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

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

Bewegen Sie den Mauszeiger über den ersten Spalten-Container, um die Toolbox anzuzeigen, und wählen das Symbol Einstellungen {width="20"}) aus.

Scrollen Sie nach unten zum Abschnitt Advanced ​und legen Sie alle Werte Ränder und Abstand ​auf 0 fest.

{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 Page Builder Bedienfeld Media und ziehen Sie einen Image Inhaltstyp in die erste Spalte.

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

Klicken Sie im Bildplatzhalter auf Upload Image.

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

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

Das hochgeladene Bild wird in der ersten Spalte angezeigt und ist nahtlos mit der Hintergrundfarbe der Zeile vermischt.

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

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

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

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

Klicken Sie in der Symbolleiste auf Bild einfügen ( ) und führen Sie folgende Schritte aus:

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

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

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

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

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

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

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

• Geben Sie Image Description 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 die Einfügemarke direkt nach dem Fünf-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 während der Eingabe zentriert.

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

Formatieren Sie den Text:

• Klicken Sie auf eine beliebige Stelle in der ersten Textzeile und wählen Sie in der Editor Symbolleiste unter FormateHeading 2 die Option aus.

• Wählen Sie den verbleibenden Text aus und klicken Sie in der Editor-Symbolleiste unter Formate auf Paragraph.

Der Text wird entsprechend dem Stylesheet formatiert, das mit dem Design verknüpft 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 Toolbox anzuzeigen, und wählen Sie Symbol Einstellungen {width="20"}) aus.

• Notieren Sie sich die Abmessungen des Bildes unter der Miniaturansicht des Bildes.

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

• Klicken Sie oben rechts auf Schließen.

Inhalt vertikal in der zweiten Spalte zentrieren:

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

  {width="20"}

  ) aus.

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

• Legen Sie Vertical Alignment auf Center fest.

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

Scrollen Sie nach unten zum Abschnitt Advanced ​und legen Sie alle Margins and Padding ​auf null fest ( 0 ).

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

Scrollen Sie zurück zum Seitenanfang 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 Antonia Racer Tank Text aus und klicken Sie auf das Symbol Link einfügen ( einfügen) in der Editor-Symbolleiste.

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

• Geben Sie die URL ein.

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

  ../antonia-racer-tank.html

• (Optional) Geben unter "" den Produktnamen ein.

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

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

• Klicken Sie abschließend auf OK , um den Link zu speichern.

  Der verknüpfte Text wird jetzt im Banner hervorgehoben.

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

Klicken Sie oben rechts im Stadium auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, kehren Sie zum Content ​Abschnitt für die Seite mit der angezeigten Vorschau zurück.

Klicken Sie oben rechts auf Save.

Erweitern Sie bei Bedarf den Abschnitt Content .

Klicken Sie Edit with Page Builder oder in den Inhaltsvorschaubereich.

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

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

Halten Sie die Maustaste gedrückt, während Sie überprüfen, ob der gesamte Inhalt in der Zeile ausgewählt ist, und ziehen Sie die Zeile unter der roten Richtlinie am unteren Seitenrand an eine Position.

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

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

Die Reihenfolge der Zeilen auf der Seite stimmt jetzt mit dem Beispiel Einfache Seite überein.

Klicken Sie oben rechts im Stadium auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, kehren Sie zum Content ​Abschnitt für die Seite mit der angezeigten Vorschau zurück.

Klicken Sie oben rechts auf den Save und wählen Sie Save & Close aus.

Wenn Sie dazu aufgefordert werden klicken Sie auf den LinkCache-Verwaltung“ in der Meldung oben auf der Seite und aktualisieren Sie alle ungültigen Cache-Einträge.