Elementor 範本匯入後有 38 個元素看不見

整理日期：2026-07-28

這次 Elementor 匯入範本後元素不顯示，原因是進場動畫的設定名稱寫錯。元素層級的動畫設定必須寫成 _animation 和 _animation_delay，前面要有一個底線；寫成沒有底線的 animation，Elementor 後端照樣會幫元素加上 elementor-invisible，前端卻讀不到動畫設定，元素就不會顯示。

判斷特徵很乾淨：內容都在 HTML 裡、Console 沒有任何錯誤，有加動畫的元素全消失、沒加動畫的全正常。

下面是這次的完整過程。

狀況

這次要新增一頁產品頁，視覺方向參考一個做得很細的國外品牌官網。條件有兩個：後續要能直接用 Elementor 修改，網站也不要再多放程式片段。

網站使用 Elementor、Elementor Pro 與 GeneratePress 子主題。做法是先把整頁結構整理成 Elementor 範本檔（JSON），再從後台匯入，後續可以在編輯器裡改字改圖。這一頁有 7 個區塊、50 個容器、69 個元素。

匯入完成後，第一件事是打開前台逐區檢查。主視覺整片黑，只有背景影片在動；下面三個重點區只剩標題和分隔線，數字、小標題與內文都沒有顯示。合計有 38 個元素受到影響。

先講清楚做得到哪裡

動手之前先把參考站的原始碼拆開看過。那個站不是 WordPress，是手刻的，載了一整組動畫函式庫、平滑捲動、前端框架、輪播和影片播放器。

評估後先說清楚，用 Elementor Pro 內建功能只能保留參考站的一部分視覺特徵。無法直接還原的包含圓弧軌道輪播、捲動鎖定、標題逐字浮現與進站開場動畫。

放掉那三成是有理由的。那個站的高級感，大概七成來自版面比例、留白、字體、照片品質和顏色克制，只有三成來自動畫。而做不到的那幾樣剛好都是會把捲動控制權搶走的效果，那類效果會拖慢閱讀，手機上更明顯，後續也不容易自行維護。

先拆成幾層看

畫面是空的，先確認是內容掉了，還是只是看不到。

開發者工具一看，38 個元素的內容都好好待在 HTML 裡，不是匯入時掉的。它們身上都多了一個 class 叫 elementor-invisible，那個 class 的作用就是把元素藏起來（visibility: hidden）。Console 一個錯誤都沒有。

再對一次哪些不見、哪些正常，特徵非常乾淨。有加進場動畫的元素全部消失，沒加動畫的全部正常。

到這裡方向就定了。問題不在內容，在動畫。

最後發現差在一個底線

Elementor 的進場動畫在元素層級的設定名稱是 _animation 和 _animation_delay，前面有一個底線。第一版 JSON 寫成了沒有底線的 animation。

壞掉的方式是最糟的一種組合，分三步：

1. Elementor 在後端決定「要不要先把這個元素藏起來」的時候，有底線和沒底線兩種寫法它都算數，所以照樣加上了 elementor-invisible。
2. 但沒有底線的 animation 在元素上根本沒有註冊成一個設定，不會被送到前端。
3. 前端的 JS 讀不到動畫設定，就永遠不會執行「把 elementor-invisible 拿掉」這一步。

先藏起來，然後沒有人負責放出來。

最值得記的是命名規則本身並不一致：

• _animation 有底線
• _animation_delay 有底線
• animation_duration 沒有底線
• 元素層級的捲動特效 motion_fx_* 也不用底線

沒有「元素一律加底線」這種規則可以套用，只能一個一個查證。

還有一條一起記：同一個元素不要同時開進場動畫和捲動特效。兩邊都在改同一個 CSS 屬性，會互相蓋掉，官方文件也寫明不要並用。

另一個坑，視差怎麼調都會抖

圖片視差滾起來一格一格跳，怎麼調參數都只是好一點點。

原因是架構，不是設定。Elementor 的捲動特效是監聽捲動事件，把捲動位置直接換算成位移量，中間沒有任何緩衝。滑鼠滾輪的捲動本來就是一格一格的，一次跳一百多像素，位移量就跟著一格一格跳。

參考站之所以絲滑，是因為它另外載了一個平滑捲動的函式庫（Lenis）。這種函式庫會把滾輪事件接下來，改成逐格補間的連續動畫，所有掛在捲動上的效果就一起變順。Elementor 內建沒有這一層。

同一頁用觸控板或手機滑，會順很多，因為這兩種輸入本身就是連續的。判斷的時候記得換裝置試一次，不然很容易誤判成參數沒調好。

三個處理方式，由務實到講究：

1. 直接關掉視差。產品頁本來就不太需要。
2. 想要順，先裝一個內建平滑捲動的外掛（Animation Addons for Elementor 免費版就內建 Lenis），把整體手感確認過，再把視差開回來。順序反過來的話，你會一直在調一個永遠對不了的參數。
3. 改用進場動畫。它跑一次就定住，跟捲動快慢無關。

其他這次踩到的坑

• Elementor 4.0.x 之後有一個還沒修好的匯入問題（官方 repo issue #35416）。在編輯器裡直接匯入 JSON 會失敗，要走後台的「範本 → 已儲存的範本 → 匯入範本」才會成功。3.35.9 兩條路徑都可以。
• 滿版設定匯不進來。頁面要不要滿版，存的是頁面自己的一個欄位（_wp_page_template），不屬於 Elementor 的範本資料，任何匯入的 JSON 都帶不進來，只能手動選一次。GeneratePress 預設會套主題的容器寬度，忘了設的話，滿版的深色區塊會變成中間一條、兩邊留白。
• 只有最外層的容器要滿版，裡面那層維持限寬（這次抓 820 到 1180 像素）。整頁都放到全寬的話，中文長行在寬螢幕上很難讀。
• 背景影片只認完整網址（https://www.youtube.com/watch?v=…），貼 youtu.be 開頭的短網址它不吃。
• 順手記版本：核心已經 4.2.0，Pro 還停在 3.33.2，差一個大版號。這種落差之後出狀況會第一個被懷疑，值得寫進維護紀錄。

驗證

• 前台重新整理，38 個元素都出現，捲到的時候照設定淡入。
• 在開發者工具搜尋 elementor-invisible，只剩下還沒捲到的元素帶著它，捲過去就會被移掉。捲過去還留著的，就是壞的。
• 對照著看那個元素的 data-settings 屬性，裡面要看得到動畫那組設定。class 有 elementor-invisible、data-settings 裡卻沒有動畫設定，就是這次這個病。

第三項是這類問題的通用檢查點，記它比記名稱有用。

這次留下來的三個判斷

Elementor 的 JSON 設定名稱要用實際匯出檔確認。 這次多數名稱都有對照真實匯出檔與 Elementor 元件原始碼，第一版只有動畫欄位沒有完成同樣的核對，因此寫錯。修正方式是先在編輯器裡手動設定一次再匯出，比對它實際使用的名稱。

「先藏起來再顯示」的效果風險比想像中高。 一旦失效，結果不是「沒有動畫」，是「內容完全看不到」，讀者和搜尋引擎都拿不到東西。所以後來在產生器裡加了自動檢查，名稱寫錯、或動畫跟捲動特效撞在同一個元素上，直接擋下不讓它產出。事前擋比事後除錯划算太多。動畫本來也不需要加好加滿。

抖動要先分清楚是設定問題還是架構限制。 這次是架構限制，參數再怎麼調都有限，正解是補上平滑捲動或乾脆不用。花半小時分辨清楚，可以省掉一整個下午的瞎調。

下次遇到先整理什麼

• 元素是「產生了但看不到」還是「根本沒產生」。看一次 HTML 就知道，兩條路完全不同。
• 消失的元素身上有沒有 elementor-invisible。
• 消失的是不是剛好都有加動畫，沒加動畫的是不是都正常。這個特徵幾乎可以直接定案。
• Console 有沒有錯誤。沒有錯誤反而是線索，代表不是壞掉，是根本沒被叫起來。
• Elementor 核心和 Pro 各是什麼版本、佈景主題是哪一套、頁面的版面設定選了哪一種。

這種頁面自己做得起來。只是要有心理準備，花時間的通常不是排版，是這種名字差一個底線的地方。要找人看的話，先把上面幾項整理好再問，會快很多。