輪播元件|頁面編輯器(新版)

CN_EC%2BSC.png

透過新版編輯器所增加或編輯進階分頁時,可以增加「輪播」元件,為您的分頁加入圖片和影片,讓您的網路商店版面更顯精美。

⚠️ 開始前請注意:

  • 新版頁面編輯器目前僅支援 Ultra ChicKingsman Varm 版型使用。
  • 使用新頁面編輯器建立分頁後,若切換其他店面版型,該分頁仍然可以顯示,但無法編輯且可能發生跑版情形,在確認發佈分頁前請多加留意。

 

一、 增加輪播元件

步驟一

前往「商店後台 > 網店設計 > 網店分頁」點按「進階分頁/編輯」按鈕,開啟「進階分頁」設定頁面。

___2022-06-10___4.26.12.png

 

步驟二

點按「元件」按鈕。

___2022-06-14___11.16.30.png

 

步驟三

點選「輪播」元件。

image3.png

 

步驟四

系統預設加入 1 組輪播,點按「圖片」、「影片」元件可編輯內容。

image2.png

 

點按左側 ___2022-06-30___10.34.59.png 圖示可拖曳圖片或影片調整順序。

Screen_Shot_2022-06-30_at_2.28.47_PM.png

 

步驟五

點開圖片元件,可個別上傳桌機版、手機版圖片。

*備註:桌機版圖片寬度建議大於 2000 px,手機版圖片寬度建議大於 1080 px。

image7.png

 

點按上方「語系」下拉選單,會顯示商店支援的所有語系,可以個別上傳在各語系介面所要顯示的圖片和影片。

___2022-06-30___3.49.23.png

 

步驟六

點開圖片/影片元件可編輯「圖片」、「影片」相關設定。

1. 圖片

  • 圖片裁切:選擇裁切並顯示圖片哪個部分(上左/上中/上右/中左/中中/中右/下左/下中/下右)。
  • 圖片 ALT:輸入圖片的替代文字。用一句話來描述圖片中的內容,幫助搜尋引擎了解圖片的內容,關於圖片 ALT 說明請參考此篇文章
  • 遮罩:選擇覆蓋圖片的程度。
  • 標題:輸入圖片標題。
  • 內容依據商品內容撰寫。
  • 展示按鈕可以選擇是否開啟,讓顧客在網頁看到按鈕。
  • 按鈕文字可自行設定顧客點選的按鈕文字。
  • 連結:在圖片中加入連結,顧客點按圖片即可開啟連結頁面。
    可以設定連結開啟方式:
    • 當前分頁:在目前頁面直接開啟連結
    • 另開分頁:另外開啟一個連結分頁

image13.png

 

2. 影片

  • 影片連結:影片將自動以靜音模式播放,請輸入 Youtube 或 Vimeo 影片連結。
  • 遮罩:選擇覆蓋圖片的程度。
  • 標題:輸入圖片標題。
  • 內容依據商品內容撰寫。
  • 展示按鈕可以選擇是否開啟,讓顧客在網頁看到按鈕。
  • 按鈕文字可自行設定顧客點選的按鈕文字。
  • 連結:在圖片中加入連結,顧客點按圖片即可開啟連結頁面。
    可以設定連結開啟方式:
    • 當前分頁:在目前頁面直接開啟連結
    • 另開分頁:另外開啟一個連結分頁

image11.png

 

步驟七

支援其他設定。

A. 全寬模式

___2022-09-26___12.25.50.png

未開啟「全寬模式」:

___2022-09-26___12.25.50_2_2.png

有開啟「全寬模式」:

___2022-09-26___12.26.08.png

 

B. 同高第一張輪播

___2022-09-26___12.25.50_2.png

未開啟「同高第一張輪播」:

依照圖片的寬度決定輪播元件的高度。

  • 桌機版寬/高度比例為 2:1
  • 手機版寬/高度比例為 3:4

___2022-09-26___12.25.50_2_2.png

有開啟「同高第一張輪播」:

輪播元件的高度為第一張圖片的高度(依照圖片比例縮放)。

___2022-09-26___12.33.50.png

 

C. 圖片比例

可以設定手機版的圖片比例,提供三種尺寸:按鈕由左至右分別為 3:4、2:1、1:1 。

___2022-09-26___12.25.50_2_2.png

 

D. 邊距

可調整圖片與頁面的邊距。

___2022-09-26___12.25.50_2_2_2.png

 

E. 輪播秒數

可以自行調整輪播秒數,選擇 1-10 秒區間。

___2022-09-26___12.25.50_2_2_3.png

 

F. 切換樣式

可以選擇按鈕、圓點、縮圖,讓顧客可以自行點選到下一張圖片。

___2022-09-26___12.36.43.png

 

G. 文字位置(桌機)

您可以依據需求,設定桌機版圖片/影片上的文字位置,可以選擇「上左/上中/上右/中左/中中/中右/下左/下中/下右」。

___2022-09-26___12.36.43_2.png

 

H. 文字位置(手機)

您可以依據需求,設定手機版圖片/影片上的文字位置,可以選擇「圖片之下、與圖片重疊」。

___2022-09-26___12.36.43_3.png

 

I. 字型大小

您可以依據需求,設定圖片/影片上的字型大小,可以選擇「同全店設定、放大標題與縮小描述、特大的標題」。

___2022-09-26___12.36.43_4.png

 

步驟八

在設定過程中可點按下方「儲存」按鈕,於右側預覽畫面查看新增的圖片組合元件。

*備註:可選擇查看桌機版或手機版的預覽畫面。

image5.png

image16.png

 

或是點按右上方「預覽商店」,查看完整的前台預覽畫面。

image18.png

 

步驟九

確認完成上述設定後,請點按右上角「發佈」按鈕,讓顧客在商店前台可查看此分頁所有新增的內容。

image4.png

 

 

延伸閱讀

 

 

 

 

 

 

還有其他問題?提交請求

評論