top of page
michaelkao

頁面排版不再困擾(二) Magento 電子商務 全新頁面排版功能上線



一般編輯器不容易做到的事

如同上一篇所描述,當需要編排一些特殊需求的頁面,像是會自動切換可滑動的banner,或是電商的商品詳情下方的Tab分頁切換,如果想要用一般的編輯器做到,就必須透過編寫html來完成,對於使用者的門檻較高,而且經營的公司或單位不一定具備這樣的人才,若因此招募專職人員,人事成本又過高,即使透過委外方式尋求專人處理,每次有需求的時候,都會是一筆開銷。
不過這些問題,只要使用Magento 2的PageBulider拖曳式編輯模板,就能夠輕易的解決。只要將對應的元素拖曳到對應版面即可生成所謂的slider banner(可滑動的橫幅圖片),或是Tab分頁切換,即使不懂程式語言也能輕鬆設定!

情境範例─banner與可切換的slider製作

上一篇說明的做法類似,將對應的元素拖曳到欄位中,再上傳所需要的圖片或編輯需要寫的文字,最後還可以根據需求,選擇是否要自動切換圖片、圖片左右是否要顯示箭頭樣式、圖片底部是否要有圓點等等。
另外要注意的是如果只要一張橫幅大圖,請直接拖曳banner元素後上傳圖片即可,若希望設定數張banner做切換,請拖曳slider元素進行編輯。
STEP1.像這樣把需要的物件拖曳過去

STEP2.將圖片與文字分別放上每個slider

STEP3.切換的相關設定,若有需要也可以直接編輯

STEP4.可自動切換的slider就設定完成了

情境範例─Tabs的製作

作法幾乎相同,一樣參考以下圖片步驟輕鬆搞定。
STEP1.同樣把需要的物件拖曳過去

STEP2.分別設定每個Tab的圖片與文字

STEP3.可切換的Tab分頁就設定完成了

Comments


bottom of page