前言
Elementor有多種輪播工具可選用,但每一種有它的特性,在深入了解每個輪播工具的特點後再選用適當,以利我們在設計網頁時可以做出符合需求的效果。
說明
工具名稱 | 說明 | 使用時機 |
---|---|---|
背景輪播 | 在任何一個區塊容器,其背景都可以設定成多張背景去輪播。(既然是背景,就可以在圖上加上自訂文字或其它元素) | 主要是輪播圖上需要加上文案或按鈕時,甚至加上小區塊中要再包含更多元素,即會選用此方式。 |
幻燈片 | 每則幻燈片由「圖+文字+按鈕」組成,然後實施輪播。 | 主要是輪播圖上需要加上文案或按鈕時,即會選用此方式。 |
媒體輪播 |
每個項目可以置入「圖」或「影片」,無法置入文字,然後實作圖或影片的輪播切換。 輪播有多個樣式可選。 |
最常使用時機是輪播元素中需有「影片」的情況,即可用此工具。 |
圖片轉盤 |
一次圈選多張圖片後,進行輪播。 圖片比例盡量一致,否則輪播時會有高度不一造成輪播版面忽高忽低的情況。 |
要求最佳響應式效果 : 非採背景方式置入圖片,故響應式效果最佳,圖片可維持原比例。 因其圖片是採一次圈選多張的方式,故可配合ACF動態欄位對應,讓業主免進入Elementor即可自由替換圖片。 |
在Elementor中,有些輪播工具,它的圖片是採「背景」方式置入,故在「響應式」效果時,有時候為了讓圖可以填滿整個區塊,會強制把圖「延展」至整個區塊的大小,故有時候圖片的邊邊有時會被遮住無法全貌呈現。
而「圖片轉盤」較特殊,它的輪播是用「插入圖片」的方式來置入圖片,故圖片會一直以原始比例置入,在不同裝置的響應式呈現時,仍會以原圖來呈現,故不會有延展而造成部分邊邊被遮住,但正因它沒有延展功能的特點,原圖在製作時需要盡量維持一樣的長高比例,不然在輪播時會造成版面忽高忽低,另,若把它設定一次呈現一張,也就是當成「大圖輪播」的話,其原圖的設計尺寸要盡量大一點,這樣才能填滿整個螢幕左右寬度,為何?因它沒有「延展圖片」的功能,會以原圖比例呈現。