Whoops 知識庫
頁面編輯器
WordPress 頁面編輯器教學：Elementor、Divi、Bricks 與 Gutenberg 區塊編輯器的操作比較與實戰，用視覺化方式做出專業版面。
目前分類：頁面編輯器16 個分類
依發布日期由新到舊
第 1–12 篇，共 20 篇
Elementor Editor V4 原子編輯器實戰：用變數、類別與元件重構排版工作流
Elementor Editor V4（Atomic Editor）實戰教學：Variables、Classes、Components 三件套的建立與管理動線、Default Styles 全站基準、設計系統匯出匯入、CSS Grid 與 Variable Fonts，以及 2026 年 Essential、Advanced Solo 與 Elementor One 的方案選擇。
Claude Code 接 Elementor：頁面生成與維護 SOP
Claude Code 接 Elementor 的三條工作路線：生成範本 JSON 經 library import 匯入、既有頁面讀改寫回配三道護欄、REST 與 MCP 的內容管理邊界，加上與官方 AI Angie 的分工與五步維護 SOP，2026 年 9 月 10 日查證。
Elementor Cloud Templates 教學：跨站設計庫
Elementor Cloud Templates 教學：說明帳戶資格、頁面與容器儲存、跨站插入、樣式相依和版本管理，區分個人雲端庫、站點 Pro 授權與網站 Kit。
Elementor Pro 表單設計：聯絡、訂閱到會員註冊
Elementor Pro Form Widget 教學：欄位、步驟表單、訂閱串接、寄信、反垃圾與手機版。釐清原生能力及會員註冊需另接後端流程。
WordPress 頁面編輯器拆解：看懂資料、輸出與退場
WordPress 頁面編輯器怎麼挑？先認症狀，再談品牌。上線期限、交接卡關、速度焦慮三種求助，不該拿到同一份答案。看懂採購時看不見的三層機制：版面資料格式、訪客端輸出、停用後帶得走多少；算清交接工時與年限乘站數兩筆長期帳，用分組取代排名，以同一頁實排與停用演練收斂決定。
Elementor Pro 表單教學：零程式碼搞定聯絡表單
Elementor 表單教學：設定欄位、多步驟、Email 2、提交留存與 SMTP，核對方案限制、防垃圾整合、Webhook 及 GA4 追蹤。
Divi 主題架站全攻略：從零打造公司官網
Divi 主題架站完整教學：從網域、主機、SSL、WordPress 安裝到 Divi 視覺編輯器，零程式基礎也能打造專業公司官網，涵蓋響應式設計、SEO 與上線後維護一次搞懂。
Elementor Pro 頁首頁尾設計：打造高質感導航教學
Elementor 頁首頁尾教學：用 Theme Builder 建立範本與顯示條件，設定手機選單，排查頁首消失、重複輸出與主題相容性。
Bricks Builder 教學：WordPress 視覺化編輯器
Bricks Builder 教學：了解主題兼編輯器、元素樹、全域 class、變數、樣板和動態資料，並比較授權與從其他編輯器遷移的成本。
Elementor 新介面解析：改版重點與新舊版比較
辨識 Elementor 3.x 與 V4 編輯器差異，理解 Container、Atomic 元素與 Class Manager，並評估舊站搬遷、響應式與效能驗證。
WordPress 頁面編輯卡關？先看懂區塊的運作邏輯
WordPress 頁面編輯卡關，多半因為沒先看出改動落在哪一層。改區塊、共用元素、網址選單、搜尋呈現，四層各有對應修法：從清單檢視、同步版型、媒體庫引用到實機預覽逐層處理；換網址先設轉址、圖片先壓縮再上傳，以草稿、備份與修訂版本控制風險，把返工、斷鏈與授權爭議擋在上線之前。
Elementor 完整教學：從免費版到 Pro，用設計系統思維蓋網站
Elementor 教學涵蓋容器排版、全域樣式、Pro 方案差異、範本與動態內容，並說明效能、無障礙、多語設定，以及更新後的驗收流程。