文章彙整

什麼?開源版也有PageBuilder了!Page Builder功能介紹(下)

Astral WebBy Astral Web 1 month agoNo Comments
首頁  /  Magento  /  Magento2 開源版  /  什麼?開源版也有PageBuilder了!Page Builder功能介紹(下)

上篇的PageBuilder功能介紹大家都觀看過了嗎?文中介紹了前三項主題『何謂Page Builder & Page Builder 影響的層級』、『Block 層級的應用 & Widget的引出使用』及『Catalog Content 層級應用 & Simple Page 層級應用』,今天就要繼續與各位讀者分享PageBuilder功能下篇囉!Page Builder常用元素介紹一起來瞧瞧吧!

Page Builder 常用元素介紹

Button 元素應用

假設想在前台建立3個按鈕,且這三個按鈕都會在同一個row,如下圖。執行的方法如下

執行方法如下:

  1. 將左側的row拖曳至右側想放置區塊
    – 點擊row元素的小齒輪
    Advanced Margin:下方設定 40
    完成後點擊右上角save按鈕

  2. 將左側column元素拖曳至右側的row裡,須放置2次才會有3個column
    – 點擊column元素的小齒輪
    Advanced Padding:上下方設定 10
    完成後點擊右上角save按鈕

  3. 在column裡拖移成三等份,每4為一個單位,就可以切成3等分
    PS:3個Column裡的小齒輪設定都要比照第二步

  4. 將左側button元素拖移至右側column裡
    品牌總覽:
    – 點擊button的小齒輪圖示 (母層)
    Appearance:選擇 Stacked
    – Advanced Alignment:選擇 Center
    – Advanced Padding:左右設定 10
    – 點擊button文字,再點擊button小齒輪圖示 (子層)
    – Content button text:輸入按鈕的文案 (品牌總覽)
    – Button type:選擇要導流的類型,這裡選Link
    – Button Link:選擇要導流的位置,這裡選Url,再輸入要導流的連結 (/brand)
    – Advanced Alignment:選擇 Center
    完成後點擊右上角save按鈕

    分類快搜:
    – 點擊button的小齒輪圖示 (母層)
    Appearance:選擇 Stacked
    – Advanced Alignment:選擇 Center
    – Advanced Border:選擇 Solid
    – Advanced Border Color:設定 #e5e5e5
    – Advanced Padding:左右設定 10
    – 點擊button文字,再點擊button小齒輪圖示 (子層)
    – Content button text:輸入按鈕的文案 (分類快搜)
    – Button type:選擇要導流的類型,這裡選Link
    – Advanced Alignment:選擇 Center
    完成後點擊右上角save按鈕

PS:以上為示範範例的設定,其他的情境須依實際設定的值進行調整

Row & Column & Banner & Text & Product 元素

假設想在前台建立該區塊有個大標,且大標底下左側位置為一張大Banner,右邊塞入某個Category的產品列表,如下圖

執行方法如下:

  1. 將左側的row拖曳至右側想放置區塊
    – 點擊row元素的小齒輪
    Advanced Margin:下方設定 60
    完成後點擊右上角save按鈕

  2. 將左側的text拖曳至右側row區塊裡
    點擊text元素的小齒輪
    – 編輯器:新品推薦 / Font – size:26px
    Advanced Alignment:選擇 Center
    – Advanced Margin & Padding:上下左右都設定為0
    完成後點擊右上角save按鈕

  3. 將左側的Column拖曳至右側row區塊裡
    點擊Column元素的小齒輪
    Advanced Margins and Padding:上下左右都設定為0
    完成後點擊右上角save按鈕
    PS:記得所有Column都要設定到

  4. 將左側的Banner拖曳至右側column區塊裡
    – 點擊Banner元素的小齒輪
    Appearance Minimum Height:700px
    – Background Background Image:上傳圖片
    – Content Message Text:輸入想壓在Bnanner上的文字 / font-size 14px
    – Content Message Link:選擇 Category
    – Advanced Padding:上方選580
    完成後點擊右上角save按鈕

  5. 將左側的Product拖曳至右側column區塊裡
    – 點擊Banner元素的小齒輪
    Appearance選擇 Prodcut Grid
    Appearance Select Product by:選擇category
    Appearance category:選擇要展示的 category
    Appearance Sort by:選擇 Position
    完成後點擊右上角save按鈕

Row & Column & Banner 其他應用

假設想在前台建立該區塊有不同的圖片,且在點擊圖片後會進入指定的頁面,如下圖

執行方法如下:

  1. 將右側row元素拖曳至右側
    點擊row的小齒輪
    – Advanced Margin:下方填入60
    完成後點擊右上角save按鈕

  2. 將左側的text拖曳至右側row區塊裡
    – 點擊text元素的小齒輪
    – 編輯器:產品類別 / Font – size:26px
    Advanced Alignment:選擇 Center
    – Advanced Margin & Padding:上下左右都設定為0
    完成後點擊右上角save按鈕

  3. 將左側的Column拖曳至右側row區塊裡
    – 須執行三次,讓一整列有四個column,且每一個column以3為單位(切成4等分)
    – 點擊Column元素的小齒輪
    Advanced Padding:上下左右都設定為5
    完成後點擊右上角save按鈕
    PS:記得所有Column都要設定到

  4. 將左側的Banner拖曳至右側column區塊裡
    – 點擊Banner元素的小齒輪
    Appearance Minimum Height300px
    – Background Background Image上傳圖片
    – Content Message Text輸入想壓在Bnanner上的文字 / font-size 14px
    – Content Message Link選擇 Category / 並選擇想導流的category
    – Advanced Padding上方選260
    完成後點擊右上角save按鈕
    重複以上動作,將每個Column都塞滿banner

 

以上為建立靜態頁面會常用到的Page Builder元素,讀者們可以實際去試試,嘗試的過程會發現透過Magento Page Builder的功能,即使不會寫Code,要”拉”一個美麗的頁面也非難事呀!

相信讀者們看到這對於Magento2 Page Builder功能,已經具備一定程度的了解!希望這篇文章能幫助到您,針對您的商業模式套用在Magento上的多庫存系統設定!歐斯瑞的讀者們記得追蹤粉絲團IG,更別忘了訂閱我們的電子報,隨時掌握第一手新知分享喔!有任何問題也歡迎隨時聯絡我們

 000

歐斯瑞

歐斯瑞 - 一個對網路世界充滿熱情的團隊

歐斯瑞提供免費電商知識,並協助各大類型之企業 電商諮詢建置MagentoShopify 相關的電商專案。

立即聯繫我們

推薦文章

Categories:
  Magento2 開源版Magento

留下回應

你的電子郵件地址不會被公開.