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.
{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.
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
-
Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Blocks.
-
Klicken Sie oben rechts auf Add New Block.
-
Geben Sie Block Title
Google Map
ein. -
Geben Sie Identifier
google-map
ein. -
Wählen Sie die Store View aus, in der der Block verfügbar sein soll.
{width="600" modal="regular"}
-
Klicken Sie oben rechts auf Save.
Schritt 2: Google Map hinzufügen
-
Scrollen Sie nach unten zur Page Builder Inhaltsvorschau (derzeit leer) und klicken Sie auf Edit with Page Builder.
-
Erweitern Sie im Page Builder Bedienfeld Media und ziehen Sie einen Map Platzhalter auf das Bühnenbild.
{width="600" modal="regular"}
Eine Zuordnung zu Ihrem Store-Standort wird angezeigt, wenn Google Maps für Ihren Store konfiguriert ist.
{width="600" modal="regular"}
Eine Platzhalterzuordnung wird angezeigt, wenn Google Maps noch nicht für Ihren Store konfiguriert ist.
{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 für den Block mit der angezeigten Vorschau zurück.
-
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.
-
Wechseln Sie zur Google Cloud Platform-Konsole.
-
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.
-
Um Ihre API-Anmeldeinformationen zu konfigurieren, folgen Sie den Anweisungen in der Google Maps.
-
Kopieren Sie Ihren API-Schlüssel in die Zwischenablage.
-
Kehren Sie zum Commerce Admin zurück und gehen Sie zu Stores > Settings>Configuration.
-
Wählen Sie im linken Bedienfeld unter General die Option Content Management aus.
-
Erweitern Sie Advanced Content Tools.
{width="600" modal="regular"}
Weitere Informationen zu den Content Management Advanced Tools Konfigurationsoptionen finden Sie im Konfigurationshandbuch.
-
Fügen Sie Google Maps API Key den kopierten Schlüssel ein.
-
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.
-
Nachdem der Schlüssel überprüft wurde, klicken Sie auf Save Config.
Schritt 4: Block zu einer Seite hinzufügen
-
Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Pages.
-
Suchen Sie im Raster die Simple Page, die Sie im ersten Tutorial erstellt haben, und wählen Sie Edit in der Spalte Action aus.
-
Erweitern Sie den Abschnitt Content und klicken Sie auf Edit with Page Builder oder in den Bereich für die Inhaltsvorschau.
-
Ziehen Sie im Page Builder Bedienfeld unter Layout einen Row Platzhalter an den Anfang des Stadiums.
{width="600" modal="regular"}
-
Erweitern Sie im Page Builder Bedienfeld Add Content und ziehen Sie einen Block Platzhalter in die neue Zeile.
-
Bewegen Sie den Mauszeiger über den leeren Blockcontainer, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ) aus.
{width="600" modal="regular"}
-
Klicken Sie auf der Seite Block bearbeiten auf Select Block.
{width="600" modal="regular"}
-
Geben Sie im Suchfeld
map
ein und drücken Sie die Eingabetaste, um den erstellten Block zu finden.{width="600" modal="regular"}
-
Klicken Sie im Raster auf Select , um den Google Maps auszuwählen.
-
Klicken Sie oben rechts auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.
-
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.
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.
{width="600" modal="regular"}
Schritt 1: Neuen dynamischen Block erstellen
-
Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Dynamic Blocks.
{width="700" modal="regular"}
-
Klicken Sie oben rechts auf Add Dynamic Block.
{width="600" modal="regular"}
-
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.
{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.
{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
-
Bewegen Sie den Mauszeiger über den Zeilen-Container, um die Toolbox anzuzeigen, und wählen das Symbol Einstellungen {width="20"}) aus.
-
Wählen Sie unter Appearance die Option Full Bleed aus.
-
Geben Sie Minimum Height
400px
ein. -
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. -
Klicken Sie oben rechts auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.
{width="600" modal="regular"}
Aufgabe 2: Spalten hinzufügen
Ziehen Sie im Page Builder unter Layout einen Column Platzhalter auf die Zeile.
{width="600" modal="regular"}
Die Zeile ist jetzt in zwei Spalten gleicher Breite unterteilt.
Aufgabe 3: Text hinzufügen
-
Erweitern Sie im Page Builder Bedienfeld Elements und ziehen Sie einen Text-Platzhalter in die zweite Spalte.
{width="600" modal="regular"}
-
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 >
{width="600" modal="regular"}
-
Wählen Sie alle drei Textzeilen aus und legen Sie in der Symbolleiste „Zeilenhöhe auf
40px
.{width="600" modal="regular"}
-
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.
{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.
-
Ö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
-
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 ( ) in der Editor-Symbolleiste. -
Während der
Shop Tees >
Text in der dritten Zeile noch ausgewählt ist, wählen Sie Link einfügen/bearbeiten ( ) in der Editor-Symbolleiste aus.{width="600" modal="regular"}
-
Geben Sie URL den relativen Link ein, den Sie vorbereitet haben.
-
Legen Sie Target auf
None
fest.Bei dieser Einstellung wird die Seite im selben Browser-Fenster geöffnet, anstatt eine neue Registerkarte zu öffnen.
-
Geben Sie Title
Shop Tees
ein.Das Link-Attribut Titel wird von einigen Browsern als QuickInfo verwendet.
-
Um den Link zu speichern und zum Page Builder Workspace zurückzukehren, klicken Sie auf OK.
{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 Abschnitt Content für den dynamischen Block mit der angezeigten Vorschau zurück.
-
Klicken Sie oben rechts auf Save.
Schritt 3: Preisregel hinzufügen
-
Öffnen Sie den T-Shirt Promo dynamischen Block im Bearbeitungsmodus erneut.
-
Erweitern Sie den Abschnitt Related Promotions und klicken Sie auf Add Cart Price Rules.
{width="600" modal="regular"}
-
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.
{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.
{width="600" modal="regular"}
-
Klicken Sie oben rechts auf Save.
Schritt 4: Dynamischen Block zu einer Seite hinzufügen
-
Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Pages
-
Suchen Sie die Einfache Seite die Sie in der ersten exemplarischen Übung erstellt haben, und öffnen Sie sie im Bearbeitungsmodus.
-
Erweitern Sie den Abschnitt Content und klicken Sie auf Edit with Page Builder.
-
Bewegen Sie den Mauszeiger über die oberste Zeile mit demselben Bild wie der dynamische Block, um die Toolbox und das Entfernen-Symbol ( {width="20"} anzuzeigen.
Um das Entfernen der Zeile auf der Seite zu bestätigen, klicken Sie auf OK .
-
Ziehen Sie im Page Builder Bedienfeld unter Layout einen neuen Row Platzhalter an den Anfang des Stadiums.
-
Erweitern Sie im Page Builder Bedienfeld Add Content und ziehen Sie einen Dynamic Block Platzhalter in die neue Zeile.
{width="600" modal="regular"}
-
Bewegen Sie den Mauszeiger über den Container mit den dynamischen Blöcken, um die Toolbox anzuzeigen, und wählen Sie Symbol Einstellungen {width="20"}) aus.
{width="600" modal="regular"}
-
Klicken Sie auf der Edit Dynamic Block Seite auf Select Dynamic Block.
{width="600" modal="regular"}
-
Suchen Sie den erstellten dynamischen Tee Shirt Promo und klicken Sie auf Select.
Eine Zusammenfassung der Informationen zu dynamischen Blöcken wird unten angezeigt.
{width="600" modal="regular"}
-
Akzeptieren Sie die Template,
Dynamic Block Block Template
. -
Klicken Sie abschließend auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.
{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 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.
{width="600" modal="regular"}
Schritt 1: Dynamischen Block bearbeiten
-
Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Dynamic Blocks.
-
Suchen Sie den Tee Shirt Promo dynamischen Block im Raster und öffnen Sie ihn im Bearbeitungsmodus.
-
Erweitern Sie den Abschnitt Content und klicken Sie auf Edit with Page Builder.
-
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.
{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.
{width="600" modal="regular"}
-
-
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.
{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 Abschnitt Content für den dynamischen Block mit der angezeigten Vorschau zurück.
-
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.
-
Öffnen Sie ein Browser-Fenster zu Ihrer Storefront.
-
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
-
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.
{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