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

在​ 管理員 ​側邊欄上，移至​ Content > Elements>Blocks。

按一下右上角的​ Add New Block。

針對​ Block Title，輸入Google Map。

針對​ Identifier，輸入google-map。

選擇要提供區塊的​ Store View。

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

按一下右上角的​ Save。

向下捲動至Page Builder內容預覽（目前空白），然後按一下​ Edit with Page Builder。

在Page Builder面板中，展開​ Media ​並將​ Map ​預留位置拖曳到舞台。

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

如果為商店設定Google Maps，則會顯示商店位置的地圖。

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

如果尚未為您的存放區設定Google Maps，則會顯示預留位置對應。

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

在舞台的右上角，按一下​ 關閉全熒幕 （ ）圖示。

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

在右上角，按一下​ Save ​箭頭並選擇​ Save & Close。

前往Google Cloud平台主控台。

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

若要設定您的API認證，請依照Google Maps檔案中的指示操作。

將API金鑰複製到剪貼簿。

返回Commerce管理員並移至​ Stores > Settings>Configuration。

在左側面板的​ General ​下，選擇​ Content Management。

展開 Advanced Content Tools。

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

如需Content Management Advanced Tools組態選項的詳細資訊，請參閱​ 組態參考指南。

針對​ Google Maps API Key，貼上您複製的金鑰。

按一下​ Test Key。

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

在驗證您的金鑰之後，按一下​ Save Config。

在​ 管理員 ​側邊欄上，移至​ Content > Elements>Pages。

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

展開 Content ​區段，然後按一下​ Edit with Page Builder ​或內容預覽區域內。

在​ Layout ​下方的Page Builder面板中，將​ Row ​預留位置拖曳到舞台頂端。

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

在Page Builder面板中，展開​ Add Content ​並將​ Block ​預留位置拖曳到新列。

將滑鼠懸停在空白的區塊容器上以顯示工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

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

在編輯區塊頁面上，按一下​ Select Block。

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

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

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

在格線中，按一下​ Select ​以選擇Google Maps區塊。

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

在舞台的右上角，按一下​ 關閉全熒幕 （ ）圖示。

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

在右上角，按一下​ Save ​箭頭並選擇​ Save & Close。

在​ 管理員 ​側邊欄上，移至​ Content > Elements>Dynamic Blocks。

{width="700" modal="regular"}

按一下右上角的​ Add Dynamic Block。

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

完成新動態區塊的基本設定：

• 將​ Enable Dynamic Block ​設為Yes。

• 針對​ Dynamic Block Name，輸入Tee Shirt Promo。

• 將​ Dynamic Block Type ​設為Content Area並按一下​ Done。

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

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

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

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

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

將滑鼠懸停在列容器上以顯示工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

在​ Appearance ​底下，選擇​ Full Bleed。

針對​ Minimum Height，輸入400px。

捲動至「Background」區段，並按一下「Select from Gallery」並選擇第一個教學課程中上傳的wide-banner-background.png影像以設定​ Background Image。

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

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

在Page Builder面板中，展開​ Elements ​並將​ 文字 ​預留位置拖曳到第二欄。

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

在編輯器中輸入下列三行文字：

Even more ways to mix and match.

Buy 3 Luma tees and get a 4th free.

Shop Tees >

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

選取全部三行文字，並使用工具列將​ 行高 ​設定為40px。

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

設定每行的​ Font Size，如下所示：

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

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

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

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

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

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

返回Page Builder工作區索引標籤與文字編輯器，選取第三行中的Shop Tees >文字，然後在編輯器工具列中選擇​ 粗體 （ ）。

若仍在選取第三行的Shop Tees >文字，請在編輯器工具列中選擇​ 插入/編輯連結 （ ）。

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

針對​ URL，輸入您準備的相對連結。

將​ Target ​設為None。

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

針對​ Title，輸入Shop Tees。

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

若要儲存連結並返回Page Builder工作區，請按一下​ OK。

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

在舞台的右上角，按一下​ 關閉全熒幕 （ ）圖示。

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

按一下右上角的​ Save。

在編輯模式中再次開啟​ T恤促銷活動 ​動態區塊。

展開 Related Promotions ​區段，然後按一下​ Add Cart Price Rules。

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

在​ 新增相關購物車價格規則 ​頁面上，選取​ 購買3件T恤衫的核取方塊並取得第4個免費 ​價格規則，然後按一下​ Add Selected。

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

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

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

按一下右上角的​ Save。

在​ 管理員 ​側邊欄中，移至​ Content > Elements>Pages

尋找您在第一個逐步解說練習中建立的​ 簡單頁面，並以編輯模式開啟。

展開 Content ​區段，然後按一下​ Edit with Page Builder。

將滑鼠停留在頂端列，其影像與動態區塊相同，以顯示工具箱和​ 移除 （ {width="20"} ）圖示。

若要確認從頁面中移除該列，請按一下「OK」。

在​ Layout ​下方的Page Builder面板中，將新的​ Row ​預留位置拖曳到舞台頂端。

在Page Builder面板中，展開​ Add Content ​並將​ Dynamic Block ​預留位置拖曳到新列。

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

將游標停留在動態區塊容器上以顯示工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

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

在​ Edit Dynamic Block ​頁面上，按一下​ Select Dynamic Block。

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

尋找您建立的​ Tee Shirt Promo ​動態區塊，然後按一下​ Select。

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

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

接受預設​ Template，Dynamic Block Block Template。

完成後，按一下​ Save ​儲存設定並返回Page Builder工作區。

頁面預覽中的 {width="600" modal="regular"}

在舞台的右上角，按一下​ 關閉全熒幕 （ ）圖示。

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

在右上角，按一下​ Save ​箭頭並選擇​ Save & Close。

在​ 管理員 ​側邊欄中，移至​ Content > Elements>Dynamic Blocks。

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

展開 Content ​區段，然後按一下​ Edit with Page Builder。

變更欄寬：

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

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

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

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

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

變更文字色彩：

• 選取前兩行文字。

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

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

在舞台的右上角，按一下​ 關閉全熒幕 （ ）圖示。

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

按一下右上角的​ Save。

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

若要檢視範例頁面，請修改網址列中的URL，如下所示：

mystore.com/sample-page

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

mystore.com/sample-page.html

以女性客戶身分登入：

• 按一下首頁的右上角​ Sign In。

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

  Email - roni_cost@example.com

  Password - roni_cost3@example.com

• 按一下​ Sign In。

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

已針對客戶區段顯示 {width="700" modal="regular"}