瀏覽數量： 70 作者： 本站編輯 發佈時間： 2017-02-09 來源： 本站
一、什麼是圖文頁簽組件？
圖文頁簽組件是一個以頁籤的形式展示多個圖文混排內容的模塊，圖文頁簽組件一般應用在網站首頁或者公司介紹等頁面，將多個圖文混排（圖片、文字、圖文）的內容以頁籤的形式展示出來，起到美觀的展示效果。
頁簽組件展示效果舉例：
二、如何使用圖文頁簽組件？
1、如何查看圖文頁簽組件是否已經存在？
如果這個圖文頁簽組件已經存在了，就不需要再添加，直接根據需要進行相關操作就可以（具體操作見下文所述）；
如果你的頁面上需要這個組件，但是還沒有添加，就需要先添加圖文頁簽組件了.
2、如何添加圖文頁簽組件？
在頁面上添加組件的方法都是一樣的。
添加的組件名稱為“圖文頁簽”，如下圖所示：
3、如何設置圖文頁簽組件？
3.1 進入組件的“設置”分兩種場景
1）此組件已經添加好的場景：進入所有這類組件設置項方法都是一樣的。
2）新添加的組件的場景：在添加此組件時會彈出這個組件的的設置話框。
3.2在組件的設置中可以設置組件展示的內容
3.2.1 新增頁簽、編輯頁簽、刪除頁簽
如何新增頁簽？單擊“新增一條”按鈕，彈出頁簽名稱輸入框、頁簽內容編輯器，頁簽內容中支持輸入文字、圖片等，編輯好之後，單擊“保存”，此條頁簽就會出現在頁簽列表下面；
如何編輯頁簽？單擊要編輯的頁簽名稱，可以編輯頁簽名稱、頁簽內容，然後“保存”；
如何刪除頁簽？單擊頁簽列表下的要刪除的頁簽，單擊它後面的刪除按鈕，即可把此頁簽刪除；
如果頁簽是圖文混排內容，可以按照下圖所示來排版：
3.2.2 設置圖文頁簽組件內容的展示風格
單擊“風格”按鈕，即可切換到風格頁簽下，設置展示風格：
選中上圖所示的一種風格，然後單擊“展示設置”，可以設置以下內容，設置好之後單擊“保存”即可。
頁簽按鈕位置：可以選擇頁簽按鈕位於此組件的左側、右側或居中；
頁簽按鈕高度：可以手動拖動小按鈕調整頁簽按鈕的高度；
頁簽按鈕寬度：有兩種設置方法，固定左右邊距、也可以固定頁簽按鈕的寬度；
頁簽字體大小：可以手動拖動小按鈕調整頁簽按鈕上的文字大小；
頁簽按鈕默認樣式：可以設置頁簽按鈕默認的背景顏色、文字顏色；
頁簽按鈕選中樣式：可以設置選中某個頁籤時的頁簽按鈕的背景顏色、文字顏色。
3.3保存組件設置中的內容
組件的內容、風格設置好以後，單擊設置框右下角的“保存”按鈕；
4、保存、預覽、發布
設置好以上內容以後要單擊頁面右上角的“保存”按鈕，目的是把此修改保存到網站後台；
然後可以單擊“預覽”按鈕查看不同終端下展示的效果，如果不合適可以到後台再做修改；
如果需要讓訪客也看到，請單擊頁面右上角的“發布”按鈕，發布之後稍等兩分鐘左右即可看網站前台展示效果。
5、功能優化：
“圖文頁簽”組件新增縱向展示設置（2019-6-19優化）
【應用場景】根據客戶的反饋，“圖文頁簽”的展示除了橫向排版，在部分頁面排版中，縱向展示也有需求，所以根據客戶的需求我們擴展了縱向頁籤的展示。
【操作指導】在網站編輯頁面，添加“圖文頁簽”組件，在組件“風格”頁簽下，選擇對應的風格後，下方可以設置“頁簽排列方式”，可以選擇橫向還是縱向，如下截圖所示：
【效果展示】以風格4為例，添加好的圖文頁簽縱向效果如下所示：
新增“圖文頁簽”組件中的切換風格（2019-7-16優化）
【應用場景】根據服務商的需求，增加了一種“圖文頁簽”組件中的切換效果，當用戶鼠標懸停時可以自動頁簽下的內容；
【操作指導】在添加“圖文頁簽”組件後點擊“高級”頁簽，可以更改切換效果，默認的為“點擊切換”。
