whoops.

Divi 視差滾動教學:打造立體深度感網站

Divi視差設計:靜態可讀再加入動態,重點為背景方法、前景效果、手機備援
Divi視差設計:先看背景方法、前景效果、手機備援。

Divi 視差教學:比較 CSS、True Parallax 與 Scroll Effects 的設定層級,檢查手機呈現、減少動態偏好和 Core Web Vitals。

本頁目錄

視差滾動是常見的網頁特效。畫面往下滑時背景緩慢漂移、前景文字穩穩停在中間,能替品牌頁面加上深度。你打開 Divi,在背景圖片設定裡勾了「Use Parallax Effect」,預覽有了特效,可是手機表現不同、桌機圖片邊緣出現接縫,效能分數也跟著往下掉。

Divi 的深度效果可分成背景視差的兩種方法,以及套在前景模組上的 Scroll Effects。把它們混在一起,容易同時碰到手機行為不同、圖片裁切與網站變卡等問題。這篇會拆開三種工具、用「深度預算表」決定哪個區塊該做視差,再走一遍 Visual Builder 操作與行動版 fallback。

快速重點:視差滾動的本質是讓前、中、後層以不同速度移動,產生深度感。Divi 背景視差提供 CSS 與 True Parallax 兩種方法,前景則可用 Scroll Effects。不同瀏覽器與行動裝置的結果可能不同,所以要先設計好可讀的靜態 fallback。視差不會直接扣 SEO 分數,但大圖與滾動效果可能拖慢 LCP 或互動。

視差滾動其實在做一件事:把平面網頁拆出前、中、後三層

視差(parallax)這個詞是從天文學借來的。你把一根手指舉在眼前,先閉左眼、再閉右眼,手指相對遠方背景的位置會跳一下。這個「因為觀察位置不同而產生的位移差」,就是視差。把它搬進網頁,邏輯變成:螢幕在滾動的時候,離眼睛近的圖層跑得快、離眼睛遠的圖層跑得慢,大腦就會自動把它解讀成「這個畫面有深度」。這種深度感也不一定只能靠分層排版做出來,讓單張照片變 3D 動態的做法,也能在單一素材上創造類似的立體錯覺。

換句話說,視差滾動的本質是「把一個平面版面拆成立體空間」,動畫僅是它呈現出來的樣貌。一個標準的視差構圖會有三層:背景層(最遠、移動最慢)、內容層(文字與主圖、跟著滾動跑)、裝飾層(前景圖示或圖案、移動最快或反向)。你記住這個三層模型,後面所有設定都會變得很直覺,因為 Divi 的每一種視差工具,其實僅是在控制這三層的某一層。

一個常見的誤解是「視差等於背景圖片會動」。背景會動僅是其中一種實作。真正能創造驚豔立體感的,往往是前景模組在滾動時的縮放、旋轉或淡入。這也是為什麼很多新手把背景視差開到滿,畫面反而很「花」卻沒有深度:因為他們僅動了背景那一層,前景完全靜止,三層裡有兩層是死的。深度感來自「層與層之間的速度差」,而不是「某一層動得很厲害」。這個觀念一旦想通,你就不會再把視差當特效亂灑。

Divi 內建三種深度工具,先分清楚才不會拿錯工具

Divi 把深度效果分散在兩個地方:背景視差提供 CSS 與 True Parallax 兩種方法,模組則有獨立的 Scroll Effects。三者都跟滾動有關,但實作與行動版表現不同。Elegant Themes 的背景設定說明也明確列出這兩種 Parallax Method。

左右捲動檢視完整表格

深度工具 底層機制 在哪裡開 手機行為 效能成本 適合場景
CSS Parallax 以 CSS 建立背景視差 Section / Row 背景設定 桌機為主,手機多半退化成靜止 較低,仍需實測 首屏輕量深度感、章節轉場
True Parallax JavaScript 模擬,背景比內容慢、可調速度 背景設定的 Parallax Method 依版本、瀏覽器與裝置而異 較高,需實測 桌機為主的品牌首頁、作品集封面
Scroll Effects 把模組的位移、縮放、旋轉、模糊、透明度綁到滾動進度 任何模組的進階 → Scroll Effects 可在手機獨立關閉 中(每個模組一條動畫) 前景標題、圖示、數字動起來

前兩種處理背景,Scroll Effects 處理前景。要做多層深度,可以選一種背景方法,再視需要為少量前景加 Scroll Effects,不必把所有效果疊在同一區。如果你想把 Divi 的整體操作脈絡補齊,可以回頭看Divi 主題從購買到進階設定。

視差三種工具:CSS/True Parallax 處理背景,Scroll Effects 處理前景。
CSS/True Parallax 處理背景,Scroll Effects 處理前景。

特別提醒一件事:Divi 5 之後介面與效能都做過一輪重構(在Divi 5 介面與升級重點那篇已詳談),背景視差的欄位名稱與 Scroll Effects 的效能表現跟前代略有差異。如果你還在 Divi 4,看到的選項文字會跟接下來描述的幾乎一樣;如果你已經升上 Divi 5,邏輯相同,僅是面板排版更新了。

用一張「深度預算表」決定每個區塊該不該上視差

很多教學會直接叫你「把視差打開」,卻不告訴你什麼時候不該開。實務上的習慣是反過來:先假設整頁都不要視差,再用一張「深度預算表」逐區塊放行。理由很簡單,視差是一種注意力成本,一頁裡同時有四個區塊在動,讀者的眼睛會不知道該看哪,深度感反而互相抵銷。可先從一個有敘事用途的區塊開始,再依可讀性、動態偏好與實測效能決定是否增加;三到四個區塊不是通用上限。

以一個室內設計工作室的一頁式網站為例,把預算表套到實際版面會看得更具體。這類站的版面通常由上到下是:全螢幕首屏(作品集封面照)、設計理念、六個案例卡、服務流程、報價方案、聯絡區。對應的深度預算分配如下。

左右捲動檢視完整表格

區塊 是否上視差 用哪種工具 理由
全螢幕首屏 是 背景 True Parallax 第一印象,值得花一次成本做出深度
設計理念 是 Scroll Effects 讓標題淡入上浮 純文字區,靠前景動畫創造層次,背景留白
六個案例卡 否 無 已經是密集資訊區,再動會擾亂瀏覽
服務流程 是 Scroll Effects 讓步驟圖示依序滑入 時間序內容,依序出場能引導閱讀節奏
報價方案 否 無 數字必須穩定可讀,任何晃動都會降低信任
聯絡區 是(輕量) CSS Parallax 收尾的情緒點,背景不動、表單滑過

注意這張表裡「否」的欄位比「是」還多。這背後的原因是深度感來自對比,跟視差本身好不好無關:有幾個安靜的區塊襯託,那幾個會動的區塊才會顯得有力量。如果你六個區塊全開視差,使用者僅會覺得暈,根本感受不到深度。這個「留白襯託」的原則,跟排版設計裡的留白是同一件事,僅是搬進了時間軸。想更深入看一頁式的版面規劃邏輯,延伸閱讀可以看Divi 一頁式設計實戰。

這類室內設計首屏可以比較 True Parallax 與 CSS 方法,按實測效能和想要的速度感選擇。較重的背景效果適合留在情緒區,讓空間照緩慢位移;案例卡則保持靜態,因為它的任務是讓人快速比對作品,背景移動會影響讀者聚焦。把「動」留給情緒區、「靜」留給資訊區,是分配預算時反覆用到的主軸。同樣的取捨邏輯也適用於以氛圍取勝的身心靈品牌,像瑜珈教室網站通常只在英雄區保留視差、手機版關閉,完整的規劃可以看用 Divi 打造瑜珈品牌網站的氛圍與速度取捨。

還有一個判斷維度:這個區塊的「主訊息」是什麼?如果主訊息是數字、價格、條款、合約重點,那就完全不要動,因為讀者要穩定地讀它;如果主訊息是情緒、氛圍、品牌印象,那就可以放視差進去。視差是情緒工具,不是資訊工具,記住這句話你就不會把報價表做成雲霄飛車。

在 Divi Visual Builder 開啟背景視差:逐欄位實戰

觀念講完了,這裡用背景 True Parallax 當主範例。CSS Parallax 也在同一個面板裡切換,步驟相同。

第一步,在 Visual Builder 裡點你想加視差的那個 Section 的齒輪圖示,進入 Section 設定。這裡示範 Section 背景;Divi 的背景選項也可用於其他支援背景的元素,Scroll Effects 則另在進階設定。背景設定的路徑是 Content → Background → Background Image。

第二步,先上傳或選一張背景圖。這裡有一個關鍵:視差需要的圖片尺寸要比一般背景更大。因為視差會讓背景在容器內上下位移,如果圖片剛好等於容器高度,位移時上下就會露出空白或重複拼接的縫。實務上應讓背景圖有足夠的裁切與位移空間,尺寸按區塊比例、裝置和壓縮後清晰度測試。圖片素材的選擇可以從免費圖庫挑高解析度素材,再進到下一步壓縮。

第三步,圖片上傳完,往下展開 Background Image 的進階選項,你會看到 Use Parallax Effect 與 Parallax Method。把開關打開,再於 True Parallax 和 CSS 兩種方法之間選擇。

第四步,決定速度。True Parallax 沒有顯式的「速度數值」欄位,它的視覺速度也受容器、裁切、裝置與實作方式影響;圖片高度主要決定有多少裁切餘量,不能單憑加高圖片精確控制速度。先在前端檢查位移幅度與露白,再調整構圖和尺寸。

第五步,按下 Save,到前端預覽。預覽的時候不要僅看桌機,一定要把視窗縮到手機寬度,因為你桌機看到的 True Parallax,在手機上很可能完全沒有動。這件事後面會專門講。

背景視差圖片雖然常作為裝飾,仍可能成為首屏最大的資源。未壓縮的大圖加上滾動效果,可能拖慢 LCP 或操作流暢度。每次上傳視差背景圖,都應先經過圖片壓縮工具,並在 WordPress 媒體庫完成圖片優化,再以實際頁面測量結果判斷。

如何挑一張上得了視差的背景圖:構圖、主體、留白

設定再正確,一張不對的背景圖會讓視差整組壞掉。實務上歸納出的習慣是:視差背景圖的挑選標準,在於它能不能在垂直位移後仍然成立、文字壓上去還讀得到,單純漂亮還不夠。這件事在一般的背景圖教學裡很少被單獨提出來講,但它是視差成敗的另一半。

第一個篩選條件是構圖的垂直容忍度。視差會讓背景在容器裡上下跑,如果主體剛好在畫面正中央、上下都是不留餘地的滿版細節,位移一下主體就被裁掉一半。所以實務上偏好主體稍微偏上、或整體屬於上重下輕的構圖,這樣背景往下推的時候,主體還在框內。如果一張圖的主體置中而且邊緣全是關鍵細節,通常會直接換掉,因為它跟視差本質上不相容。

第二個篩選條件是文字落點的留白區。你要先決定標題與副標題落在背景的哪個位置,再回頭找一張那個區域相對乾淨的圖。理想是文字背後有一片低細節的色塊,例如牆面、天空、景深虛化的暗部。最糟的情況是文字剛好壓在樹葉、人群、或圖裡自帶的文字招牌上,那會變成一場視覺車禍,再強的遮罩都難救。也因此,實務上不太建議用空拍人群或市集這類高頻率細節的圖當視差背景,它們在靜態時很美,配上文字就崩潰。

第三個篩選條件是跨裁切相容性。同一張背景圖要在桌機寬版、平板、手機直式三種比例下都能用(或至少能手機獨立換一張),所以挑圖的時候會先在腦海裡跑一次裁切測試:這張圖縮到手機的直立比例,主體還在不在?左右兩側被切掉之後,構圖會不會失衡?能通過這個測試的圖,才有資格進視差背景的候選名單。素材來源可以從免費圖庫裡鎖定「建築空間」「自然景觀」「極簡靜物」這類先天留白多的分類去找,命中率會高很多。

把這三個篩選條件記下來,你會發現視差背景圖的挑選邏輯,其實比較接近「找一個安靜的舞台讓文字表演」,最吸睛的攝影作品在這裡反而不適任,因為它太想搶當主角。這個心態轉過來,你的視差版面才會從「熱鬧」走向「有層次」。

進階玩法:用 Scroll Effects 把任何模組綁到滾動軸

背景視差僅能動背景,真正讓畫面「活起來」的是 Scroll Effects 這套系統。它的邏輯跟背景視差完全不同:可在支援的 Section、Row、Column 或 Module 上設定,然後定義「當使用者滾動到這個模組的某個進度時,它要位移多少、縮放多少、旋轉幾度、透明度多少、模糊多少」。可理解為元素的視覺屬性隨滾動位置變化,實際設定以目前 Divi 版本介面為準。

開啟路徑是:點要套用效果的 Section、Row、Column 或 Module 設定 → Advanced → Scroll Effects。可設定垂直/水平位移、淡入淡出、旋轉、縮放與模糊;名稱可能依 Divi 版本略有差異。

每一種效果的設定邏輯都一樣:你指定一個「起始滾動點」和「結束滾動點」,然後給它起始與結束的數值。例如 Vertical Motion,起始點設 0%(模組剛進入視窗底部)、結束點設 100%(模組離開視窗頂部),起始位移 20%、結束位移 0%,模組就會從下方 20% 的位置慢慢往上飄到定位。把它跟背景 True Parallax 同時開,就會出現「背景慢慢推、前景標題往上浮」的雙層深度,這是視差最迷人的地方。

Scroll Effects 真正強大的是它可以疊加。一個標題模組可以同時垂直位移、淡入、微微旋轉,做出很有個性的進場。但這裡也是失控的重災區:建議單一模組同時開的效果不要超過兩個,否則動畫曲線會互相打架,看起來像在抖而不是在飄。行動版的效果要逐斷點檢查;若有需要,可用版本提供的響應式或可見性設定調整,別假設所有版本都有同名的一鍵停用選項。

Scroll Effects 還能跟 Divi 的 Sticky(黏性)功能搭配。一個模組先設成 Sticky(滾動時釘在某個位置),再疊上 Scroll Effects 的縮放,就可以做出「標題先釘住、然後縮小變形」的導覽列效果。這種組合可能增加滾動時的渲染成本,是否明顯影響流暢度要在實際裝置量測;先只用在有敘事價值的元素上。如果想看更多可以疊加的官方模組與第三方擴充,可以從Divi Supreme 模組擴充或先前整理的必裝 Divi 外掛清單挑搭配。

三個實務上重複在用的 Scroll Effects 配方

講完原理,直接給你三個實務上反覆使用的組合,你可以照著參數套,再依版面微調。這三個配方涵蓋了「進場」「強調」「轉場」三種最常見的需求,套得好就能撐起一整頁的動態層次。

  • 配方一:標題淡入上浮(Vertical Motion 加 Fade In and Out)。模組起始位置設在視窗下方約 15% 處,Fade 從 0 到 100%,結束點設在模組進入視窗中段。這是章節標題最安全也最通用的進場,幾乎百搭。要留意 Fade 的起始點不要設得太早,否則使用者還沒看到標題,它就已經播完一半。
  • 配方二:數字與圖示的微縮放(Scaling Up and Down)。模組從 1.1 倍縮到 1.0 倍,幅度很小但很有感,常用在統計數字、服務步驟的圖示上,製造一種「它朝你靠近然後定位」的份量感。這個配方最忌諱幅度過大,一旦超過 1.3 倍就會從強調變成晃動,反而像故障。
  • 配方三:章節之間的橫向漂移(Horizontal Motion)。把一個裝飾性圖示或副標設成從左側或右側橫向漂入,用來標示一個新章節的開始。它單獨存在時效果有限,但放在兩個全寬區塊的交界處,能做出像電影過場的轉換感。這個配方記得關掉手機版,因為窄螢幕上的橫向位移很容易超出視窗造成橫向卷軸。

這三個配方的共通原則是「幅度小、時間長」。新手最容易犯的錯是把幅度開大、希望「效果明顯」,結果看起來像在抽動。成熟的視差動畫幾乎都是你「感覺得到、卻說不上哪裡在動」的那種微妙位移,這需要你願意把數值調得比直覺更小一點。

手機上的視差是另一個世界:先準備可讀的 fallback

True Parallax 在手機上的表現可能和桌機不同,結果會受 Divi 版本、瀏覽器與裝置設定影響。不要把桌機預覽當成行動版保證。

觸控裝置的效能與互動模型不同,瀏覽器也可能限制背景固定或滾動效果。穩妥做法是把靜態背景當成基礎,確認動畫停用、未觸發或表現不同時,文字對比與構圖仍然成立。

手機靜態備援:動態停用時背景構圖、文字對比和重點內容仍成立。
動態停用時背景構圖、文字對比和重點內容仍成立。

根據 Statista 的全球統計(2026 年 4 月),行動裝置佔整體網頁流量的比例近年來持續超過六成。Google 的 mobile-first indexing(2023 年 10 月)則表示主要以行動版內容建立索引,不是獨立的行動版排名加分。因此,靜態 fallback 應被視為完整設計,而不是故障時才勉強出現的備案。

所以正確的工作順序不是「先調桌機視差,最終再看手機」,而是反過來:「先設計好手機那張靜態背景圖的構圖與對比,確認它在沒有動畫的情況下也成立,再回頭加桌機視差當加分」。一張在手機上構圖混亂、文字壓在圖片雜點上讀不出來的背景,加上視差僅會讓桌機也跟著難看,不會救它。

實務上有三個動作一定要做。第一,在 Section 背景設定裡針對手機獨立設一張構圖更簡潔、主體置中的圖(Divi 的背景圖可以針對桌機、平板、手機分別指定)。第二,背景圖上的文字可用遮罩、漸層或背景色增加對比,但仍須在各裝置與圖片裁切情況下實測文字對比。第三,在手機斷點檢查 Scroll Effects,必要時用響應式設定減弱或停用,並確認停用後內容仍完整可讀。手機版的排序與版面邏輯,可以搭配先前整理的Divi 手機版排序調整一起規劃,才不會桌機很美、手機卻順序錯亂。

這裡也帶出一個觀念:響應式不是「把桌機版縮小塞進手機」,而是「桌機與手機是兩個不同的閱讀情境,各自有各自的最佳狀態」。視差是這個觀念最鮮明的例子,因為它在兩個情境下的行為根本不同。完整的響應式設計思維,推薦再讀一篇響應式網頁設計的基礎整理。

視差不會直接扣 SEO 分,但可能拖累 Core Web Vitals

Google 沒有「用了視差就扣分」的規則。視差是前端表現手法,僅有在大圖、主執行緒負擔或版面位移變差時,才會影響頁面體驗;Google 現行的頁面體驗文件說明 Core Web Vitals 會被排名系統使用,但良好分數不保證排名第一;內容相關性仍然重要。

Core Web Vitals 有三個指標:LCP 衡量主要內容載入、INP 衡量互動回應、CLS 衡量視覺穩定。視差可能影響其中一項或多項,但影響幅度要用實際頁面測量,不能從「有視差」直接推算結果。

視差背景圖若是首屏主要視覺,可能成為 LCP 候選;滾動效果佔用主執行緒時,可能影響互動;載入後若改變區塊尺寸,也可能增加 CLS。三者都要在行動裝置與真實網路條件下測量。

要守住這三個指標,視差網站上線前實務上有四道固定的效能守門:

  1. 壓縮與正確格式:背景圖先壓到 200KB 以內,優先轉 WebP 或 AVIF,WordPress 端搭配系統性的圖片優化流程。
  2. 延遲載入:視差背景圖原則上不 lazy load(它是首屏 LCP 候選),但頁面下方其他視差區塊的圖一定要開延遲載入,避免一次把整頁大圖全拉下來。
  3. CDN 與快取:靜態資源走CDN,頁面層用快取外掛把 HTML 與資產快取住,這是任何 WordPress 站的基本動作,視差站更要守住。完整的速度體系可參考另一篇網站速度優化完整指南,跟著對照做一遍。
  4. 視差額度:回到前面那張深度預算表,控制一頁裡的視差與 Scroll Effects 數量;增加效果後用 Performance 與 PageSpeed 實測主執行緒負擔。

這四道檢查能幫你找出瓶頸,但是否達到良好 Core Web Vitals 仍要看實際使用者資料。關於這三個指標怎麼看、怎麼用 Search Central 的報表追蹤,可以延伸讀Core Web Vitals 與 SEO 的關係,以及上線後用Search Console實際監測數值。視差與 SEO 的關係,本質上來說一句話:視差不會因效果名稱被直接扣分;若它實際傷害頁面體驗,就應減少效果或改善實作。

視差跟其他 Divi 功能能不能一起用:三個最常被問的疑問

實作到一半,讀者最常卡住的點,往往是「視差跟某個功能能不能同時開」這種組合問題,視差本身的設定通常不是最難的那一關。這裡把最常被問的三個狀況一次講清楚,幫你省下交叉測試的時間。

疑問一:視差跟 Sticky 黏性選單會不會打架?可以同時用,但 z-index 階層一定要分清楚。Sticky 選單通常要高於內容背景,但具體 z-index 值取決於頁面的 stacking context;先檢查各層的定位與堆疊關係,再用必要的最小值調整。同時給錨點目標加 scroll-margin-top,預留 Sticky 選單的高度,才不會錨點跳轉時標題被選單遮住。

疑問二:WooCommerce 商品頁能不能用視差背景?能用,但範圍要嚴格收斂在頁面最上方的品牌主視覺那一塊。商品圖庫、價格、購買按鈕、規格表格這些區塊絕對不要疊視差背景,原因有兩個:一是價格與規格屬於必須穩定可讀的資訊,任何位移都會降低信任;二是商品圖庫本身已經是一組互動元素,再加上背景視差的 JavaScript 監聽,INP 很容易吃緊。把視差當成商品頁的「開場裝飾」,用一次就停手,是比較安全的拿捏。

疑問三:視差背景跟影片背景能不能同時上?Divi 背景設定提供圖片與影片等選項;若考慮同區疊加動態效果,先確認目前版本的呈現方式與裝置支援。影片和視差都可能增加載入或渲染成本,沒有一律更好的選項;以靜態版本作比較,量測手機載入、流暢度與可讀性後再決定。

五個最常見的視差地雷:動暈、對比、尺寸、錨點、階層

講了這麼多該做的事,這一節講實作上最常踩到的坑。每一個都附上解法,你直接對著檢查。

地雷一:動暈症與無障礙。視差會讓一部分前庭敏感的讀者頭暈甚至噁心,對部分有前庭敏感性的使用者,動態效果可能造成不適。正確做法是尊重系統的 prefers-reduced-motion 設定,當使用者開啟這個作業系統層級的「減少動態效果」時,應提供減少或停用非必要動態的呈現方式;目前未核實 Divi 會自動處理所有視差與 Scroll Effects,請以系統設定實測並按需自行補上樣式或設定。一個會讓使用者頭暈的網站,再多深度感都救不了轉換率。

地雷二:背景圖上的文字讀不出來。這是最常見、也最致命的一個。漂亮的背景照上面直接壓白字,結果背景剛好也有大片白雲或亮面,文字瞬間消失。解法的關鍵是加一層半透明深色遮罩(例如 rgba(0,0,0,0.45))或由下而上的深色漸層,把文字與背景之間永遠維持足夠的對比,單純換字色通常救不回來。遮罩能改善對比,但是否達到無障礙要求仍需針對實際圖片、文字大小與裝置檢查。文字本身的層級與排版,想深入可以讀文字排版技巧。

地雷三:圖片尺寸不夠造成邊緣重複。前面提過,視差需要背景圖比容器大,否則位移到極限時邊緣會露出空白,瀏覽器會把圖片重複拼接,出現一條明顯的接縫。解法有兩個方向:一是給足圖片高度(按實際位移與裁切結果調整),二是在背景設定裡把重複(repeat)關掉、改成 cover 模式,並把背景位置錨點(background position)設成 center top 或 center center,讓它即使位移也盡量不露餡。

地雷四:錨點跳轉撞上位移。一頁式網站常用導覽列錨點跳到某個區塊,但如果該區塊或它前面的模組有 Scroll Effects 的垂直位移,錨點落點會跟著偏移,使用者點「服務流程」卻落到流程區的中間。解法是給有 Scroll Effects 的目標區塊加一個 scroll-margin-top 緩衝,並在測試階段把每一個錨點都實際點過一次,確認落點。這件事沒有捷徑,就是手動走一遍。

地雷五:z-index 階層衝突。視差背景、Sticky 導覽列、Scroll Effects 前景、彈出選單,全部都在搶 z 軸的前後順序。當 Sticky 選單被視差背景蓋過、或前景圖示穿透到不該出現的區塊,畫面就會出現「怎麼有東西浮在那裡」的靈異現象。解法是上線前畫一張簡單的 z-index 階層表:導覽列最高、彈窗再高一層、內容區與視差背景在底層,固定下來不要隨手亂加。這個習慣會幫你省下無數個「為什麼它跑到上面去了」的深夜除錯。

上線前的七步驟驗收清單,直接拿去用

把上面所有觀念收斂成一張可以照著跑的清單。這是實務上每個視差專案上線前一定走完的七步,你也可以直接搬到團隊的 SOP 裡。

  1. 盤點深度預算:把整頁的區塊列出來,標出哪幾個要視差、用哪種工具,總額度控制在三到四個區塊以內,主訊息是數字或條款的區塊一律不動。
  2. 準備兩套背景圖:桌機用高解析度大圖(依實際顯示尺寸準備足夠解析度和位移空間),手機則準備一張構圖簡潔、主體置中的版本,兩張都先過壓縮與 WebP 轉檔。
  3. 逐區塊設定:背景視差在 Section 設定裡開、Scroll Effects 在模組設計裡開,單一模組同時開的效果不超過兩個,手機停用的開關全打開。
  4. 加對比遮罩:每一個背景圖上的文字區,都加半透明深色遮罩或漸層,確保對比通過無障礙檢查。
  5. 驗證 prefers-reduced-motion:在系統層開啟減少動態效果,確認視差與 Scroll Effects 全部靜止,這是動暈症讀者的安全網。
  6. 測錨點與 z-index:把導覽列每一個錨點實際點過一次,確認落點沒被位移吃掉;檢查 Sticky、彈窗、視差背景的 z-index 階層一致。
  7. 跑效能與行動測試:用 PageSpeed Insights 跑桌機與手機分數,確認 LCP、INP、CLS 都在綠色區間,再到實機手機上滑一遍,確認沒有卡頓與接縫。

這七步走完,你的視差網站才算是「可以對外負責」的狀態。視差這件事的迷人之處,就在它把網頁從一份平面文件拉成了一個有空間感的場景;而它的麻煩之處,也在這個空間感需要你用工程紀律去守護,否則它很快會從驚豔退化成驚嚇。把預算表、手機 fallback、效能守門、無障礙這四件事記住,你就能放心享受它帶來的深度。

如果你手上正好有一個用 Divi 蓋的品牌站或作品集站,想把視差做得有層次又不拖垮效能,卻不想自己摸完整條工程鏈,Whoops SEO 也提供從版面規劃、Divi 實作到效能與 SEO 一起看的顧問服務。需要的時候再來找我們就好,Whoops 很樂意陪你把特效與效能一起權衡。先從上面的七步清單開始,你會發現視差其實沒有那麼難駕馭。

常見問題

Divi 背景視差怎麼設定?CSS 視差跟真實視差有什麼不同?
在支援背景圖片的元素設定中開啟 Use Parallax Effect,再選 CSS 或 True Parallax。官方文件將 CSS 描述為固定背景方式、True 為結合 CSS 與 JavaScript 的方式;不同 Divi 版本與裝置的實際呈現須在前端測試。
Divi 視差效果在手機上會不會破版?
可能,取決於 Divi 版本、瀏覽器與背景設定。Divi 5 更新紀錄記載 iOS WebKit 的 CSS 視差已有 JavaScript 回退,因此不能一概說手機會停用 fixed。先確認靜態背景與文字可讀,再逐裝置檢查動態效果。
Divi 視差效果會拖慢網站速度嗎?影響 SEO 嗎?
視差名稱本身不會被 Google 直接扣分;大圖、渲染與版面位移若實際造成 LCP、INP 或 CLS 變差,可能影響頁面體驗。Google 說明 Core Web Vitals 會被排名系統使用,但好分數不保證排名。先量測瓶頸,再調整圖片和動態效果。
一個網站適合用幾個視差效果?
沒有通用的三到四個區塊上限。先用一處有敘事目的的視差,確認手機可讀性、減少動態偏好和真實裝置效能,再決定是否增加。

操作步驟

  1. 在 Visual Builder 選擇要設視差的元素,於 Content → Background 設定背景圖片。
  2. 依容器與裝置裁切需求準備圖片並壓縮;沒有通用的 200KB 或 1920px 門檻,以實際清晰度與載入量測決定。
  3. 開啟 Use Parallax Effect,於 Parallax Method 比較 CSS 與 True Parallax。
  4. 在前端檢查桌機與手機版的構圖、文字對比與背景移動;必要時用響應式設定調整。
  5. 若加入 Scroll Effects,在支援的 Section、Row、Column 或 Module 的 Advanced 設定中配置,並測試減少動態偏好。
  6. 以實際頁面的 Core Web Vitals 和行動裝置操作流暢度驗證結果。

Whoops 巫普斯科技有限公司

專注技術 SEO、GEO/AEO 與 AI 搜尋實務。本站文章以可驗證資料、公開來源與實作觀察整理而成。

關於 Whoops編輯守則服務內容

想把這篇的方法用在自己的站上?

SEO 健檢、GEO/AEO 引用優化、網頁設計諮詢——把文章裡的方法落地到你的網站。