維看幫助中心

如何使用圖片集組件?

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

一、什麼是圖片集組件?


圖片集組件是一個展示多張圖片集合的模塊,支持單擊圖片放大和單擊圖片跳轉到相應頁面兩種模式。支持給每張圖片添加描述文字,描述文字可以固定在圖片下方、固定懸浮在圖片上、也可以鼠標移到圖片上懸浮顯示。支持矩陣平鋪展示、水平對齊展示、縱向對齊展示、懸浮滾動展示等多張展示風格。



二、如何使用圖片集組件?


1、如何查看圖片集組件是否已經存在?

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

如果你的頁面上需要這個組件,但是還沒有添加,就需要先添加這個組件了;怎麼判斷頁面上有沒有這個組件?單擊查看如何查看某一塊內容是使用什麼組件製作的?


2、如何添加圖片集組件?

在頁面上添加組件的方法都是一樣的,單擊查看如何添加組件?

添加的組件名稱為“圖片集”,如下圖1所示:

圖1:

添加圖片集組件.png


3、如何設置圖片集組件?


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

1)此組件已經添加好的場景:進入所有這類組件設置項方法都是一樣的,可以參考這個攻略:如何進入組件的設置項?

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


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

組件標題若需要可以輸入組件標題,若不輸入,組件標題也不顯示,也不會佔位;

模式選擇:支持放大模式和鏈接模式,放大模式即單擊圖片可以放大,鏈接模式即單擊圖片可以跳轉到相應頁面,圖片鏈接可以單擊下面圖片左下角的編輯入口進行添加;

添加圖片:首次上傳此圖片,需要從本地上傳,之前上傳過此圖片,也可以單擊“從資料庫選擇”按鈕從資料選擇這個圖片;

圖2:

內容.png


更多”鏈接:如果需要顯示“更多”超鏈接(如下圖3),可以單擊下圖所示小鍊子按鈕,選擇要鏈接的頁面。單擊查看“更多”鏈接類型介紹

圖3:

更多鏈接.png


單擊圖片左下角的“編輯”(如下圖4),可以設置如下內容(如圖5):

圖4:

點編輯.png


圖片Alt屬性:即圖像無法顯示時的替代文本,對SEO有利;

圖片描述:即可以展示在圖片下方或在圖片上懸浮的文字可以統稱為圖片描述;

圖片鏈接:只有模式選擇為鏈接模式時,才有此選項,模式為放大模式時沒有此選項,單擊查看“更多”鏈接類型介紹

圖5:

圖片Alt屬性 圖片描述 圖片鏈接.png


3.3在組件的設置中可以設置組件展示的風格


3.3.1 矩陣平鋪展示樣式

選擇矩陣平鋪展示樣式,為了展示正常且美觀,建議圖片尺寸相同,選擇矩陣平鋪展示樣式,支持設置以下內容:

選擇描述展示風格:如果在圖片描述那裡輸入了文字(如上圖5所示),支持選擇描述展示風格(如下圖6所示),描述顯示在圖片下方、固定懸浮在圖片底部、鼠標移上去懸浮在圖片底部、鼠標移到圖片上展示蒙層且蒙層上展示文字;

圖6:

矩陣平鋪展示樣式.png


圖片蒙層顏色設置:如果在圖片描述那裡輸入了文字(見圖5),支持設置蒙層顏色,如果圖片描述那裡沒有輸入文字,即使設置了蒙層顏色,也不顯示;

是否顯示蒙層按鈕:如果在圖片描述那裡輸入了文字(見圖5)並且設置的顯示蒙層按鈕,此按鈕才會顯示;如果圖片描述那裡沒有輸入文字,即使設置了顯示按鈕,也不會顯示;

如果設置顯示蒙層按鈕,支持設置按鈕文字以及以下樣式:按鈕位置(左對齊、居中、右對齊)、按鈕高度、文字大小、按鈕間距、初始樣式(背景顏色、文字顏色、邊框、圓角弧度)、鼠標懸浮樣式(背景顏色、文字顏色、邊框、圓角弧度

圖7:

蒙層顏色 按鈕.png


3.3.2 水平對齊展示樣式

選擇水平對齊展示樣式,對圖片的尺寸要求是高度一樣,寬度可以不一樣,選擇水平對齊展示樣式,支持設置以下內容(圖8)

選擇描述展示風格如果在圖片描述那裡輸入了文字(如上圖5所示),支持選擇描述展示風格(如下圖8所示),描述固定懸浮圖片底部、固定懸浮在圖片底部、鼠標移上去懸浮在圖片底部、鼠標移上去展示蒙層且蒙層上顯示描述。

圖片蒙層顏色設置:支持設置蒙層顏色,如果圖片描述那裡沒有輸入文字(見圖5),即使設置了蒙層顏色,也不顯示;

圖8:

水平對齊展示.png


3.3.3 縱向對齊展示樣式

選擇縱向對齊展示樣式,對圖片的尺寸要求是圖片寬度一樣,高度可以不一樣,選擇縱向對齊展示樣式,支持設置以下內容(圖9)

選擇描述展示風格如果在圖片描述那裡輸入了文字(如上圖5所示),支持選擇描述展示風格(如下圖9所示),支持描述展示在圖片下方、固定懸浮圖片底部、鼠標移上去懸浮圖片底部、鼠標移上去展示蒙層且蒙層上顯示描述。

圖片蒙層顏色設置:支持設置圖片蒙層顏色、如果圖片描述那裡沒有輸入文字(見圖5),即使設置了蒙層顏色,也不顯示;

圖9:

縱向對齊方式.png


3.4在組件的設置中可以設置此組件的高級功能

圖片集組件支持圖片自適應不同終端設備,也支持自定義,支持自定義的設備有:PC寬屏、PAD橫屏、PAD豎屏、手機橫屏、手機豎屏終端一行展示的圖片數量;

圖片參數設置:支持設置圖片間距;

高級.png


3.5設置好圖片集組件的內容、風格和高級功能後,單擊設置框右下方“保存”按鈕,以保存所設置的內容。

保存.jpg


4、保存、預覽、發布

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

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

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

保存預覽發布.png


建站流程

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