Divi 輪播外掛推薦：免費好用的商品圖片輪播器，讓你的網站視覺更有吸引力
Divi 主題原生沒有獨立的輪播模組，內建的 Slider 只能做滿版背景輪播，做不出「多張商品圖橫向滑動」的效果。要補上這個缺口，最省錢的做法是裝 Divi Carousel L…
Divi 主題原生沒有獨立的輪播模組，內建的 Slider 只能做滿版背景輪播，做不出「多張商品圖橫向滑動」的效果。要補上這個缺口，最省錢的做法是裝 Divi Carousel Lite 這類免費外掛，它直接在 Divi 編輯器新增 Image Carousel、Logo Carousel 等模組，不用寫程式就能做商品圖、廠商 Logo 與作品集輪播。只要你的輪播放的是手動上傳的固定圖片，免費版就接得住八成需求，不必為了一個輪播去換主題或買整組付費模組庫 [來源：Divi Carousel Lite〈WordPress.org 外掛頁〉 https://wordpress.org/plugins/divi-carousel-lite/ 2026-06-30]。
重點先看：Divi 內建沒有輪播模組，免費的 Divi Carousel Lite 已涵蓋商品圖與廠商 Logo 兩大高頻需求，累積數萬次啟用、平均評分約 4.x 顆星 [來源：Divi Carousel Lite〈WordPress.org 外掛頁〉 https://wordpress.org/plugins/divi-carousel-lite/ 2026-06-30]；要不要升級付費版只看一個訊號：你的輪播要不要自動抓商品或文章。
Divi 有內建輪播功能嗎
沒有。Divi 主題本身沒有獨立的輪播模組，這是新手最常誤會的地方。很多人看到 Divi 內建 Slider 就以為它能做商品輪播，但 Slider 只能把一整張大圖當背景做滿版切換，無法讓三四張商品圖並排橫向滑動。要做出常見的「商品圖輪播」或「廠商 Logo 牆」，必須靠外掛補上，這也是為什麼 Divi 生態裡輪播外掛一直有穩定需求；根據 Elegant Themes 的官方說明，Divi 內建模組清單中只列出 Slider，並未提供獨立的 Carousel 模組。
Slider 與 Carousel 在視覺結構上的差別，直接決定了它們的用途。Slider 每次只顯示一張全幅內容，畫面被單一影像獨占，適合放首頁主視覺或單一促銷活動；Carousel 在同一排可以容納多張縮圖，使用者能一眼看到三到六個選項，再用箭頭或滑動瀏覽更多。對電商來說，這個差別影響的是「一屏能露出多少商品」。Slider 一次一個，商品曝光受到嚴格限制；Carousel 一次三到六個，同等版面下能呈現的商品數量多出數倍，這正是商品列表頁幾乎都採用 Carousel 結構的原因。
補上輪播的路線其實就三條，選哪一條取決於你願不願意花錢、以及你的輪播要不要「自動抓內容」。如果你只是想在首頁放幾張固定商品圖或廠商 Logo，免費外掛綽綽有餘；如果你要讓輪播自動同步 WooCommerce 最新商品或最新文章，那才需要考慮付費方案。別急著買，先把需求問清楚。
- 免費外掛路線：Divi Carousel Lite，裝完直接在 Divi 編輯器新增 Carousel 模組，零成本、輕量，適合手動放固定圖片。
- 付費模組庫路線：Divi Supreme、Divi Plus 這類整包模組庫，輪播只是其中一個模組，功能較完整但常綁整組賣。
- 內建 Slider 配 CSS 土法煉鋼：技術上可行，但維護成本高、手機容易跑版，最不建議。
說到底，三條路線分不開高下的點是視覺，真正會影響選擇的是你的輪播放什麼內容、給誰看、手機上會不會卡。這三個問題想清楚，八成的人會發現自己根本不需要付費版。如果你才剛開始用 Divi 主題完整入門教學 裡的基礎功能，先別碰付費模組庫，把免費工具摸熟再說。要拓展更多功能，也可以參考 必裝的 Divi 外掛總整理。
Divi 輪播需求 × 推薦方案判斷表
| 你的輪播內容 | 推薦方案 | 要不要花錢 |
|---|---|---|
| 首頁商品圖（手動上傳固定圖） | Divi Carousel Lite 免費版 Image Carousel | 不用 |
| 關於我們的廠商 Logo 牆 | Divi Carousel Lite 免費版 Logo Carousel | 不用 |
| 作品集橫向展示 | Divi Carousel Lite 免費版 Image Carousel | 不用 |
| 自動抓 WooCommerce 最新商品 | 付費版 WooCommerce Carousel | 要 |
| 自動抓最新文章 | 付費版 Post Carousel | 要 |
這張表想傳達一個觀念：升級與否的判斷重點是「內容來源是不是自動的」。如果你的商品圖是接案時一張張手動放的，免費版完全夠用；如果你經營的是上 WooCommerce 購物網站架設 的商城，商品經常更新，自動抓取才有價值。想了解更多 WooCommerce 與 Divi 的搭配，可以看 WooCommerce 佈景主題推薦 與 用 Divi 打造 3C 電商網站。
會把 WooCommerce 當成升級付費版的關鍵觸發點，是因為它已是 WordPress 生態最主要的電商引擎。根據 W3Techs 的調查，WooCommerce 占了所有電商系統的 48.6%，也就是將近一半的電商網站都跑在 WooCommerce 上 [來源：W3Techs〈Usage Statistics and Market Share of WooCommerce〉 https://w3techs.com/technologies/details/cm-woocommerce 2026-06-29]。當你的商城商品規模隨這個市占同步擴大，手動維護輪播圖的負擔就會浮現，這時自動抓取商品的付費輪播模組才真正划算。
Divi Carousel Lite 是什麼？免費版能做哪些輪播
Divi Carousel Lite 是一款專為 Divi 設計的免費輪播外掛，由第三方開發者維護，在 WordPress.org 外掛庫可免費下載。安裝後它會在 Divi 編輯器裡新增 Image Carousel、Logo Carousel 等模組，站長不用寫任何程式碼，只要上傳圖片、調幾個參數，就能做出橫向滑動的輪播區塊。對只缺一個輪播功能的 Divi 站長來說，這幾乎是成本最低的解法 [來源：Divi Carousel Lite〈WordPress.org 外掛頁〉 https://wordpress.org/plugins/divi-carousel-lite/ 2026-06-30]。
免費版的核心模組是 Image Carousel 與 Logo Carousel。前者處理商品圖、作品集縮圖這類需要連結與多張並排的情境；後者專門做廠商或合作夥伴的 Logo 牆，是建立信任感的經典區塊。這兩個模組加起來，幾乎涵蓋了站長對輪播的八成需求。需要付費版功能的實際比例不到兩成，多數案子在免費版的兩個模組裡就能解決。
- Image Carousel：商品圖、活動照、作品集縮圖橫向展示，每張圖可設連結。
- Logo Carousel：廠商或合作夥伴 Logo 牆，適合放關於我們或首頁中段。
- 可調參數：滑動數量（Slides To Show）、自動播放（Autoplay）、間距（Gap）、圓角、箭頭與圓點導航。
- Responsive 控制：桌面、平板、手機可分別設顯示張數。
不過話說回來，免費版當然有限制。最主要的兩個是：沒有 Post Carousel（無法自動抓最新文章）、沒有 WooCommerce Carousel（無法自動抓商品）。進階特效也較少，像是複雜的視差或動態濾鏡這類效果，免費版做不出來。如果你需要輪播自動串接內容來源，這就是免費與付費的分水嶺。商用授權方面，免費版可用於商業網站，實際條款以官方外掛頁說明為準 [來源：Divi Carousel Lite〈WordPress.org 外掛頁〉 https://wordpress.org/plugins/divi-carousel-lite/ 2026-06-30]。
免費版「手動更新」這個特性需要特別留意，它會帶來一個長期維護成本。假設你用 Image Carousel 放了十張商品圖，半年後商品下架五款、新增三款，你就得手動進 Divi 編輯器把舊圖換掉、把新圖上傳並重新排列。商品數越多、更新頻率越高，這個手動維護的負擔就越大。付費版的 WooCommerce Carousel 之所以值得，價值就在於它能讀取商品狀態自動增減，下架的商品隔天就從輪播消失，完全不必人工介入。把這個維護成本算進去，你就明白為什麼商品破百的商城應該直接走付費路線。
判斷準則很簡單：手動上傳固定圖片，用免費版；要自動抓最新商品或文章，再考慮付費版。如果你正在比較不同 Divi Supreme 模組庫評價 或想了解其他 Divi 輪播外掛的完整選項，這個準則一樣適用。順帶一提，Divi 圖片懸停特效 與 Divi 分類篩選外掛 也常跟輪播搭配使用，能做出更完整的視覺組合。
Divi Carousel Lite 安裝與設定完整步驟
從零開始做第一個 Divi 商品輪播，前後大約 10 分鐘。整個流程分五步：在外掛庫搜尋並啟用 Divi Carousel Lite、進入 Divi 編輯器插入 Carousel 模組、上傳圖片、調整顯示參數、接著處理手機版顯示張數。不用碰程式碼，跟著做就能跑出一個堪用的輪播。如果你還不熟悉 Divi 編輯器的基本操作，可以先翻一下 Divi 主題架站全攻略 或 Divi 5 新版介面差異。
Step 1：安裝 Divi Carousel Lite
登入 WordPress 後台，左側選「外掛 → 安裝外掛」，在搜尋框輸入 Divi Carousel Lite。找到正確的外掛後點「立即安裝」，裝完再點「啟用」。如果搜尋不到（有時是 WordPress 外掛庫暫時連線問題），可以直接到官方外掛頁下載 zip 檔，回到後台用「上傳外掛」的方式安裝。安裝教學的細節若不熟，可參考 WordPress 外掛安裝方法。
Step 2：在 Divi 編輯器插入 Carousel 模組
進入 Divi Visual Builder，在你想放輪播的位置新增一個 Row（欄位），點「＋」插入模組，在模組清單裡找到 Image Carousel 或 Logo Carousel。選哪一個取決於你的用途：商品圖、作品集選 Image Carousel；廠商 Logo 牆選 Logo Carousel。模組插進去後，畫面會跳出設定面板，這時候還是空的，不用緊張。
Step 3：上傳或選擇輪播圖片
在模組設定裡找到圖片上傳區，點「Add Image」從媒體庫選圖或直接上傳。這裡有一個很容易被忽略的細節：所有輪播圖最好在事前統一裁切為相同比例，商品圖建議 1:1 正方形，Logo 則統一高度（例如全部壓成 120px 高、寬度自適應）。比例不一致會導致輪播高度跳動，這是手機跑版的主因之一。想找可用素材，可以從 免費商用圖庫網站 下載。
圖片命名也值得花一分鐘。給檔案一個描述性的檔名（例如 red-leather-handbag-front.jpg 而不是 IMG_2034.jpg），上傳後 WordPress 會自動帶入替代文字欄位，等於順手把圖片 SEO 的基礎打好。替代文字在輪播情境下尤其重要，因為搜尋引擎與螢幕閱讀器都靠它理解圖片內容，留空白等於讓這張圖在無障礙與 SEO 兩個維度都失去訊號。
Step 4：調整顯示參數
- Slides To Show：桌面建議 3 到 4 張，商品圖寧可大一點讓人看清楚。
- Autoplay：開啟自動播放，間隔建議 3 到 5 秒（3000 到 5000ms），低於 3 秒會讓人讀不完，超過 5 秒又像停住。
- Arrows / Dots：箭頭與圓點導航建議至少留一種，方便使用者手動切換。
- Gap：圖片間距約 15 到 20px，太擠會黏在一起，太開又顯得零散。
Step 5：手機版顯示張數
切到設定面板的 Responsive（齒輪圖示）分頁，分別為平板與手機設定顯示張數。手機螢幕窄，一次顯示 3 張商品圖會小到看不清，建議降到 1 到 2 張。平板可以設 2 到 3 張。這一步是避免手機跑版最關鍵的設定，很多人輪播在桌面上漂亮、到手機卻擠成一團，問題九成出在這裡。更多手機排版觀念可參考 響應式網頁設計觀念 與 Divi 手機版排序調整。
手機版為什麼必須單獨設定，背後有實際流量數據支撐。根據 Statista 的統計，2026 年第一季，手機裝置（不含平板）占了全球網站流量的 52.27% [來源：Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉 https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 2026-04-28]。也就是說，超過一半的訪客是用手機看你的輪播。手機沒有調好，等於對過半數訪客呈現一個跑版的輪播，這直接傷害第一印象與停留時間。Google 也早在 2023 年 10 月就宣布行動優先索引（Mobile First Indexing）已完成，所有能在手機運作的網站都改以手機爬蟲優先檢索 [來源：Google Search Central Blog〈Mobile-first indexing is here〉 https://developers.google.com/search/blog/2023/10/mobile-first-is-here 2023-10-31]。手機版的輪播品質，同時影響使用者體驗與搜尋引擎對你網站的評價。
5 分鐘快速設定檢查表
- 外掛已啟用，且 Divi 主題為啟用狀態。
- 輪播圖全部已上傳並設為相同比例。
- Slides To Show 桌面 3 到 4、手機 1 到 2。
- Autoplay 開啟，間隔 3000 到 5000ms。
- 箭頭或圓點至少留一種。
- 圖片單張壓在 100KB 以內（建議值，非官方標準）[建議值]。
跑完這六項檢查，輪播就能上線。記得按 Divi 編輯器右下角的儲存，再清除網站快取（如果你有裝 WordPress 快取外掛推薦 裡的工具），重新整理前端確認顯示正常。這套流程同樣適用於 Divi 佈局版型推薦 與 Divi 頁首設計套版 裡的現成版型，只是模組位置不同。
商品、Logo、作品集三種輪播應用場景
裝好之後，Divi 輪播到底要用在哪裡最有效？實戰中最高 CP 值的場景有三個：首頁商品圖輪播（導購）、關於我們或頁尾的廠商 Logo 牆（建立信任）、作品集頁面的橫向作品展示（接案展示）。這三種都能用 Divi Carousel Lite 免費版完成，不需要付費升級。差別只在於放的位置、圖片風格、與點擊後的連結對象。
第一個場景是商品圖輪播。放首頁主視覺下方或商品分類頁上方，一次顯示 3 到 4 張熱銷商品，間隔 4 秒自動切換，每張圖連到對應商品頁。這個做法的核心是「把最想賣的東西放在第一屏附近」，輪播讓你能塞進更多商品而不佔太多版面。比起靜態格狀排列，橫向滑動能在同樣空間裡露出 2 到 3 倍的商品數。對接案設計師來說，這也是客戶最常指定的「首頁要有輪播」需求，配 CTA 按鈕設計指南 一起做，導購效果更明確。
第二個場景是廠商 Logo 牆。放在關於我們頁面或首頁中段，把合作過的客戶、經銷品牌、認證單位 Logo 排成橫向輪播。經典做法是 Logo 預設灰階，滑鼠或手指滑過時轉為彩色，這是建立信任感成本最低的視覺手法。比起把 Logo 堆成一個靜態方陣，輪播能在有限寬度裡容納更多 Logo，畫面也更有節奏感。這個區塊常跟 Divi 作品集展示設計 或 Divi 價目表設計 搭在同一頁。若想進一步把這份信任感延伸到搜尋結果，可搭配 SERPO 技巧替品牌建立信任感 的做法，讓品牌在搜尋頁面就先建立印象。
第三個場景是作品集輪播。把代表性作品的縮圖排成橫向輪播，點擊連到完整作品頁。比起傳統的格狀作品排列，輪播省版面、也更有動態感，特別適合放在首頁或服務介紹頁，讓訪客快速掃過你的實力。這個做法對接案網頁設計師尤其有用，因為作品集往往是決定客戶要不要聯絡你的關鍵。更多作品集的整體規劃可以看 作品集網站設計指南 與 Divi 一頁式網頁模板。
三種場景的建議參數組合
| 場景 | 顯示張數（桌面／手機） | 自動播放間隔 | 箭頭 | 點擊連結 |
|---|---|---|---|---|
| 首頁商品圖輪播 | 3 到 4／1 到 2 | 4000ms | 留 | 連到商品頁 |
| 廠商 Logo 牆 | 5 到 6／2 到 3 | 5000ms 或關閉 | 可省 | 可不連 |
| 作品集輪播 | 3／1 到 2 | 關閉或 5000ms | 留 | 連到作品頁 |
這裡要點出一個關鍵：以上三種場景，免費版都做得到。真正需要付費版的是「輪播要自動抓 WooCommerce 最新商品」這個進階需求。如果你的商品會頻繁更新，手動維護輪播圖會變成負擔，這時升級到付費版的 WooCommerce Carousel 模組才有意義。判斷的時機點很實際：當你更新輪播圖花的時間，已經比外掛一年的費用還值錢，那就該花錢了。想看商品頁本身的優化，可以參考 WooCommerce 商品頁 SEO 優化。
免費 Divi Carousel Lite vs 付費輪播外掛比較
到底該用免費的 Divi Carousel Lite，還是花錢買付費輪播外掛？判斷標準只有一個：你的輪播要不要自動抓文章或商品。要，就買付費版或整組模組庫；不要、只是手動放固定圖片，免費版就夠，別多花錢。這聽起來很絕對，但實際把需求拆開後，多數站長會發現自己落在「不用」的那一邊。
免費版最大優勢是零成本、輕量、夠用；最大劣勢是無法自動串接內容來源。付費模組庫（例如 Divi Supreme、Divi Plus）真正的痛點在於常綁整包賣，你可能只用輪播一個模組卻付了一整組的錢，外掛載入負擔也跟著變大。對一個站齡還短、商品數還少的網站來說，這是典型的「用大錢解小問題」。如果你還沒決定要不要走付費路線，可以先從 Divi Marketplace 免費資源 或 Divi 高質感版型庫 著手評估。
三方功能比較表
| 項目 | Divi Carousel Lite（免費） | Divi Carousel Pro（付費） | Divi Supreme 模組庫（付費） |
|---|---|---|---|
| 價格 | 免費 | 約每年數十美元起，以官網為準 | 約每年數十美元起，以官網為準 |
| Image Carousel | 有 | 有 | 有 |
| Logo Carousel | 有 | 有 | 有 |
| Post Carousel | 無 | 有 | 有 |
| WooCommerce 商品輪播 | 無 | 有 | 視版本 |
| 進階特效 | 較少 | 較多 | 多（含其他模組） |
| 更新頻率 | 穩定 | 穩定 | 穩定 |
| 是否綁整包賣 | 否 | 否 | 是（整組模組庫） |
表中的價格刻意寫成「約每年數十美元起，以官網為準」，因為付費外掛的定價會隨促銷與版本調整，寫死數字反而誤導，實際金額以官方當時公告為準 [建議處理，避免寫死未驗證數字]。如果你想知道 Divi 本體的費用拆解，可以看 WordPress 架站費用拆解。要快速架站則參考 快速架好 WordPress 網站。
升級決策的二維矩陣
把「內容來源」與「更新頻率」這兩個維度交叉，就能把升級判斷收斂成一張二維矩陣。橫軸是內容來源（手動上傳／自動抓取），縱軸是更新頻率（低頻偶爾改／高頻每週改）。落在「手動上傳＋低頻」這一格的站長，免費版綽綽有餘，連定期維護都談不上；落在「手動上傳＋高頻」的人，免費版能用但會越用越累，這時要評估的是「人工維護的時間成本」是否已經超過外掛年費；落在「自動抓取」的兩格，免費版做不來，直接走付費路線。把你的網站對照進這張矩陣，答案通常在三十秒內就會浮現，不必再反覆比價。
| 手動上傳固定圖 | 自動抓商品或文章 | |
|---|---|---|
| 低頻更新（一季改一次以內） | 免費版，零成本最佳解 | 免費版做不來，付費版功能閒置風險高 |
| 高頻更新（每週或更快） | 免費版可用，留意維護工時 | 付費版，ROI 最高的一格 |
決策建議這樣抓：站齡小於一年、商品數少於 50，先用免費版；商品破百、需要分類商品輪播、或需要自動同步最新文章，再升級付費版或模組庫。這個門檻屬於務實的參考點，沒有絕對的硬性界線。很多站長一開始就想買齊，結果用了半年發現根本只動到輪播一個模組，預算花得冤枉。換個角度想，把省下的錢拿去壓圖片、做快取，對轉換率的幫助比任何輪播特效都大。相關工具可參考 WordPress 圖片優化指南 與 網站速度優化技巧。
如果你在比較不同外掛生態，Divi Plus 與 Divi Carousel Lite 的差異比較這類查詢其實就是在問同一件事：到底差在哪、值不值得。結論還是回到那個訊號：自動抓內容才值得付費。想看其他頁面編輯器怎麼做輪播，可以對照 Elementor 圖片輪播教學 與 Elementor Hero 輪播設計，也能參考 WordPress 頁面編輯器比較。
什麼情況不該用 Divi 輪播
輪播看起來是萬用解法，實際上有幾種情境放輪播反而扣分。把這些反面情境列出來，是因為很多站長裝了輪播、卻不知道自己用錯地方，最後輪播變成裝飾品，甚至拖累轉換。判斷的依據很具體：放輪播會不會讓使用者「看不到想看的東西」，或「得等它轉才能看到」。
- 只有兩三張圖的需求：內容少到三張以內，輪播的滑動機制反而比靜態網格多餘。直接用 Image 模組排成一排，訪客一次看全部，不必等自動播放、也不必點箭頭。輪播的價值在於「用有限版面裝下很多內容」，內容不夠多時，這個價值就消失了。
- 放重要但需要閱讀的文字：輪播的本質是快速瀏覽，每張停留時間短。把價目表、服務條款、關鍵規格這類需要仔細讀的內容塞進輪播，使用者讀到一半就被切走，體驗很差。這類內容該用靜態區塊或表格呈現。
- 手機為主的極簡網站：手機螢幕窄，輪播一次只能顯示一到兩張，滑動操作在小螢幕上容易誤觸。如果你的站超過七成流量來自手機，且內容不多，靜態直列排版往往比輪播更清楚。
- 純粹追求特效：為了讓首頁「看起來有動態」而裝輪播，內容卻沒有真正需要輪播的理由。這種輪播通常撐不久，更新到一半就荒廢，反而讓首頁露出過時的內容。
替代方案的判斷也很直接。內容少就用靜態網格，需要分類瀏覽就用篩選外掛搭配網格（例如 Divi 分類篩選外掛），需要單一全幅聚焦就用 Slider。輪播真正不可取代的情境只有一個：內容多到塞不下一屏、又需要橫向連續瀏覽。商品列表、Logo 牆、作品集縮圖都符合這個條件，這也是前面三種場景成立的根本原因。記住這個判準，就不會把輪播當成裝飾品到處亂放。
Divi 輪播常見問題：手機跑版、圖片不顯示、拖慢速度
裝了 Divi 輪播之後，前三名故障是：手機版一次顯示太多張導致圖片過小、圖片沒設精選圖或尺寸不一致導致顯示空白、輪播的 JS 加上手機慢網速導致首屏延遲。這三個問題都有對應的排除法，多半能在 10 分鐘內自己解決，不需要動到程式碼。
- 手機跑版／圖片過小：到 Responsive 分頁把手機顯示張數降到 1 到 2 張，並固定圖片比例。桌面漂亮、手機擠成一團，九成是這裡沒調。
- 圖片顯示不出來：先確認圖片上傳成功（媒體庫看得到縮圖）、模組沒設過小的最小寬度、再檢查快取或安全性外掛有沒有擋掉輪播的 JS。逐一停用其他外掛測試是最快的排除法。
- 網站變慢：輪播本身不重，重的是沒壓縮的大圖。搭配 Smush 等壓縮外掛與 Lazy Load 可大幅改善。
- 與其他外掛衝突：Divi 編輯器打不開時，先停用其他輪播或快取外掛逐一排查，找出衝突來源。
- 自動播放太快或太慢：調 Autoplay Speed（單位為毫秒），3000 到 5000ms 最順眼，低於 3000 會讀不完，超過 5000 像停住。
故障排除決策樹
遇到輪播問題時，照固定的排查順序走，能避免走冤枉路。第一關先判斷症狀是「完全沒顯示」還是「顯示但跑版」。完全沒顯示，先查圖片是否在媒體庫、再查外掛衝突、最後查快取；顯示但跑版，直接進 Responsive 分頁調顯示張數與圖片比例。這個順序的邏輯是：先排除「根本沒有內容」的可能，再處理「內容在但呈現不對」。很多人一看到輪播壞掉就去動 CSS 或換外掛，繞了一大圈才發現只是圖片沒上傳成功。
| 症狀 | 第一個檢查 | 第二個檢查 | 第三個檢查 |
|---|---|---|---|
| 輪播完全空白 | 圖片是否在媒體庫 | 模組最小寬度是否過小 | 停用快取外掛測 JS 載入 |
| 桌面正常、手機跑版 | Responsive 手機顯示張數 | 圖片是否統一比例 | 主題 CSS 是否覆蓋輪播 |
| 輪播顯示但不滑動 | JS 是否被快取外掛擋掉 | 是否與其他輪播外掛衝突 | 瀏覽器主控台有無 JS 錯誤 |
| 圖片模糊或變形 | 原始圖片解析度是否足夠 | 是否被 CSS 拉伸到固定寬高 | 是否用了過小的縮圖尺寸 |
特別提醒「圖片顯示不出來」這項。很多時候不是外掛壞了，而是圖片根本沒上傳成功，或是被快取外掛擋掉了 JS 載入。排除順序建議是：先看媒體庫確認圖片在不在，再換一張確定能顯示的圖測試，到頭來才去懷疑外掛衝突。把順序搞反會浪費很多時間。圖片壓縮工具可以參考 Smush 圖片壓縮外掛 與 圖片壓縮工具實測。
關於拖慢網站這點，要澄清一個常見誤解：輪播外掛本身不是效能瓶頸。真正拖慢網站的，是沒壓縮的大圖、過多的特效堆疊、以及沒開快取。把這三項顧好，輪播對速度的影響其實很有限。這不是空談：web.dev 收錄的案例顯示，Rakuten 24 投資 Core Web Vitals 之後，每位訪客的營收提升了 53.37%、轉換率提升了 33.13% [來源：web.dev〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]。換句話說，把預算砸在輪播特效的報酬率偏低，先把圖片、快取、Core Web Vitals 顧好，對營收的幫助更直接。更多效能觀念可參考 Core Web Vitals 核心指標、Lazy Load 延遲載入設定，以及 圖片 SEO 優化完整指南。這幾項是影響 LCP 與 CLS 的關鍵，跟輪播能不能跑順直接相關。
進階優化：輪播的速度與視覺質感
輪播跑起來之後，要怎麼讓它更順、更好看、又不傷 SEO？三個動作就能讓畫面質感跟上專業作品集：把所有輪播圖統一比例並壓到 WebP、開啟 Lazy Load 與快取、用 CSS 把 Logo 牆做成灰階滑過轉彩色。這三步做完，視覺質感提升的同時，載入速度反而更快。重點是這些都不需要付費外掛，CSS 與圖片優化本來就是站長基本功。
- 圖片優先：統一比例（商品 1:1、Logo 統一高度）、壓成 WebP 格式、單張控制在 100KB 以內。這個 100KB 是經驗建議值，不是官方標準 [建議值]。
- 載入策略：輪播圖開 Lazy Load，但首屏輪播可例外設為優先載入（preload），避免影響 LCP。
- 視覺細節：Logo 牆用 CSS filter 做灰階、hover 轉彩色；商品圖加圓角與陰影；箭頭可換成自訂 SVG。
- 特效克制：視差、自動放大這類特效最多保留一種，過度堆疊反而拖慢手機體驗。
這裡要特別談 CLS（版面位移）。輪播最容易引發 CLS 問題的原因，是圖片沒設固定尺寸，導致圖片載入後高度突然跳動，把下方內容擠下去。解法很直接：在模組設定或 CSS 裡幫輪播圖指定固定的寬高，瀏覽器會先保留空間，圖片載入完成也不會擠動版面。這件事看起來小，卻是 Core Web Vitals 評分裡最常被忽略的一環。搭配 RWD 手機版排版實戰 與 網頁版面設計技巧 的觀念一起做，效果會更穩。
效能追蹤建議用 PageSpeed Insights 觀察輪播區塊對 LCP 與 CLS 的影響。如果 CLS 過高，第一個該檢查的就是圖片有沒有設固定尺寸，而不是急著換外掛。實務上很多「輪播拖慢網站」的投訴，最後查下來都是圖片沒壓、沒設尺寸，跟外掛本身沒太大關係。圖片壓好、手機跑順，輪播的質感就先顧住了一半。若想先把 網頁速度的基本觀念 搞懂，再回頭檢視輪播設定，排查起來會更有效率。
視覺質感的部分，CSS filter 做灰階 Logo 是性價比最高的手法。原理是用 filter: grayscale(100%) 讓 Logo 預設灰階，再用 :hover 把 grayscale 設回 0，滑過時轉為彩色。這段 CSS 不長，貼進 Divi 的自訂 CSS 欄位或子主題的 style.css 即可。如果你還沒用子主題，建議先建一個，相關做法可參考 Divi 子主題推薦 與 Divi 自訂字體上傳。這類細節調整也常出現在 Divi 標題設計技巧 與 Divi 視差滾動效果 的進階應用裡。
輪播的無障礙與可讀性
輪播經常被忽略的一個維度是無障礙（accessibility）。自動播放的輪播對使用螢幕閱讀器的視障訪客是一個麻煩，內容會在朗讀到一半時就被切走；對有動作敏感症的訪客，持續移動的畫面也可能造成不適。把這些使用者也納入考量，輪播的設計會更完整。
- 每張圖都寫替代文字：替代文字讓螢幕閱讀器能讀出圖片內容，也讓搜尋引擎理解圖片。輪播圖留空白，等於同時放棄無障礙與圖片 SEO 兩個訊號。
- 提供暫停自動播放的控制：自動播放的輪播建議提供暫停按鈕或在使用者互動後停止，方便需要時間閱讀的訪客。
- 箭頭與圓點鍵盤可操作：確認導航元件能用 Tab 鍵聚焦、Enter 或方向鍵操作，讓無法使用滑鼠的訪客也能切換。
- 尊重減少動態偏好：透過 prefers-reduced-motion 媒體查詢，對啟用減少動態的使用者關閉自動播放與過場動畫。
這些調整看似細節，對整體網站品質分數與使用者覆蓋率都有實質幫助。一個能被螢幕閱讀器正確朗讀、能被鍵盤操作的輪播，觸及的使用者比只照顧滑鼠使用者的輪播更廣。對商業網站來說，這也等於把潛在客戶的漏斗開得更大。
輪播與 SEO 的關係
從 SEO 角度看輪播，要分清楚兩件事：輪播裡的圖片能不能被索引、輪播這個區塊對頁面整體排名有沒有幫助。第一件相對單純，只要圖片有替代文字、有設固定尺寸、沒有被 JavaScript 動態注入到搜尋引擎抓不到的地方，Google 大多能讀到輪播裡的每張圖。第二件就需要務實看待：輪播本身不會因為「有動態」就加分，搜尋引擎評估的是頁面整體內容與體驗，輪播只是其中一個區塊。
實務上有三個常見的輪播 SEO 地雷。第一是把關鍵文字內容（例如產品賣點、定價）只放在輪播圖片裡，搜尋引擎讀不到，等於這些資訊對 SEO 完全失效，正確做法是圖片配文字說明，把重要訊息同時以文字呈現。第二是輪播佔了首屏大量版面卻沒有其他實質文字內容，導致首屏資訊密度偏低，對需要快速判斷頁面主題的搜尋引擎與訪客都不利。第三是自動播放間隔過短，訪客停留時間被壓縮，連帶影響停留與互動訊號。避開這三點，輪播就不會成為 SEO 的負債。
結構化資料的搭配也值得提。如果你的商品輪播連到商品頁，商品頁本身加上 Product 結構化資料、輪播圖加上替代文字，能讓搜尋引擎更完整地理解商品資訊，有機會在搜尋結果呈現更豐富的樣式。這屬於整體頁面 SEO 的一環，輪播外掛本身管不到，但既然輪播常放在商品曝光的第一線，把這條線串起來效益最高。相關觀念可延伸到 圖片 SEO 優化完整指南 與 Core Web Vitals 核心指標。
結論：先用免費版把輪播做對，再決定要不要花錢
下一步很明確：先裝 Divi Carousel Lite 免費版、做一個商品圖輪播跑跑看，接著做一個廠商 Logo 牆，把圖片壓好、快取開起來，觀察一週再決定要不要升級。如果一週下來你發現「需要自動抓商品或文章」，那才值得付費；否則省下的預算拿去壓圖片和做快取，對轉換率的幫助比任何輪播特效都大。這不是省小錢，而是把錢花在真正影響轉換的地方。如果你的網站還沒上線，先從 沒有網站怎麼開始做 SEO 的觀念打底，再回來談輪播這類細節優化，順序會更清楚。
判斷升級的三個訊號：商品破百且需要分類輪播、要自動同步最新文章、需要進階特效且預算允許。三個訊號一個都沒中，免費版就是最優解。反向也要提醒：不要為了「功能齊全」買一整組模組庫卻只用輪播，那是預算浪費，也是效能負擔。模組庫的外掛載入與 CSS 往往比單一輪播外掛重，手機體驗反而變差。
回顧一下整篇的核心立場：輪播要做得漂亮，特效從來不是重點，圖片有沒有壓好、手機有沒有跑順才是。這兩件事顧好，免費版的 Divi Carousel Lite 就足以做出專業級的視覺與速度。與其花時間比較哪個付費外掛最強，不如先把自己網站的圖片與快取基礎打好。等你真的踩到「自動抓內容」的需求，再升級也不遲。想往更深的功能走，可以接著研究 Divi Cloud 雲端版型管理、Divi 品牌網站設計實例、Divi 經營內容網站教學、餐飲品牌網站設計，或 一頁式網頁設計攻略 與 網頁設計必備元素。搭配 WordPress 必裝外掛清單、WordPress 區塊小工具設定、WordPress 頁面編輯操作、Gutenberg 區塊編輯器外掛、Bloom 電子報訂閱外掛、Monarch 社群分享按鈕 一起看，能拼出更完整的網站功能藍圖。
常見問題 FAQ
Divi 內建有輪播功能嗎？
沒有。Divi 只內建滿版背景用的 Slider，無法做多張商品圖橫向滑動的輪播，需要靠 Divi Carousel Lite 這類外掛補上。
Divi Carousel Lite 免費版可以商用嗎？
可以。免費版可用於商業網站，實際授權條款以官方外掛頁說明為準 [來源：Divi Carousel Lite〈WordPress.org 外掛頁〉 https://wordpress.org/plugins/divi-carousel-lite/ 2026-06-30]。
Divi 商品輪播要怎麼做？
啟用 Divi Carousel Lite 後，在 Divi 編輯器插入 Image Carousel 模組，上傳統一比例的商品圖，設好顯示張數與自動播放間隔即可，全程不用寫程式。
Divi Carousel Lite 付費版多了什麼功能？
主要補上 Post Carousel 與 WooCommerce 商品輪播，也就是能自動抓最新文章與商品，以及更多進階特效。
Divi 輪播會影響網站速度和 SEO 嗎？
輪播本身不重，真正拖慢網站的是沒壓縮的大圖與沒開快取。把圖片壓好、開 Lazy Load、設固定尺寸，輪播對 Core Web Vitals 的影響很有限。
Divi 輪播在手機上跑版怎麼辦？
到模組的 Responsive 分頁，把手機顯示張數降到 1 到 2 張，並把所有輪播圖裁成相同比例，就能解決擠成一團的問題。
Divi Carousel 圖片顯示不出來怎麼排除？
先確認圖片在媒體庫裡看得到，再檢查模組是否設了過小的最小寬度，接著停用快取或安全性外掛逐一測試是否擋掉了輪播的 JavaScript。
Divi 輪播可以放廠商 Logo 嗎？
可以。免費版的 Logo Carousel 模組就是專門做廠商或合作夥伴 Logo 牆用，搭配 CSS 灰階滑過轉彩色，是建立信任感的經典做法。
什麼情況不該用 Divi 輪播？
內容只有兩三張、需要仔細閱讀的文字、手機為主的極簡網站，或純粹追求特效而沒有實質內容需求時，放輪播反而扣分。內容多到塞不下一屏、又需要橫向連續瀏覽，才是輪播不可取代的情境。
Divi 輪播怎麼做對 SEO 與無障礙才有幫助？
每張輪播圖寫替代文字、把重要訊息同時以文字呈現、提供暫停自動播放的控制、箭頭與圓點做到鍵盤可操作。這些調整同時照顧搜尋引擎索引與螢幕閱讀器使用者，讓輪播不再只是視覺裝飾。