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

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

Sandra / 2021-01-26

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

步驟教學

1. SA Sliders

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

step1-點擊 SA Sliders > Add New Slider

step1-點擊SA Sliders > Add New Slider

step1-點擊SA Sliders > Add New Slider

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

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

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

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

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

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

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

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

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

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

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

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

2. Smart Slider

step1-點擊 Smart Slider > Go to Dashboard

Image for post

step2-點擊左邊建立新專案

Image for post

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

Image for post

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

Image for post

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

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

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

3. Transition Slider

step1-點擊 Transition Slider

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

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

3. Transition Slider

step2-點新增或修改

step2-點新增或修改

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

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

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


今天介紹的三個工具都不錯用

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

sandra avatarSandra