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