【WordPress教學】手把手教你做電商最愛的Slider輪播圖

Slider輪播圖

許多電商在做活動推播時都會使用輪播圖,將最近促銷活動、新品上市…等資訊一起放在輪播圖上面,今天就來介紹一下Slider的好用外掛及使用方式~

步驟教學

1-SA Sliders

PS.輪播圖高度會以最高的圖片撐開,大小建議統一

step1-點擊SA Sliders > Add New Slider

Image for post
step1-點擊SA Sliders > Add New Slider

step2-填寫輪播名稱跟下方設定

image
step2-填寫輪播名稱跟下方設定

step3-選擇輪播圖,可直接使用媒體櫃圖片或另外上傳,上傳完全部輪播圖後按下

Image for post
step3-選擇輪播圖,可直接使用媒體櫃圖片或另外上傳,上傳完全部輪播圖後按下

step4-複製短碼,回到首頁畫面,使用Elementer編輯

Image for post
step4-複製短碼,回到首頁畫面,使用Elementer編輯

step5-點擊輪播圖區塊>將剛複製的短碼貼在框框中,按下套用

Image for post
step5-點擊輪播圖區塊>將剛複製的短碼貼在框框中,按下套用

2-Smart Slider

step1-點擊Smart Slider > Go to Dashboaro

Image for post
step1-點擊Smart Slider > Go to Dashboaro

step2-點擊左邊建立新專案

Image for post
step2-點擊左邊建立新專案

step3-點加入幻燈片,出現可新增項目,皆可嘗試使用

Image for post
step3-點加入幻燈片,出現可新增項目,皆可嘗試使用

step4-複製短碼,回到首頁畫面,使用Elementer編輯

Image for post

step5-點擊輪播圖區塊>將剛複製的短碼貼在框框中,按下套用

Image for post
step4-複製短碼,回到首頁畫面,使用Elementer編輯

3-Transition Slider

螢幕快照 2021 01 26 下午6.17.50
3-Transition Slider

step1-點擊Transition Slider

看要新建一個新的專案或是用範本去改

螢幕快照 2021 01 26 下午6.15.51
看要新建一個新的專案或是用範本去改

step2-點新增或修改

螢幕快照 2021 01 26 下午6.16.06
step2-點新增或修改

step3-可新增或更換照片、文字及按鈕

螢幕快照 2021 01 26 下午6.16.13
step3-可新增或更換照片、文字及按鈕

今天介紹的三個工具都不錯用,SA Sliders算是無門檻上手,只要把相同大小的Banner上傳就會變成很標準的輪播圖,那Smart Slider是屬於必較可以客製的輪播圖工具,如果想要自己設計或排版就很適合使用這款,Transition Slider則是特效比較多,大家都可以玩玩看唷~~

You Might Also Like