圖片元件|進階分頁

1.SHOPLINE_________png.png

當增加/編輯進階分頁時,可以透過增加「圖片元件」(下稱為元件),來為您的分頁加入圖片,並且可以自行拖曳放置在指定的版面位置,也可以設置成多張圖片做輪播呈現,或是設為全寬圖片來增加注意力及畫面衝擊感。

 

一、 添加新元件操作

步驟一:添加元件

在左方的設計選單,有多項功能元件,您可以拖拉希望加入的元件到您喜歡的位置

_____2017-02-21___3.39.58.png

 

步驟二:拖拉元件到您喜歡的位置

拖拉元件到編輯工作區時,會以綠色區塊顯示元件能夠放下的位置

TC_1_step3.gif

 

 

二、 新增圖片&上傳手機版圖片

1. 增加圖片

你可以添加一幅圖片或以輪播形式展示多幅圖片,在彈出的選項框中上傳新的圖片並按拖動排序。___a1.png

 

2. 上傳手機版圖片

上傳圖片後,還可以再點選手機版的「上傳圖片」來傳輸其他圖片,就會覆蓋到原本的橫圖,如果要更換已上傳的圖片,再次點選對應裝置的「上傳圖片」即可。___a2.png 

若不滿意已上傳圖片,可以點擊圖片上的刪除按鈕,就會將圖片套用成另一個裝置版本的圖片,例如刪除的是手機版圖片,手機版將會自動套用電腦版的圖片。___a3.png

以下是分別上傳電腦版和手機版圖片在網店上呈現的效果

電腦版

image_widget_desktop.gif

手機版 

 image_widget_mobile.gif

 

 

 三、進一步設定圖片元件

1. 設定成輪播圖片

若上傳了多張圖片,元件自動會以輪播的方式顯示。拖拉圖片區塊左上角的十字圖標,可改變圖片輪播順序,最上方為第一張顯示的圖片。___a4.png


2. 為圖片加入連結與 Alt屬性

您可以為每一張圖片設置不同的到達頁連結,當用戶點選圖片的時候就會自動打開到達您設定的連結頁面。同時也可以為每張圖片加入 Alt屬性,對您的商店 SEO 有正向的幫助也能讓圖片出現在「圖片」的搜尋結果頁面,想要了解更多請參考:圖片 Alt屬性TC_2-2.png

 

3. 設定全寬圖片模式

按圖片 >> 左邊選單點選「設定」>> 於圖片設定勾選「顯示全寬圖片模式」,不勾選則變回原來大小。   

 

 

 

四、圖片建議規格

  • 電腦版圖片:建議規格可按這裡閱讀文章
  • 手機版圖片:若想呈現全屏圖,營造佈滿屏幕的衝擊感,建議圖片比例為 16:9, 尺寸為 1080px (寬) x 1920px (長);若想引導顧客繼續往下瀏覽,建議圖片比例為 4:3,尺寸為 1080px(寬) x 1440px (長)  

     

     

五、延伸閱讀

 

 

 

 

 

還有其他問題?提交請求

評論