Page Builder-Anleitung Teil 2: -Blöcke

Die folgende Übung veranschaulicht den Unterschied zwischen einfachen Blöcken und dynamischen Blöcken und die Verwendung von Page Builder zur Erstellung der einzelnen Blocktypen.

NOTE
Page Builder hat einen neuen Inhaltstyp mit dem Namen Banner, der in der ersten exemplarischen Übung verwendet wird und nicht mit der vorherigen Bannerfunktion in Beziehung steht. Was zuvor die Banner-Option im Inhaltsmenü war, ist jetzt Dynamischer Block.

Dynamischer Block in der Storefront {width="700" modal="regular"}

Bei dieser Übung wird davon ausgegangen, dass Sie Teil 1: Einfache Seite einschließlich der Voraussetzungen und heruntergeladenen Beispieldateien)haben. Befolgen Sie die Teile dieser exemplarischen Übung in der richtigen Reihenfolge.

NOTE
Diese exemplarischen Übungen werden aktualisiert, um die jüngsten Änderungen am Page Builder Workspace in Version 2.4.1 widerzuspiegeln.

Teil 1: Erstellen eines einfachen Blocks

In dieser exemplarischen Übung erstellen Sie einen einfachen Block mit Inhalten aus Google Maps. Einfache Blöcke werden manchmal als CMS- oder statische Blöcke bezeichnet, da sich der Inhalt nicht ändert. Ein einfacher Block eignet sich ideal für Inhalte, die Sie wiederverwenden möchten.

Schritt 1: Erstellen eines Blocks

  1. Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Blocks.

  2. Klicken Sie oben rechts auf Add New Block.

  3. Geben Sie Block Title Google Map ein.

  4. Geben Sie Identifier google-map ein.

  5. Wählen Sie die Store View aus, in der der Block verfügbar sein soll.

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

  6. Klicken Sie oben rechts auf Save.

Schritt 2: Google Map hinzufügen

  1. Scrollen Sie nach unten zur Page Builder Inhaltsvorschau (derzeit leer) und klicken Sie auf Edit with Page Builder.

  2. Erweitern Sie im Page Builder Bedienfeld Media und ziehen Sie einen Map Platzhalter auf das Bühnenbild.

    Ziehen einer Karte auf die Bühne {width="600" modal="regular"}

    Eine Zuordnung zu Ihrem Store-Standort wird angezeigt, wenn Google Maps für Ihren Store konfiguriert ist.

    Google Map für Ihren Store konfiguriert {width="600" modal="regular"}

    Eine Platzhalterzuordnung wird angezeigt, wenn Google Maps noch nicht für Ihren Store konfiguriert ist.

    Google Maps Platzhalter {width="600" modal="regular"}

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

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

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

Schritt 3: Konfigurieren von Google Maps

Wenn Google Maps bereits für Ihren Store konfiguriert ist, können Sie diesen Schritt überspringen und mit dem nächsten fortfahren.

  1. Wechseln Sie zur Google Cloud Platform-Konsole.

  2. Klicken Sie auf die Dropdown-Liste Projekt und wählen oder erstellen Sie das Projekt, für das Sie einen API-Schlüssel hinzufügen möchten.

  3. Um Ihre API-Anmeldeinformationen zu konfigurieren, folgen Sie den Anweisungen in der Google Maps.

  4. Kopieren Sie Ihren API-Schlüssel in die Zwischenablage.

  5. Kehren Sie zum Commerce Admin zurück und gehen Sie zu Stores > Settings>Configuration.

  6. Wählen Sie im linken Bedienfeld unter General ​die Option Content Management ​aus.

  7. Erweitern Sie Erweiterungsauswahl Advanced Content Tools.

    Erweiterte Inhalts-Tools {width="600" modal="regular"}

    Weitere Informationen zu den Content Management Advanced Tools Konfigurationsoptionen finden Sie im Konfigurationshandbuch.

  8. Fügen Sie Google Maps API Key den kopierten Schlüssel ein.

  9. Klicken Sie auf Test Key.

    Wenn es ein Problem mit Ihrem Schlüssel gibt, kehren Sie zur Google Maps Platform-Site zurück, um das Problem zu beheben. Versuchen Sie es dann erneut.

  10. Nachdem der Schlüssel überprüft wurde, klicken Sie auf Save Config.

Schritt 4: Block zu einer Seite hinzufügen

  1. Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Pages.

  2. Suchen Sie im Raster die Simple Page, die Sie im ersten Tutorial erstellt haben, und wählen Sie Edit ​in der Spalte​ Action aus.

  3. Erweitern Sie Erweiterungsauswahl den Abschnitt Content und klicken Sie auf Edit with Page Builder oder in den Bereich für die Inhaltsvorschau.

  4. Ziehen Sie im Page Builder Bedienfeld unter Layout ​einen Row ​Platzhalter an den Anfang des Stadiums.

    Hinzufügen der Zeile am Anfang des Schritts {width="600" modal="regular"}

  5. Erweitern Sie im Page Builder Bedienfeld Add Content und ziehen Sie einen Block Platzhalter in die neue Zeile.

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

    Block-Toolbox {width="600" modal="regular"}

  7. Klicken Sie auf der Seite Block bearbeiten auf Select Block.

    Block auswählen {width="600" modal="regular"}

  8. Geben Sie im Suchfeld map ein und drücken Sie die Eingabetaste, um den erstellten Block zu finden.

    Block in Liste suchen {width="600" modal="regular"}

  9. Klicken Sie im Raster auf Select , um den Google Maps auszuwählen.

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

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

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

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

Herzlichen Glückwunsch! Sie haben den ersten Teil der Blockübung abgeschlossen. Denken Sie daran, Ihre Arbeit als Referenz beizubehalten.

Teil 2: Dynamischen Block erstellen

Ein dynamischer Block umfasst eine Logik, die bestimmt, wo, wann und für wen er angezeigt wird. In dieser exemplarischen Übung erstellen Sie einen dynamischen Block für eine Promotion, die ausgelöst wird, wenn Preisregelbedingungen erfüllt sind, und die nur für ein bestimmtes Kundensegment angezeigt wird. Das Ergebnis in diesem Beispiel ähnelt dem Banner, das in der ersten Übung erstellt wurde, jedoch mit einer Logik, die steuert, wann es in der Storefront angezeigt wird.

Beispiel-Promotion zum Luma-T-Shirt {width="600" modal="regular"}

Schritt 1: Neuen dynamischen Block erstellen

  1. Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Dynamic Blocks.

    Liste der dynamischen Blöcke {width="700" modal="regular"}

  2. Klicken Sie oben rechts auf Add Dynamic Block.

    Neue Seite Dynamischer Block {width="600" modal="regular"}

  3. Vervollständigen Sie die Grundeinstellungen für den neuen dynamischen Block:

    • Legen Sie Enable Dynamic Block auf Yes fest.

    • Geben Sie Dynamic Block Name Tee Shirt Promo ein.

    • Legen Sie Dynamic Block Type auf Content Area fest und klicken Sie auf Done.

      Der dynamische Blocktyp bestimmt, wo im Seiten-Layout der Block platziert wird. Berücksichtigen Sie beim Einrichten eines dynamischen Blocks für Ihren Store sowohl das Seitenlayout als auch das Design, damit Sie den verfügbaren Platz sinnvoll nutzen können. Einige Stores verfügen über einen aktiven Inhaltsbereich, der auf eine feste Breite beschränkt ist, während andere die gesamte Breite des Bildschirms erweitern.

      Einstellung des dynamischen Blocktyps {width="600" modal="regular"}

    • Aktivieren Sie Customer Segment das Kontrollkästchen jedes Segments, das Sie auf den dynamischen Block anwenden möchten, und klicken Sie auf Fertig, um die Liste der Segmente zu speichern.

      Im folgenden Beispiel gibt es zwei „Kundensegmente die registriertenach Geschlecht identifizieren. Dieser dynamische Block wird nur für registrierte weibliche Kunden angezeigt, die bei ihren Konten angemeldet sind, während sie in Ihrem Geschäft einkaufen.

      Auswählen der Kundensegmente {width="600" modal="regular"}

Schritt 2: Abschließen der Einstellungen

Scrollen Sie nach unten zum Abschnitt Content, der eine leere Inhaltsvorschau Page Builder, und klicken Sie auf Edit with Page Builder. Führen Sie dann die folgenden Aufgaben aus:

Aufgabe 1: Ein Hintergrundbild hinzufügen

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

  2. Wählen Sie unter Appearance ​die Option Full Bleed ​aus.

  3. Geben Sie Minimum Height 400px ein.

  4. Scrollen Sie zum Abschnitt Background ​und legen Sie die Background Image ​fest, indem Sie auf Select from Gallery ​klicken und das im ersten Tutorial hochgeladene wide-banner-background.png auswählen.

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

    Zeile mit dem Bild {width="600" modal="regular"}

Aufgabe 2: Spalten hinzufügen

Ziehen Sie im Page Builder unter Layout ​einen Column ​Platzhalter auf die Zeile.

Ziehen des Spaltentyps in die Zeile {width="600" modal="regular"}

Die Zeile ist jetzt in zwei Spalten gleicher Breite unterteilt.

Aufgabe 3: Text hinzufügen

  1. Erweitern Sie im Page Builder Bedienfeld Elements und ziehen Sie einen Text-Platzhalter in die zweite Spalte.

    Ziehen eines Textfelds in die zweite Spalte {width="600" modal="regular"}

  2. Geben Sie die folgenden drei Textzeilen in den Editor ein:

    Even more ways to mix and match.

    Buy 3 Luma tees and get a 4th free.

    Shop Tees >

    Text für die Spalte eingeben {width="600" modal="regular"}

  3. Wählen Sie alle drei Textzeilen aus und legen Sie in der Symbolleiste „Zeilenhöhe auf 40px.

    Festlegen der Zeilenhöhe {width="600" modal="regular"}

  4. Stellen Sie die Font Size für jede Zeile wie folgt ein:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Zeile Schriftgröße
    Zeile 1: 28px
    Zeile 2: 24px
    Zeile 3: 18px

    Da dieser Block an einer beliebigen Stelle auf der Seite platziert werden kann, sollten Sie anstelle der Überschriftenebenen das standardmäßige Absatzformat verwenden. Machen Sie sich außerdem keine Sorgen, dass der Text noch nicht korrekt in der Spalte umgebrochen wird.

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

Aufgabe 4: Link hinzufügen

In der ersten Übung haben Sie gelernt, wie Sie mit dem Inhaltstyp Schaltfläche einen Link erstellen können. Dieses Beispiel zeigt, wie ein Link von der Editor-Symbolleiste eingefügt wird.

  1. Öffnen Sie in einer anderen Browser-Registerkarte die Storefront und navigieren Sie zur Seite, die das Ziel des Links sein soll.

    Sie können die vollqualifizierte URL oder eine relative URL verwenden, bei der der Verweis auf Ihre Store-Domain weggelassen wird.

    Vollständige URL
    : https://mystore.com/women/tops-women/tees-women.html

    Relative URL
    : ../women/tops-women/tees-women.html

  2. Kehren Sie zur Registerkarte Page Builder Workspace und zum Texteditor zurück, wählen Sie den Shop Tees > Text in der dritten Zeile aus und wählen Sie Fett ( Fett ) in der Editor-Symbolleiste.

  3. Während der Shop Tees > Text in der dritten Zeile noch ausgewählt ist, wählen Sie Link einfügen/bearbeiten ( Schaltfläche Link einfügen/bearbeiten ) in der Editor-Symbolleiste aus.

    Link einfügen {width="600" modal="regular"}

  4. Geben Sie URL den relativen Link ein, den Sie vorbereitet haben.

  5. Legen Sie Target auf None fest.

    Bei dieser Einstellung wird die Seite im selben Browser-Fenster geöffnet, anstatt eine neue Registerkarte zu öffnen.

  6. Geben Sie Title Shop Tees ein.

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

  7. Um den Link zu speichern und zum Page Builder Workspace zurückzukehren, klicken Sie auf OK.

    Link-Details {width="600" modal="regular"}

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

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

  9. Klicken Sie oben rechts auf Save.

Schritt 3: Preisregel hinzufügen

  1. Öffnen Sie den T-Shirt Promo dynamischen Block im Bearbeitungsmodus erneut.

  2. Erweitern Sie Erweiterungsauswahl den Abschnitt Related Promotions und klicken Sie auf Add Cart Price Rules.

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

  3. Aktivieren auf der Seite „Zugehörige zum Warenkorb hinzufügen“ das Kontrollkästchen für die Preisregel 3 T-Shirts kaufen und erhalten Sie die 4.-Preisregel und klicken Sie auf Add Selected.

    Hinzufügen einer Preisregel für den zugehörigen Warenkorb {width="600" modal="regular"}

    Die Preisregel wird im Abschnitt Zugehörige Promotions unter „Zugehörige -Preisregel“. Sie können mehrere Preisregeln mit einem dynamischen Block verknüpfen. In diesem einfachen Beispiel wird jedoch nur ein Beispiel verwendet.

    Ausgewählte Warenkorb-Preisregel {width="600" modal="regular"}

  4. Klicken Sie oben rechts auf Save.

Schritt 4: Dynamischen Block zu einer Seite hinzufügen

  1. Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Pages

  2. Suchen Sie die Einfache Seite die Sie in der ersten exemplarischen Übung erstellt haben, und öffnen Sie sie im Bearbeitungsmodus.

  3. Erweitern Sie Erweiterungsauswahl den Abschnitt Content und klicken Sie auf Edit with Page Builder.

  4. Bewegen Sie den Mauszeiger über die oberste Zeile mit demselben Bild wie der dynamische Block, um die Toolbox und das Entfernen-Symbol ( Entfernen {width="20"} anzuzeigen.

    Um das Entfernen der Zeile auf der Seite zu bestätigen, klicken Sie auf OK .

  5. Ziehen Sie im Page Builder Bedienfeld unter Layout ​einen neuen Row ​Platzhalter an den Anfang des Stadiums.

  6. Erweitern Sie im Page Builder Bedienfeld Add Content und ziehen Sie einen Dynamic Block Platzhalter in die neue Zeile.

    Ziehen eines dynamischen Blocks auf die Zeile {width="600" modal="regular"}

  7. Bewegen Sie den Mauszeiger über den Container mit den dynamischen Blöcken, um die Toolbox anzuzeigen, und wählen Sie Symbol Einstellungen (Symbol {width="20"}) aus.

    Toolbox für dynamische Blöcke {width="600" modal="regular"}

  8. Klicken Sie auf der Edit Dynamic Block ​Seite auf Select Dynamic Block.

    Dynamischen Block auswählen {width="600" modal="regular"}

  9. Suchen Sie den erstellten dynamischen Tee Shirt Promo ​und klicken Sie auf Select.

    Eine Zusammenfassung der Informationen zu dynamischen Blöcken wird unten angezeigt.

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

  10. Akzeptieren Sie die Template, Dynamic Block Block Template.

  11. Klicken Sie abschließend auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

    Dynamischer Block in der Seitenvorschau {width="600" modal="regular"}

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

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

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

Sie haben den zweiten Teil der Blockübung abgeschlossen. Denken Sie daran, Ihre Arbeit als Referenz beizubehalten.

Teil 3: Dynamischen Block aktualisieren

In diesem letzten Teil der Übung bearbeiten Sie einen dynamischen Block, während die Seite in Ihrem Store live ist. Melden Sie sich dann beim Store als Mitglied des Kundensegments an, damit der Block angezeigt wird.

Dynamischer Block im Storefront als Beispiel {width="600" modal="regular"}

Schritt 1: Dynamischen Block bearbeiten

  1. Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Dynamic Blocks.

  2. Suchen Sie den Tee Shirt Promo ​dynamischen Block im Raster und öffnen Sie ihn im Bearbeitungsmodus.

  3. Erweitern Sie Erweiterungsauswahl den Abschnitt Content und klicken Sie auf Edit with Page Builder.

  4. Spaltenbreite ändern:

    • Bewegen Sie den Mauszeiger über den Rahmen zwischen den beiden Spalten.

    • Halten Sie die Maustaste gedrückt, und ziehen Sie den Rahmen um zwei Unterteilungen nach links.

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

      Die erste Spalte ist nun vier von zwölf (4/12) Rastereinteilungen breit, die zweite Spalte acht von zwölf (8/12) Einteilungen breit.

      Zwei ungleiche Spalten {width="600" modal="regular"}

  5. Textfarbe ändern:

    • Wählen Sie die ersten beiden Textzeilen aus.

    • Wählen Sie in der Editor-Symbolleiste Text Color und klicken Sie auf das White.

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

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

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

  7. Klicken Sie oben rechts auf Save.

Schritt 2: Dynamischen Block anzeigen

Da dieser dynamische Block nur für Mitglieder eines bestimmten Kundensegments sichtbar ist, müssen Sie sich als Kunde anmelden, der Mitglied des Kundensegments ist, um die Promotion zu sehen. In diesem Beispiel wird der Block nur weiblichen Kunden angezeigt.

  1. Öffnen Sie ein Browser-Fenster zu Ihrer Storefront.

  2. Um Ihre Beispielseite anzuzeigen, ändern Sie die URL in der Adressleiste wie folgt:

    mystore.com/sample-page

    Wenn Ihr Store so konfiguriert ist, dass es das HTML-Suffix enthält, schließen Sie das Suffix wie folgt ein:

    mystore.com/sample-page.html

  3. Melden Sie sich als Kundin oder Kunde an:

    • Klicken Sie oben rechts auf der Startseite auf Sign In.

    • Wenn die Beispiel-Luma-Daten auf Ihrem System installiert sind, verwenden Sie die folgenden Anmeldeinformationen:

      Email - roni_cost@example.com

      Password - roni_cost3@example.com

    • Klicken Sie auf Sign In.

    • Kehren Sie zur Beispielseite zurück, um den dynamischen Block anzuzeigen, den Sie mit der T-Shirt-Aktion erstellt haben.

    Dynamischer Block für ein Kundensegment angezeigt {width="700" modal="regular"}

Sie haben die Blockübung abgeschlossen. Denken Sie daran, Ihre Arbeit als Referenz beizubehalten.

Wenn Sie fertig sind, fahren Sie mit Teil 3: Kataloginhalt

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d