維看幫助中心

如何使用滾動圖片組件?

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

一、什麼是滾動圖片組件?


滾動圖片組件是一個實現多張同尺寸圖片滾動展示的模塊,可以控製圖片是否自動滾動、滾動箭頭的效果、圖片的展示風格,以及不同終端下可視區域的圖片個數。滾動圖片組件一般應用於工程案例的展示、工廠圖片的展示、資質證書的展示等,選擇若干張同一類型相同尺寸的圖片,以滾動的形式展示出來,可以是自動滾動,也可以設置點擊左右切換按鈕才滾動,展示形式多樣。



二、如何使用滾動圖片組件?


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

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

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


2、如何添加滾動圖片組件?

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

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

圖1:

添加滾動圖片組件.png



3、如何設置滾動圖片組件?


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

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

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



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


3.2.1 設置組件標題、添加圖片、“更多”鏈接、圖片尺寸(如圖2)

組件標題:根據需要決定填寫或不填寫,不填寫不顯示也不佔位置;

添加圖片:在此處可以添加需要展示的圖片。首次添加的圖片需要單擊“本地上傳”按鈕從自己電腦上傳,之前添加過的圖片可以通過“本地上傳”按鈕或“從資料庫選擇”按鈕來上傳圖片,之前上傳過的圖片默認會在資料庫中保存一份;添加好的圖片會顯示在“本地上傳”、“從資料庫選擇”按鈕下方,此處圖片的順序即為圖片輪播的順序,用鼠標左鍵按住圖片可以拖動調整圖片的排序;

“更多”鏈接:如果需要在這個組件所在區域顯示“更多”鏈接,單擊小鍊子按鈕添加鏈接,同時“組件標題”字段需要有內容顯示出來才可以;

圖片尺寸:有些圖片不適合了,需要撤掉換新的圖片了,圖片尺寸要做成多大的合適呢,在圖片下方有一個“原始尺寸”,新圖片直接按照這個原始尺寸大小製作就可以,為了展示美觀,建議所有圖片尺寸都一樣;

為了提升頁面訪問速度,建議圖片上傳前對圖片進行無損壓縮處理,單擊查看圖片無損壓縮工具

圖2:

設置內容.png


3.2.2 設置每張圖片Alt屬性、圖片描述和圖片鏈接(如下圖3所示):

單擊每張圖片左下角的“編輯”按鈕,可以根據自己的需求設置圖片Alt屬性、圖片描述和圖片鏈接:

圖片ALT屬性:默認取圖片名稱,可以根據需要修改,此文字是圖片無法顯示時的替代文本,同時搜索引擎(像谷歌、百度等)不識別圖片但可以識別圖片Alt屬性,因此填寫圖片Alt屬性對網站優化有好處;

描述:如果需要在圖片下方、圖片上或圖片底端顯示文字,可以通過添加圖片描述文字來實現;

圖片鏈接:如果單擊圖片需要跳轉到其它相關頁面,可以給此圖片添加超鏈接,單擊小鍊子按鈕可以給圖片設置鏈接,單擊查看鏈接類型介紹,如果不需要給圖片設置鏈接,此處不需要設置,空著就可以。

圖3:

編輯圖片.png



3.3在組件的設置中可以設置組件的高級功能(如圖4)

圖片間距:支持設置兩張圖片之間的距離,直接拖動小按鈕調整就可以,一般每張圖片左右邊距為10px-20px比較合適;

響應式變化下不同設備的顯示圖片數:支持自適應和自定義兩個類型。如果想固定不同設備下一行顯示的圖片數量,可以自定義不同設備下的數量。如果不需要的話直接選擇自適應就可以。自定義支持以下幾類常用設備:寬屏電腦、PAD橫屏、PAD豎屏、手機橫屏、手機豎屏。設置好之後,可以到預覽中看一下這幾種不同終端的展示效果(如下圖5、圖6)。

滾動圖片組件是否支持高級功能,是由風格來決定的,單線滾動和循環滾動風格支持高級功能,其它風格不支持。

圖4:

高級.jpg


圖5:單擊“預覽”

預覽.png

--》

圖6:切換查看不同終端下的效果

查看不同終端下的效果.png



3.4在組件的設置中可以設置組件的風格(如圖7)

選擇展示風格:支持單線滾動、循環滾動、上下滾動、縱向頁簽、突出顯示等多種展示風格,詳細情況如下:

風格1:單線滾動

圖片先向左後向右滾動,要求圖片高度一致,寬度一致,這樣排列起來比較整齊;

風格2:循環滾動

圖片一直向左滾動,要求圖片高度一致,寬度一致,這樣排列起來比較整齊;

風格1和風格2,支持設置以下內容:

是否默認滾動:支持默認滾動或不滾動。滾動:注意展示的圖片總數小於一行展示數量是不會滾動的。不滾動:用戶手動滾動。

滾動間隔時間:支持設置滾動間隔時間;

設置單次滾動的圖片數量:支持單次滾動一張圖片或一頁圖片;

是否顯示左右按鈕:支持顯示按鈕或隱藏按鈕;顯示:若選擇了不滾動模式,那麼按鈕可最好選擇顯示,那樣用戶才會注意到圖片可以滾動。隱藏:若選擇了默認滾動模式,那麼按鈕可以選擇隱藏;

設置按鈕對齊位置:垂直居中(包含圖片和圖片描述文字,若沒有描述文字,包含圖片和一個邊距)、垂直居中於圖片:位於圖片的中間位置。

選擇按鈕樣式:有按鈕在圖片外面和按鈕在圖片裡面兩種,圓形按鈕、方形按鈕可供選擇,根據網站風格選擇按鈕樣式。

是否顯示圖片分頁:分頁可以增加滾動圖片的靈動感,用戶也可以點擊分頁按鈕查看圖片,一般顯示在滾動圖片正下方。

選擇分頁樣式:三種分頁樣式,可供選擇。

圖7:

風格.jpg


風格3:上下滾動(圖8)

通過單擊向上或向下按鈕實現圖片上下滾動的視覺效果。

可視圖片數量:支持設置可視區域的圖片數量,單擊下拉小箭頭可以選擇數值;

圖8:

上下滾動展示效果.jpg


風格4:縱向頁簽(圖9)

圖片描述文字以頁籤的形式列出來,通過切換不同的描述文字頁籤來實現展示圖片。

縱向頁簽風格支持設置:

頁簽按鈕位置:居左或居右。

圖9:

縱向頁簽風格.png


風格5:突出顯示

在可視區域顯示三張圖片,突出顯示中間那一張。

突出顯示風格支持設置:是否默認滾動圖片。

突出顯示風格.png



3.5保存組件設置中的內容

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

保存.png



4、保存、預覽、發布

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

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

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

保存預覽發布.png



三.組件優化


1.滾動圖片組件設置項中增加了分頁樣式顏色自定義功能 (2018-04-27優化)

(1)新增功能操作方法:在設置滾動圖片設置項中,當分頁樣式選中第一個樣式時,下方會出現顏色設置項,用戶可以自定義修改圓點的顏色,如下圖所示:

QQ圖片20180427133132


2.滾動圖片組件中的風格1、風格2風格設置中新增圖片點擊放大的效果。 (2017-12-14優化)

(1)新增功能應用場景:在滾動圖片組件風格設置中勾選了風格1或者風格2時,可對是否開啟圖片放大功能進行設置,勾選“是”即可在前台瀏覽時點擊放大圖片進行查看,非常方便

(2)操作方法:

QQ圖片20180504114153


建站流程

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