Page Builder 逐步解說第2部分:區塊

下列練習將說明兩者之間的差異 簡單區塊動態區塊,以及如何使用 Page Builder 以建立每種型別的區塊。

NOTE
Page Builder 具有名為的新內容型別 橫幅,此專案在第一個逐步解說練習中特別顯示,且與先前的橫幅功能無關。 中先前的Banner選項是什麼 內容功能表,現在為 動態區塊.

店面中的動態區塊

本練習假設您已完成 第1部分:簡單頁面,包括必要條件和 下載的範例檔案. 依序依照此逐步解說練習的部分進行。

NOTE
這些逐步解說練習已更新,以反映最近對 Page Builder 2.4.1版本中的workspace 。 如果您使用舊版Adobe Commerce,請使用 Page Builder 包含在中的練習 Commerce 2.3使用手冊.

第1部分:建立簡單區塊

在這個逐步解說練習中,您會建立一個簡單的區塊,其內容來自 Google Maps. 簡單區塊有時稱為 CMS區塊靜態區塊,因為內容不會變更。 簡單區塊適用於您可能想要重複使用的內容。

步驟1:建立區塊

  1. 管理員 側欄,前往 Content > Elements>Blocks.

  2. 在右上角,按一下 Add New Block.

  3. Block Title,輸入 Google Map.

  4. Identifier,輸入 google-map.

  5. 選擇 Store View 區塊可用的位置。

    區塊資訊 {width="600" modal="regular"}

  6. 在右上角,按一下 Save.

步驟2:新增 Google Map

  1. 向下捲動至 Page Builder 內容預覽(目前空白)並按一下 Edit with Page Builder.

  2. 在 Page Builder 面板,展開 Media 並拖曳 Map 舞台的預留位置。

    將地圖拖曳到舞台 {width="600" modal="regular"}

    如果符合下列條件,則會顯示商店位置的地圖: Google Maps 已針對您的存放區進行設定。

    為您的商店設定Google Map {width="600" modal="regular"}

    出現預留位置對應,如果 Google Maps 尚未為您的存放區設定。

    Google Maps 預留位置 {width="600" modal="regular"}

  3. 在舞台的右上角,按一下 關閉全熒幕 ( 關閉全熒幕圖示 )圖示。

    按一下此圖示會返回 Content ​顯示預覽之區塊的區段。

  4. 在右上角,按一下 Save 箭頭並選擇 Save & Close.

步驟3:設定 Google Maps

如果 Google Maps 已針對您的商店進行設定,您可以略過此步驟,並繼續下一步。

  1. 前往 Google雲端平台主控台.

  2. 按一下專案下拉式清單,然後選取或建立您要新增API金鑰的專案。

  3. 若要設定您的API認證,請依照 指示 在 Google Maps 檔案。

  4. 將API金鑰複製到剪貼簿。

  5. 返回 Commerce 管理並前往 Stores > Settings>Configuration.

  6. 在左側面板中的 General,選擇​ Content Management.

  7. 展開 展開選擇器 Advanced Content Tools.

    進階內容工具 {width="600" modal="regular"}

    如需關於的詳細資訊 Content Management Advanced Tools 組態選項,請參閱 設定參考指南.

  8. Google Maps API Key,貼上您複製的金鑰。

  9. 按一下 Test Key.

    如果您的金鑰發生問題,請返回 Google Maps 平台網站以解決問題。 然後再試一次。

  10. 在您的金鑰通過驗證後,按一下 Save Config.

步驟4:將區塊新增至頁面

  1. 管理員 側欄,前往 Content > Elements>Pages.

  2. 在格線中,尋找 Simple Page ​您在第一個教學課程中建立並選取​ Edit ​在​ Action 欄。

  3. 展開 展開選擇器 Content 區段並按一下 Edit with Page Builder 或在內容預覽區域內。

  4. 在 Page Builder 下的面板 Layout,拖曳​ Row ​舞台頂端的預留位置。

    將列新增至舞台頂端 {width="600" modal="regular"}

  5. 在 Page Builder 面板,展開 Add Content 並拖曳 Block 新列的預留位置。

  6. 將滑鼠懸停在空白的區塊容器上以顯示工具箱,然後選擇 設定 ( 設定圖示 {width="20"} )圖示。

    區塊工具箱 {width="600" modal="regular"}

  7. 在編輯區塊頁面上,按一下 Select Block.

    選取區塊 {width="600" modal="regular"}

  8. 在搜尋方塊中,輸入 map 並按Enter/Return鍵以尋找您建立的區塊。

    在清單中尋找區塊 {width="600" modal="regular"}

  9. 在格線中,按一下 Select 以選擇 Google Maps 區塊。

  10. 在右上角,按一下 Save 以儲存設定並返回 Page Builder 工作區。

  11. 在舞台的右上角,按一下 關閉全熒幕 ( 關閉全熒幕圖示 )圖示。

    按一下此圖示會返回 Content ​顯示預覽之頁面的區段。

  12. 在右上角,按一下 Save 箭頭並選擇 Save & Close.

恭喜! 您已完成「區塊」練習的第一部分。 請務必保留您的工作以作參考。

第2部分:建立動態區塊

動態區塊所包含的邏輯會判斷區塊出現的位置、時間以及對象。 在此逐步解說練習中,您可以針對符合價格規則條件時所觸發的促銷,建立動態區塊,此區塊只會顯示給特定客戶區段。 此範例的結果類似於第一個練習中建立的橫幅,但有邏輯控制其出現在店面中的時間。

Luma Tee促銷活動範例

步驟1:建立新的動態區塊

  1. 管理員 側欄,前往 Content > Elements>Dynamic Blocks.

    動態區塊清單 {width="700" modal="regular"}

  2. 在右上角,按一下 Add Dynamic Block.

    新增動態區塊頁面 {width="600" modal="regular"}

  3. 完成新動態區塊的基本設定:

    • 設定 Enable Dynamic BlockYes.

    • Dynamic Block Name,輸入 Tee Shirt Promo.

    • 設定 Dynamic Block TypeContent Area 並按一下 Done.

      動態區塊型別決定了 頁面配置 區塊已放置的位置。 為商店設定動態區塊時,請考慮頁面配置和 主題,讓您可以善用可用空間。 有些存放區具有限定為固定寬度的作用中內容區域,有些則延伸熒幕的完整寬度。

      動態區塊型別設定 {width="600" modal="regular"}

    • Customer Segment,勾選您要套用至動態區塊之每個區段的核取方塊,然後按一下 完成 以儲存區段清單。

      在下列範例中,有兩種 客戶區段 依性別識別註冊客戶的服務。 此動態區塊僅會顯示在註冊女性客戶在您的商店購物時登入其帳戶中。

      選擇客戶區段 {width="600" modal="regular"}

步驟2:完成設定

向下捲動至 Content ​區段,顯示空白 Page Builder 內容預覽,然後按一下​ Edit with Page Builder. 接著,完成下列作業:

工作1: 新增背景影像

  1. 將滑鼠懸停在列容器上以顯示工具箱,然後選擇 設定 ( 設定圖示 {width="20"} )圖示。

  2. Appearance,選擇​ Full Bleed.

  3. Minimum Height,輸入 400px.

  4. 捲動至 Background ​區段並設定​ Background Image ​按一下​ Select from Gallery ​並選取 wide-banner-background.png 已在第一個教學課程中上傳影像。

  5. 在右上角,按一下 Save 以套用設定並返回 Page Builder 工作區。

    含有影像的列 {width="600" modal="regular"}

工作2: 新增欄

在 Page Builder 下的面板 Layout,拖曳​ Column ​列上的預留位置。

將欄型別拖曳到列

該列現在分成兩個寬度相等的欄。

工作3: 新增文字

  1. 在 Page Builder 面板,展開 Elements 並拖曳 文字 第二欄的預留位置。

    將文字方塊拖曳到第二欄 {width="600" modal="regular"}

  2. 在編輯器中輸入下列三行文字:

    Even more ways to mix and match.

    Buy 3 Luma tees and get a 4th free.

    Shop Tees >

    輸入欄文字 {width="600" modal="regular"}

  3. 選取全部三行文字,並使用工具列設定 行高40px.

    設定行高 {width="600" modal="regular"}

  4. 設定 Font Size 每行如下:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    折線圖 字型大小
    第1行: 28px
    第2行: 24px
    第3行: 18px

    由於此區塊可放置在頁面上的任何位置,因此請使用預設的段落樣式,而不是標題層級。 此外,也無須擔心欄中的文字尚未正確換行。

    格式化文字 {width="600" modal="regular"}

工作4: 新增連結

在第一個練習中,您已瞭解如何使用 按鈕 內容型別以建立連結。 此範例說明如何從編輯器工具列插入連結。

  1. 在另一個瀏覽器標籤中,開啟店面並導覽至將成為連結目標目的地的頁面。

    您可以使用完整限定的URL或省略商店網域參照的相對URL。

    完整URL : https://mystore.com/women/tops-women/tees-women.html

    相對URL : ../women/tops-women/tees-women.html

  2. 返回 Page Builder 工作區索引標籤和文字編輯器,選取 Shop Tees > 在第三行輸入文字,然後選擇 粗體 ( 粗體按鈕 )時,退出該頁面。

  3. 使用 Shop Tees > 在第三行仍被選取的文字,選擇 插入/編輯連結 ( 插入/編輯連結按鈕 )時,退出該頁面。

    插入連結 {width="600" modal="regular"}

  4. URL,輸入您準備的相對連結。

  5. 設定 TargetNone.

    此設定會在相同的瀏覽器視窗中開啟頁面,而非開啟新標籤。

  6. Title,輸入 Shop Tees.

    有些瀏覽器會將「標題」連結屬性當做工具提示使用。

  7. 若要儲存連結並返回 Page Builder 工作區,按一下 OK.

    連結詳細資料 {width="600" modal="regular"}

  8. 在舞台的右上角,按一下 關閉全熒幕 ( 關閉全熒幕圖示 )圖示。

    按一下此圖示會返回 Content ​顯示預覽的動態區塊的區段。

  9. 在右上角,按一下 Save.

步驟3:新增價格規則

  1. 開啟 T恤促銷 再次在編輯模式下編輯動態區塊。

  2. 展開 展開選擇器 Related Promotions 區段並按一下 Add Cart Price Rules.

    相關促銷活動 {width="600" modal="regular"}

  3. 新增相關的購物車價格規則 頁面上,勾選的核取方塊 購買3件T恤並免費購買4件 價格規則與點按 Add Selected.

    新增相關的購物車價格規則 {width="600" modal="regular"}

    價格規則會顯示在 相關促銷活動 區段,在 相關購物車價格規則. 您可以將多個價格規則與動態區塊產生關聯。 不過,這個簡單的範例只使用一個。

    選取的購物車價格規則 {width="600" modal="regular"}

  4. 在右上角,按一下 Save.

步驟4:將動態區塊新增至頁面

  1. 管理員 側欄,前往 Content > Elements>Pages

  2. 尋找 簡單頁面 您建立於 第一次逐步解說練習 並以編輯模式開啟。

  3. 展開 展開選擇器 Content 區段並按一下 Edit with Page Builder.

  4. 將滑鼠停留在頂端列(與動態區塊有相同的影像),以顯示工具箱和 移除 ( 移除圖示 {width="20"} )圖示。

    若要確認從頁面中移除該列,請按一下 OK .

  5. 在 Page Builder 下的面板 Layout,拖曳新的​ Row ​舞台頂端的預留位置。

  6. 在 Page Builder 面板,展開 Add Content 並拖曳 Dynamic Block 新列的預留位置。

    將動態區塊拖曳至列 {width="600" modal="regular"}

  7. 將游標停留在動態區塊容器上以顯示工具箱,然後選擇 設定 ( 設定圖示 {width="20"} )圖示。

    動態區塊工具箱 {width="600" modal="regular"}

  8. Edit Dynamic Block ​頁面,按一下​ Select Dynamic Block.

    選取動態區塊 {width="600" modal="regular"}

  9. 尋找 Tee Shirt Promo ​您建立並按一下「 」的動態區塊​ Select.

    動態區塊資訊的摘要會顯示於下方。

    動態區塊資訊 {width="600" modal="regular"}

  10. 接受預設值 TemplateDynamic Block Block Template.

  11. 完成後,按一下 Save 以儲存設定並返回 Page Builder 工作區。

    頁面預覽中的動態區塊 {width="600" modal="regular"}

  12. 在舞台的右上角,按一下 關閉全熒幕 ( 關閉全熒幕圖示 )圖示。

    按一下此圖示會返回 Content ​顯示預覽之頁面的區段。

  13. 在右上角,按一下 Save 箭頭並選擇 Save & Close.

您已完成「區塊」練習的第二部分。 請務必保留您的工作以作參考。

第3部分:更新動態區塊

在本練習的最後一部分,您會在頁面在您的存放區中上線時,編輯動態區塊。 然後,以客戶區段成員的身分登入存放區,讓區塊出現。

店面中的動態區塊範例

步驟1:編輯動態區塊

  1. 管理員 側欄,前往 Content > Elements>Dynamic Blocks.

  2. 尋找您的 Tee Shirt Promo ​格線中的動態區塊,並在編輯模式中開啟。

  3. 展開 展開選擇器 Content 區段並按一下 Edit with Page Builder.

  4. 變更欄寬:

    • 將游標停留在兩欄之間的邊框上。

    • 按住滑鼠鍵,並將邊框向左拖曳兩個區段。

      格線分割 {width="600" modal="regular"}

      第一欄現在是12 (4/12)個網格分割槽中的4個分割槽,第二欄是12 (8/12)個分割槽中的8個分割槽。

      兩個不相等的欄 {width="600" modal="regular"}

  5. 變更文字色彩:

    • 選取前兩行文字。

    • 在編輯器工具列上,選擇 Text Color 並按一下 White 色票。

    文字顏色 {width="600" modal="regular"}

  6. 在舞台的右上角,按一下 關閉全熒幕 ( 關閉全熒幕圖示 )圖示。

    按一下此圖示會返回 Content ​顯示預覽的動態區塊的區段。

  7. 在右上角,按一下 Save.

步驟2:檢視動態區塊

由於此動態區塊僅對特定客戶區段的成員可見,因此您必須以客戶區段成員的客戶身分登入,才能檢視促銷活動。 在此範例中,區塊僅對女性客戶顯示。

  1. 開啟瀏覽器視窗到您的店面。

  2. 若要檢視範例頁面,請修改網址列中的URL,如下所示:

    mystore.com/sample-page

    如果您的存放區設定為包含html尾碼,請依照以下方式包含尾碼:

    mystore.com/sample-page.html

  3. 以女性客戶身分登入:

    • 在首頁的右上角,按一下 Sign In.

    • 如果您的系統上已安裝範例Luma資料,請使用以下憑證:

      Email - roni_cost@example.com

      Password - roni_cost3@example.com

    • 按一下 Sign In.

    • 返回範例頁面,以檢視您以T恤促銷活動建立的動態區塊。

    為客戶區段顯示的動態區塊 {width="700" modal="regular"}

您已完成「區塊」練習。 請務必保留您的工作以作參考。

準備就緒後,請繼續前往 第3部分:目錄內容

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