維看幫助中心

如何使用幻燈片組件?

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

一、什麼是幻燈片組件?


幻燈片組件是一個展示單張圖片或輪播展示多張圖片的模塊,幻燈片組件一般應用在首頁的導航下方,用多張圖片輪播的方式凸顯公司的核心競爭力,圖片上可以展示公司形象、公司價值觀和口號、核心產品、核心競爭力等信息,幻燈片組件一般建議放3~5張同樣尺寸大小的圖片,每張圖片上可以加超鏈接鏈到與該圖片相關聯的頁面。圖片建議的尺寸:首頁全屏圖片寬與高的尺寸:1920px*450px(450px~650px)、200k以內,首頁非全屏圖片:1920px*400px(400~650)、200K以內,內頁小圖片 :1920px*200px(180~220)。



二、如何使用幻燈片組件?


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

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

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


2、如何添加幻燈片組件?

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

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

圖1:

幻燈片組件.png



3、如何設置幻燈片組件?


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

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

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


3.2在組件的設置中可以設置組件展示的內容(如圖2)

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

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

圖片ALT屬性:即圖像無法顯示時的替代文本,同時搜索引擎(像谷歌、百度等)不識別圖片但可以識別圖片Alt屬性,因此填寫圖片Alt屬性對網站優化有好處;

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

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

圖2:

設置組件內容.png



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

幻燈片組件支持自定義Pad端圖片和手機端圖片。意思是說:如果您目前顯示在PC上的圖片,不適合展示在PAD或手機端或者展示出來不好看,可以單獨製作適合PAD或手機端的圖片。

設置Pad端圖片:支持同PC端一樣,也支持自定義,如果自定義,支持編輯圖片Alt屬性和給圖片加超鏈接,詳細操作步驟可以參考上述3.2中的介紹;

設置手機端圖片:支持同PC端一樣,也支持自定義,如果自定義,支持編輯圖片Alt屬性和給圖片加超鏈接,詳細操作步驟可以參考上述3.2中的介紹;

圖3:

高級.png



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

幻燈片展示風格:有豐富多樣的展示風格供用戶選擇;

設置每頁幻燈片播放時長:支持設置每頁幻燈片的播放時長;

手機端縮放比例:圖片支持在手機端等比壓縮,也支持自定義縮放比例;

設置當前風格自定義配色:選擇第7、8種展示風格時,支持自定義配色。

風格.jpg



3.5 在組件的設置中可以設置組件的特效(如圖5)

選擇圖片切換特效:選擇前五種風格的其中一種,支持設置圖片切換特效。

圖5:

特效.png



3.6保存組件設置中的內容

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

保存設置的內容.png



4、保存、預覽、發布

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

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

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

保存預覽發布.png



三.組件優化

1.幻燈片組件新增一個風格; (2017-11-23優化)

(1)新增風格應用場景:新增的風格突出下方的幻燈片切換,取消了兩側的幻燈片切換按鈕,解決了快速聯繫組件遮擋切換幻燈片的問題;

(2)新增風格的操作方法:

QQ圖片20180509162023


(3)新增風格應用效果:

QQ圖片20180509162709


2、“幻燈片”組件新增切換風格(2019-9-17優化)

【應用場景】“幻燈片”組件新增切換風格,用戶可以編輯其切換箭頭的顏色及背景色,以滿足在不同場景下的應用。

【操作指導】進入“編輯網站”界面,選擇“添加組件”-“基礎組件”-“幻燈片”,在“風格”頁簽中選擇如下切換風格,並可在下方自定義箭頭顏色、背景顏色,操作如下圖所示:

4

【應用效果】鼠標懸停後顯示左右切換箭頭,點擊按鈕實現切換效果,如下圖所示:

5


建站流程

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