維看幫助中心

如何使用高級幻燈片組件?

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

一.什麼是高級幻燈片組件?

高級幻燈片組件是一個展示單張圖片或多種圖片輪播展示的模塊,與幻燈片組件最顯著的區別是每一張幻燈片可以分為多層,這些層可以是圖片文字按鈕。通過控制這些圖層的位置、出現的時間和動畫效果等可以極大地豐富幻燈片的展示效果。

可以這麼理解:

普通幻燈片 = 一張幻燈片 +一張幻燈片 + 。 。 。 +一張幻燈片
高級幻燈片 =(一張幻燈片+圖片層+文字層+。 。 。 +按鈕層)+。 。 。 +(一張幻燈片+圖片層+文字層 +。 。 。 + 按鈕層



二.如何使用高級幻燈片組件?


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

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

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


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

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

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

高級幻燈片組件.png



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


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

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

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



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

3.2.1在高級幻燈片組件中如何添加圖片?

第1步:進入高級幻燈片組件設置項(單擊查看如何進入組件的設置項?

第2步:首次上傳圖片請單擊“本地上傳”按鈕添加圖片,非首次上傳此圖片可以選擇“本次上傳”或“從資料庫選擇”按鈕來上傳圖片;

上傳圖片.png

第3步:然後單擊“保存”按鈕。



3.2.2 設置本張幻燈片持續的時間

支持設置每張幻燈片的持續時間:

設置幻燈片持續時間.png


3.2.3 在圖片上如何添加圖片層、文字層、按鈕層?

1、高級幻燈片組件支持每張圖片添加三種類型的圖層:圖片層、文字層、按鈕層。

添加圖層的入口.png

2、一個高級幻燈片組件最多添加8 張幻燈片,每張幻燈片最多添加5個任意類型的圖層。

3、多層的幻燈片在大屏幕上的表現通常比較好,對於小屏幕會做相應的壓縮,通常也有不錯的效果。但是如果圖層過多、文字過多、或者樣式比較複雜會影響高級幻燈片在小屏幕下的顯示效果。圖片層的壓縮效果最好。

4、各圖層的作用和特點

1). 圖片層

圖片層可以上傳一張圖片並且可以添加圖片Alt屬性和圖片鏈接,同時對於比較複雜的文本塊可以作為圖片層,這樣在較小屏幕下會有較好的展示效果。

在高級幻燈片組件中如何添加圖片Alt屬性、圖片鏈接?

圖片Alt屬性 圖片鏈接.png


2). 文字層

文字層即一段文字,不建議過長,可以設置文字顏色、對齊方式、字體等等。為了便於幻燈片適用於多種尺寸的屏幕,一個文字層需為同一字號大小的文字。

3). 按鈕層
按鈕層是可添加鏈接的短文字,目前有五種樣式。


4、圖層的設置

雖然包含三種不同的圖層,但是各個圖層的設置基本類似。把大象放入冰箱分為三步,其實圖層的設置基本也分為三步:

1). 設置圖層的基本信息

  • 對於圖片層,基本信息包括此張圖片持續時間、圖片、圖片鏈接

    圖片層.png


  • 對於文字層,基本信息包括本張圖片持續時間、富文本編輯器中的文字、顏色和對齊方式、字體等等

    文字層.png


  • 對於按鈕層,基本信息包括本張圖片持續時間、按鈕文字按鈕鏈接按鈕樣式

    按鈕層.png


2). 設置圖層的位置

位置.png

圖片、文字或按鈕位置包括兩個參數:居左距離、居上距離,單位可以為像素或是百分比。

快速設置位置的方法:把背景圖以1:1大小顯示(注意是1:1大小,也就是100%),然後使用截圖工具(比如QQ的截圖工具)來估算居左和居上的距離,如下圖所示:


3). 設置圖層的動畫效果

  • 設置動畫的時間長度(即動畫持續時間):就是每個動畫開始到結束的時間。

    動畫持續時間.png


  • 設置動畫延遲時間:對於多層的幻燈片,圖層之間往往有不同的重要程度,所以圖層的出現往往有先後順序,通過設置延遲時間可以設置圖層出現的順序。

    動畫延遲時間.png


  • 設置動畫效果:每個圖層出現都會執行一個動畫效果,默認是從右側漸入,可以根據需要選擇其它效果,隨意組合就會產生不錯的效果哦~

    動畫效果.png


3.3 設置高級幻燈片組件的風格

高級幻燈片組件支持如下幾種 風格,請根據需要選擇:

風格.png


3.4 設置高級幻燈片組件的特效

如果高級幻燈片組件中上傳了多張幻燈片,圖片與圖片之間的切換特效,可以根據需要來選擇,目前主要支持以下特效:

特效.png


3.5 保存組件設置中的內容

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

單擊保存.png


4、保存、預覽、發布

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

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

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

保存預覽發布.png



三.組件優化


1.高級幻燈片組件增加按鈕默認樣式和鼠標懸停樣式設置;(2018-7-5優化)

(1)新增功能應用場景:當用戶希望在高級幻燈片中添加個性化的按鈕時,可以使用自定義按鈕功能,靈活地設置按鈕的初始樣式(包含按鈕背景、按鈕邊框、按鈕寬度、高度)和鼠標懸停樣式(包含鼠標懸停的背景、按鈕邊框、按鈕寬度、高度)。

(2)新增功能操作方法:高級幻燈片設置-》編輯圖片圖層。

2


編輯按鈕層-》自定義按鈕。

1

設置之後,點擊保存就可以看到自定義按鈕了。


2、高級幻燈片組件新增手機端圖片自定義功能(2018-11-27優化)

【應用場景】由於PC端圖片無法在手機上完美展示,因此高級幻燈片組件新增手機端圖片自定義功能,使其能夠完美在手機上展示。

【應用效果】手機圖片自定義功能效果如下截圖所示:

圖片1


3、新增“高級幻燈片”組件切換風格;(2019-8-27優化)

應用場景為了滿足不同用戶的個性化需求,豐富網站的展現效果,我們在“高級幻燈片”組件增加了新的切換效果,取消幻燈片下方小圓點切換,通過鼠標懸停顯示左右切換箭頭。

操作指導首先添加“高級幻燈片”組件,在“風格”頁簽下選擇如下切換效果,保存後就可以在幻燈片中顯示新的切換效果了。如下圖所示:

操作指導

應用效果通過點擊左右箭頭按鈕實現幻燈片的切換,如下圖所示:

效果演示


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

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

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

4

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

5


5、“高級幻燈片“組件,新增更換底圖功能(2019-9-26優化)

【應用場景】“高級幻燈片”組件可以更換底圖,避免刪除整張幻燈片後重新添加圖層內容;

【操作指導】進入“編輯網站”界面,選擇“添加組件”—>“基礎組件”—>“高級幻燈片”添加幻燈片後,進入“設置”界麵點擊“更換圖片”按鈕,選擇新的圖片後即可完成底圖的更換,如下圖所示:

高級幻燈片1


建站流程

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