View Categories

Elementor 首頁輪播圖/Banner 怎麼換圖、改順序

< 1 分鐘閱讀

快速答案:用 Elementor 編輯首頁,點輪播區塊,在左側面板的投影片清單裡換圖、拖曳改順序;如果輪播是 Smart Slider、Revolution Slider 這類外掛做的,要到該外掛的後台改,不在 Elementor 裡。換圖前先把新圖裁成跟舊圖相同比例,手機版另外檢查一次。

為什麼會這樣 #

首頁 banner 有三種做法:Elementor 內建的輪播或圖片輪播小工具、獨立的輪播外掛、或佈景自帶的首頁 banner 設定。客戶最常卡在「找不到在哪改」以及「換了圖手機版跑掉」——後者是因為新圖尺寸與原本不同,或桌機與手機各設了一張圖,只換到其中一張。

怎麼處理 #

  1. 找到入口:登入後在前台點上方工具列「使用 Elementor 編輯」,點輪播區塊,左側出現設定。如果點到的是一段短代碼,那是輪播外掛,到後台對應外掛(例如 Smart Slider 3)選那組 slider。
  2. 換圖:投影片清單裡每一張點開換「圖片」;標題、文字、按鈕連結也在同一張裡。
  3. 改順序:投影片清單直接拖曳;要加一張就複製現有的一張再改,樣式會一致。
  4. 圖片規格:先到媒體庫看舊圖的長寬,新圖裁成同比例。一般 banner 寬 1920 就夠,檔案壓到 300KB 以下再上傳(TinyPNG、Squoosh 都行)。
  5. 手機版:Elementor 左下角切到手機模式,看重點有沒有被裁掉、文字有沒有溢出。輪播小工具可以在手機版設不同高度,或改用「背景圖片」為手機另外指定一張直式圖。
  6. 寬螢幕:容器設最大寬度,或背景圖用 cover 並設定位,避免大螢幕圖片超出邊界。
  7. 按「更新」,清快取,用無痕視窗看前台。

我們實際遇過的情況 #

一家企業站客戶說「首頁輪播圖改不了順序,之前明明可以」,因為那組輪播是 Smart Slider 做的,不在 Elementor;到外掛後台拖曳排序就好。一個多語企業站要改各語言的首頁輪播,每個語言的首頁是獨立頁面,要一個一個改,不會自動同步。

一家製造業客戶換了首圖後手機版跑版,原因是新圖比例與原設定不同;補設手機版高度、換一張直式圖後解決。另一家客戶在大螢幕看首頁 banner 圖片超出邊界,是容器沒設最大寬度,加上後正常。

什麼時候該找人 #

輪播用的是已停止更新的外掛、換圖後整個區塊消失、或要做桌機與手機不同圖的響應式設定卻不確定怎麼設。這種一次花半小時教會,比反覆試划算。

常見問題 #

首頁輪播在 Elementor 裡點不到、改不了順序? #

那組輪播多半是 Smart Slider 之類的外掛做的,Elementor 裡只是一段短代碼;到該外掛後台選那組 slider 就能拖曳排序。

換了 banner 圖手機版就跑版? #

新圖比例與原設定不同。在 Elementor 手機模式另外設高度,或為手機指定一張直式圖。

banner 圖片要多大? #

先看舊圖長寬,新圖裁成同比例;一般寬 1920 就夠,檔案壓到 300KB 以下再上傳。

想有人每月幫你顧著、順便教你操作:網站守護方案;首頁想整個重做:網站建置