瀏覽數量： 100 作者： 本站編輯 發佈時間： 2018-02-07 來源： 本站
一、什麼是產品頁簽組件？
產品頁簽組件是一個以頁簽切換形式展示不同分類下產品的模塊，此組件一般放在網站首頁上，展示多個分類下核心的或推薦的產品，可以通過切換不同的分類頁籤來展示不同分類下的產品。
產品頁簽組件展示效果：
二、如何使用產品頁簽組件？
如果你的頁面上已經有這個組件了，就不需要再添加，直接根據需要進行相關操作就可以（具體操作見下文所述）；
如果你的頁面上需要這個組件，但是還沒有添加，就需要先添加產品頁簽組件了；
1、如何添加產品頁簽組件？
在頁面上添加組件的方法都是一樣的，要添加的組件名稱為“產品頁簽”，如下圖所示：
2、如何設置產品頁簽組件？
需要進入產品頁簽組件的“設置”功能去設置，進入組件的“設置”分兩種情況：
1）此組件已經添加好的情況：進入所有這種情況下組件的設置，方法都是一樣的。
2）新添加的組件情況：在添加此組件時會彈出這個組件的設置窗口。
在彈出的設置產品頁簽窗口，可以設置產品頁簽組件的內容、風格、特效和高級功能。
內容
組件標題：在此可以輸入這個組件的標題，輸入則顯示，不輸入此字段也不會顯示；
請選擇產品分類：在此可以選擇展示在頁籤上的產品分類，直接在分類前的複選框前打勾就可以選擇；
每個分類最多展示的產品個數：可以設置每個分類最多展示的產品個數；
顯示更多：若勾選了“是”，點更多按鈕會默認跳轉到這個產品分類的的頁面。
風格
選擇頁簽展示風格：在此可以選擇頁籤的展示風格，單擊“展開設置”之後，可以設置如下內容：
單擊“展開設置”按鈕，可以設置以下內容：
頁簽按鈕位置：可以設置頁簽按鈕相對於組件的位置，可以為居左、居中、或居右；
頁簽按鈕高度：可以設置頁簽按鈕的高度；
頁簽按鈕寬度：可以設置為固定左右邊距、固定寬度；
頁簽字體大小：可以設置頁簽中產品分類的字體大小；
頁簽按鈕默認樣式：可以設置頁簽按鈕默認樣式下的按鈕背景顏色、文字顏色；
頁簽按鈕選中樣式：可以設置選中頁簽按鈕時的按鈕背景顏色、文字顏色。
選擇產品展示風格：可以設置產品滾動或默認不滾動；
選擇圖片顯示比例（寬：高）：需要選擇符合圖片的比例，很多時候圖片看上去變形就是這個比例沒有選擇好，如果不能完全符合，建議選擇符合大多數圖片的一個比例，然後去修改小部分的圖片原始尺寸，以達到顯示更美觀的效果；
支持設置單個產品的展示樣式，可以使用主題默認的，也可以自定義，可以自定義如下內容：
產品圖片邊框寬度：手動拖動按鈕來調整邊框寬度；
產品圖片邊框顏色：單擊向下小箭頭選擇邊框顏色；
產品圖片背景色：支持給單個產品圖片設置背景色，單擊向下小箭頭選擇顏色；
單個產品內邊距：手動拖動按鈕可調整產品內邊距，如下圖所示；
單個產品背景色：支持給產品設置背景顏色；
產品名稱自動換行：可以設置產品名稱超過一行的寬度時可以自動換行或固定只顯示一行，超過的用...顯示；
特效
鼠標懸停產品圖片特效：當鼠標懸停在圖片上時可以設置圖片的特效，有默認、放大、透明、黑白、蒙層、黑白變彩色；
高級
響應式變化下不同設備的顯示圖片數：可以設置寬屏電腦、PAD橫屏、PAD豎屏、手機橫屏、手機豎屏設備下一行顯示的圖片數量。
設置好以上內容之後，要單擊“保存”按鈕才可以生效哦。
3、保存、預覽、發布
設置好以上內容以後要單擊頁面右上角的“保存”按鈕，目的是把此修改保存到網站後台；
然後可以單擊“預覽”按鈕查看不同終端下展示的效果，如果不合適可以到後台再做修改；
如果需要讓訪客也看到，需要單擊頁面右上角的“發布”按鈕，發布之後稍等兩分鐘左右即可看網站前台展示效果。
三.組件優化
1.產品頁簽組件新增風格設置項； （2017-9-30優化）
（1）新增功能應用場景：增加頁籤的設置項，可以調整頁簽邊框顏色、粗細和弧度，讓頁簽組件展示更多樣化v；
（2）新增功能操作方法：
