維看幫助中心

如何使用圖文頁簽組件?

瀏覽數量:69     作者:本站編輯     發佈時間: 2017-02-09      來源:本站

一、什麼是圖文頁簽組件?


圖文頁簽組件是一個以頁籤的形式展示多個圖文混排內容的模塊,圖文頁簽組件一般應用在網站首頁或者公司介紹等頁面,將多個圖文混排(圖片、文字、圖文)的內容以頁籤的形式展示出來,起到美觀的展示效果。

頁簽組件展示效果舉例:

頁簽展示效果.png



二、如何使用圖文頁簽組件?


1、如何查看圖文頁簽組件是否已經存在?

如果這個圖文頁簽組件已經存在了,就不需要再添加,直接根據需要進行相關操作就可以(具體操作見下文所述);

如果你的頁面上需要這個組件,但是還沒有添加,就需要先添加圖文頁簽組件了.


2、如何添加圖文頁簽組件?

在頁面上添加組件的方法都是一樣的。

添加的組件名稱為“圖文頁簽”,如下圖所示:

圖文頁簽組件.png



3、如何設置圖文頁簽組件?


3.1 進入組件的“設置”分兩種場景

1)此組件已經添加好的場景:進入所有這類組件設置項方法都是一樣的。

2)新添加的組件的場景:在添加此組件時會彈出這個組件的的設置話框。


3.2在組件的設置中可以設置組件展示的內容

3.2.1 新增頁簽、編輯頁簽、刪除頁簽

如何新增頁簽?單擊“新增一條”按鈕,彈出頁簽名稱輸入框、頁簽內容編輯器,頁簽內容中支持輸入文字、圖片等,編輯好之後,單擊“保存”,此條頁簽就會出現在頁簽列表下面;

如何編輯頁簽?單擊要編輯的頁簽名稱,可以編輯頁簽名稱、頁簽內容,然後“保存”;

如何刪除頁簽?單擊頁簽列表下的要刪除的頁簽,單擊它後面的刪除按鈕,即可把此頁簽刪除;

設置內容.jpg


如果頁簽是圖文混排內容,可以按照下圖所示來排版:

圖文混排方法.png


3.2.2 設置圖文頁簽組件內容的展示風格

單擊“風格”按鈕,即可切換到風格頁簽下,設置展示風格:

選擇風格.png

選中上圖所示的一種風格,然後單擊“展示設置”,可以設置以下內容,設置好之後單擊“保存”即可。

頁簽按鈕位置:可以選擇頁簽按鈕位於此組件的左側、右側或居中;

頁簽按鈕高度:可以手動拖動小按鈕調整頁簽按鈕的高度;

頁簽按鈕寬度:有兩種設置方法,固定左右邊距、也可以固定頁簽按鈕的寬度;

頁簽字體大小:可以手動拖動小按鈕調整頁簽按鈕上的文字大小;

頁簽按鈕默認樣式:可以設置頁簽按鈕默認的背景顏色、文字顏色;

頁簽按鈕選中樣式:可以設置選中某個頁籤時的頁簽按鈕的背景顏色、文字顏色。

展開設置.png


3.3保存組件設置中的內容

組件的內容、風格設置好以後,單擊設置框右下角的“保存”按鈕;

保存.png



4、保存、預覽、發布

設置好以上內容以後要單擊頁面右上角的“保存”按鈕,目的是把此修改保存到網站後台;

然後可以單擊“預覽”按鈕查看不同終端下展示的效果,如果不合適可以到後台再做修改;

如果需要讓訪客也看到,請單擊頁面右上角的“發布”按鈕,發布之後稍等兩分鐘左右即可看網站前台展示效果。

保存預覽發布.png



5、功能優化:

“圖文頁簽”組件新增縱向展示設置(2019-6-19優化)

【應用場景】根據客戶的反饋,“圖文頁簽”的展示除了橫向排版,在部分頁面排版中,縱向展示也有需求,所以根據客戶的需求我們擴展了縱向頁籤的展示。

【操作指導】在網站編輯頁面,添加“圖文頁簽”組件,在組件“風格”頁簽下,選擇對應的風格後,下方可以設置“頁簽排列方式”,可以選擇橫向還是縱向,如下截圖所示:

圖文頁簽-縱向


【效果展示】以風格4為例,添加好的圖文頁簽縱向效果如下所示:

圖文頁簽-縱向


新增“圖文頁簽”組件中的切換風格(2019-7-16優化)
【應用場景】根據服務商的需求,增加了一種“圖文頁簽”組件中的切換效果,當用戶鼠標懸停時可以自動頁簽下的內容;
【操作指導】在添加“圖文頁簽”組件後點擊“高級”頁簽,可以更改切換效果,默認的為“點擊切換”。

圖文頁簽組件切換效果修改


建站流程

找不到你的問題?
135-6001-3420
seoprixcom@gmail.com
214227632
Facebook
Twitter
Google
LinkedIn
Instagram
維看雲建站系統
專業外貿建站系統,為您打造一個適合谷歌的優化網站!
  • 客服QQ
    214227632
  • 微信手機
    (852) 6741 8807
  • 郵箱
    seoprixcom@gmail.com