7 款精選 Divi 佈局版型：快速打造專業網頁

Divi 目前提供 200 多個 Elements 與 2,000 多個 預製 Layouts（依 Elegant Themes 官方文件），選擇本身也可能成為負擔。很多人打開 Visual Builder，反而不知道第一列要從哪一格開始拉。

這篇要解決的正是這件事。版型不是裝飾品，它是轉換動線的捷徑。一個對的佈局版型，幫你把「訪客看到第一眼會做什麼、第二眼看哪裡、最終點哪個按鈕」這整條路徑先排好。你不必從零發明排版邏輯，僅需把現成骨架套進你的內容，再把視覺細節換成品牌色與字體。

核心重點：Divi 的版型不是「挑好看的那一個」，而是「挑符合你生意動線的那一個」。我會帶你拆解七款在實際案子裡反覆用到的佈局原型，每一款附上適用情境、設計要點、常見地雷與綁定的 Divi 模組；文末附一張產業對照表和六步驟上線工作流，看完就能動手。如果你連主題都還沒裝好，先走一遍Divi 主題完整指南再回來。

我想先點破一個常見的誤解：很多人把挑版型當成在比美，其實它更像在比「你有多了解自己的客人」。一個版型之所以有效，從來不是單純因為視覺漂亮，真正的關鍵在於它的區塊順序剛好對上你客人的決策路徑。客人來到你的網站，腦袋裡其實帶著一連串沒說出口的問題：我在這裡找得到我要的東西嗎、我憑什麼相信這家公司、我下一步到底該做什麼。好的版型會把這些答案一個一個按順序端到訪客眼前，不用他自己辛苦摸索，也不會讓他在第三個區塊就迷路離開。接下來我要做的，就是把七種最常見的決策路徑，對應成七款你可以直接拿來套用的版型原型。

為什麼「版型」是 Divi 網站成敗的隱形分水嶺

很多人把版型理解成「美醜問題」。這是小看了它。版型真正決定的有四件事，而且每一件都直接連到你的生意，不是連到設計獎。

第一件是動線。不同內容與裝置會形成不同的掃讀路徑，不能把 F 型或 Z 型當成所有頁面的固定公式。Hero 區應讓主訊息與主要行動清楚，不必在同一位置塞進過多欄位與連結；內容站則要讓標題、摘要與下一篇入口容易掃讀。是否提高轉換，仍應用頁面數據驗證。

第二件是一致性。同一個網站裡，聯絡頁、關於我們、服務介紹都用同一套區塊間距、同一組標題層級，讀者會直覺覺得「這是一家有在經營的公司」。各頁隨意排版、字體大小跳來跳去的網站，看起來像拼裝車，信任感立刻打折。版型就是那份大家都照著走的內部規範。

第三件是效能。版型決定頁面會放多少背景影片、視差特效與大圖，資源越多越需要效能預算。Core Web Vitals 是 Google 排名系統中的小幅訊號，不是決定名次的單一門檻；速度對真實訪客的等待與操作感受更直接（Google 於 2020 年 5 月的page experience 公告中說明）。

換句話說，挑版型不是在挑衣服，是在挑「這個網站要怎麼帶客人走」。衣服可以換，地基很難改。也因此，我寧願花一個下午把版型方向想清楚，也不願意一頭栽進 Visual Builder 從空白頁拉 grid，拉到一半才發現整個動線不對，全部打掉重來。

還有第四件容易被低估的事，是長期維護成本。一個網站不是上線那天就結束，它會持續新增頁面、更新內容、交給同事或外包接手。你今天挑的版型，其實正在決定一年後新增一個服務頁要花多少力氣。版型結構越有規律、可重用的區塊越多，後續每新增一頁的成本就越低；版型越是僅為首頁量身打造、缺乏能搬到其他頁的標準區塊，每加一頁就得從頭想一次排版，長期累積下來是非常可觀的隱形工時。在 Divi 專案裡，最好把重複出現的區塊（頁首、CTA 列、服務卡、頁尾）做成可重用的範本，日後任何人接手，都能直接套同一套骨架，不會每個人都各自發明一套、最終整個網站長得四不像。

套版型之前，先回答這三個問題

在我帶你拆解七款原型之前，先給你一個判斷框架。不管你最終選哪一款，都繞不開接下來這三個問題。任何一個答不清楚，你都會陷入「看起來很專業但不知道在賣什麼」的尷尬。

問題一：你的主要轉換動作是什麼？

轉換動作決定版型重心。如果你要的是「報名」「購買」「下載」這種單一明確動作，版型重心就該放在首屏的 Hero 與 CTA，整頁圍繞那一個按鈕服務。如果你要的是「多看幾篇文章」「留下名單再慢慢養」，版型就該往內容流、側欄推薦、相關文章區塊傾斜。轉換動作越單一，版型越聚焦；轉換動作越多元，版型越要分層。

問題二：你的內容密度落在哪一端？

內容密度指的是「一個頁面要塞多少資訊」。一頁式活動報名頁，內容密度極低，版型要的是大量留白與一個超大按鈕。電商分類頁或部落格首頁，內容密度極高，版型要的是格狀排列與清楚的層級。把高密度的內容塞進低密度的版型，會擠到變形；把低密度的活動頁放進雜誌式版型，則會顯得空蕩、沒說服力。

問題三：你的訪客在手機上會怎麼讀？

挑版型時很容易只看桌機畫面，但行動版才是許多網站的重要使用情境。除了桌面視覺，也要同步檢查手機上的區塊順序、CTA 點擊範圍與圖片裁切位置；實際流量占比應以網站分析資料為準，再依主要裝置安排測試優先序。

這三個問題答完，你心裡會有一個大致方向。接下來的七款原型，就是幫你把這個方向對應到具體的排版骨架。

七款 Divi 佈局版型原型拆解

這七款並非哪一個版型庫裡的固定編號，而是把實際案子裡反覆出現的排版邏輯，歸納出來的七種「原型」。每一款原型背後都對應一種生意情境，你在Divi 高質感版型庫或官方 Layout Packs 裡看到的大部分版型，都能對應到其中一種。理解原型，比記住特定版型重要，因為原型會讓你有能力判斷任何一個新看到的版型適不適合你。

原型一：Hero 全幅 CTA 式

適用情境：活動報名頁、單一產品發表、線上課程銷售頁、SaaS 註冊頁、知識型產品的著陸頁。若這一頁聚焦單一行動，例如報名或註冊，就可以評估這一款。

設計要點：首屏放一個全幅 Hero，背景是大圖或影片，前景壓一個超大的標題（你這一頁要解決的核心問題）、一行副標（你的具體承諾）、一個主按鈕。首屏以下用三到四個區塊堆疊：痛點、解法、社會證明、再次 CTA。整頁僅服務一條動線，不要放側欄、不要放次要導覽。

常見地雷：首屏塞太多字。Hero 區的標題超過兩行，副標超過三行，讀者的視線就會分散，CTA 的點擊率會明顯下滑。另一個地雷是背景影片太大、沒做手機版降級，行動載入直接卡住。

綁定 Divi 模組：Fullwidth Header、Button、Video Slider（背景影片用，記得配手機版靜態圖替代）。如果你做的是一頁式，可以從Divi 一頁式網頁設計的現成模板出發再改。

原型二：Z 字敘事流

適用情境：服務介紹頁、顧問或接案工作室的關於頁、諮詢服務的流程說明、B2B 解決方案頁。若你的賣點需要一步一步說清楚解法，就可以評估這一款。

設計要點：頁面由數個「圖文交替」的區塊組成，第一個區塊圖在左、文在右，下一個區塊反過來，文在左、圖在右，視線沿著 Z 字往下走。每一個區塊講一個步驟或一個賣點，左邊的圖用來強化右邊的文字。這個節奏很適合服務頁，因為它強迫你把服務拆成幾個清楚階段，避免寫成一大段沒人看完的長文。

常見地雷：圖與文的內容沒對應。左邊放一張漂亮但跟右邊文字無關的圖，讀者會覺得裝飾味太重。另一個地雷是交替節奏被打斷，中間突然插一個全寬區塊，Z 字動線就斷了。

綁定 Divi 模組：Text + Image（用兩欄 Row 交替方向）、Blurb（步驟摘要）、Divider。標題層級的設計可以參考Divi 標題設計技巧，讓每個區塊的小標更有節奏感。

原型三：卡片格狀 Grid

適用情境：作品集、攝影師網站、設計師 portfolio、團隊成員介紹、商品櫥窗、部落格文章列表。若內容包含多個同類型項目，需要並排比較，就可以評估這一款。

設計要點：用等寬的卡片格排列，每張卡片通常是一張圖配一段短文字與一個連結。桌面上三到四欄、平板兩欄、手機單欄，這是 grid 最標準的響應式行為。卡片之間的留白要一致，圖片比例要統一（建議全部用同一個長寬比，例如 4:3 或 16:9），視覺才不會歪。

常見地雷：圖片比例不一。上傳時沒先統一裁切，有些直有些橫，grid 排出來就會高低不齊，看起來像草稿。另一個地雷是卡片文字太長，把卡片撐成不同高度，破壞格狀的整齊感。

綁定 Divi 模組：Blog（文章列表）、Gallery（純圖）、Blurb（圖文卡）。圖片的互動層次可以再加Divi 圖片懸停特效，商品類則可搭配商品圖輪播外掛做橫向滑動。

原型四：雜誌式 Magazine

適用情境：內容站、多人協作的媒體型部落格、知識庫、產業觀察站。若網站主體是持續產出文章，並透過廣告或會員變現，就可以評估這一款。

設計要點：首頁用分類區塊堆疊，每一個分類帶出最新幾篇文章，搭配精選文章的大圖卡。側欄放熱門文章、訂閱表單、分類選單。這個版型的核心精神是「讓讀者一直有下一篇可以點」，所以文章之間的推薦連結、相關文章區塊是設計重心，不是事後補上的。

常見地雷：把雜誌式做成一般 grid。沒有「精選 vs 一般」的層級，所有文章卡片長得一樣，讀者不知道從哪篇看起。另一個地雷是側欄塞太多廣告，把內容擠到很小，反而降低閱讀體驗與廣告點擊。

綁定 Divi 模組：Divi 的姊妹主題 Extra 在這一塊原生支援最完整，做美妝、生活風格這類高顏值內容站可以參考Divi 加 Extra 主題的架站教學。純 Divi 則用 Blog 模組搭配多個分類 Row 組合。

原型五：分屏式 Split Screen

適用情境：雙產品對比、雙語系入口、Before/After 成果展示、兩種方案並列、兩個分支品牌共用一個首頁。若頁面需要同時呈現兩個對等選項讓讀者選擇，就可以評估這一款。

設計要點：首屏切成左右兩半，各 50%，每一半各自是一個完整的視覺單元，有獨立的背景、獨立的標題、獨立的 CTA。兩半之間用明確的視覺分隔（顏色對比或細線），讓讀者一眼看出「這裡有兩個選擇」。桌面上左右並排，手機上則自動堆疊成上下，順序通常要手動調整成「主要選項在上」。

常見地雷：兩邊比重失衡。一邊設計得很豐富、另一邊很空，分屏的對等感就沒了，變成主從關係，那就失去分屏的意義。另一個地雷是手機版的堆疊順序沒調，次要選項跑到上面，讀者先看到不重要的那一半。

綁定 Divi 模組：兩欄 Row（50/50）、各欄內放 Fullwidth Header 變體或 Text + Button。如果這個分屏是兩種定價方案，可以把Divi 價目表設計嵌進去。

原型六：時間軸 Timeline

適用情境：公司沿革、服務流程、專案進度、產品路線圖、案例研究的階段拆解。若內容本質是有先後順序的階段，就可以評估這一款。

設計要點：用一條垂直或水平的主軸串起數個節點，每個節點帶一個時間或步驟標籤、一段簡短說明、一張對應圖。垂直時間軸適合長頁面，水平時間軸適合首頁的「我們的流程」區塊。節點數量建議控制在四到七個之間，太少顯得單薄，太多會讓讀者失去耐心。

常見地雷：把時間軸當裝飾用。內容其實沒有明確的時間或順序，硬套時間軸僅會讓資訊變混亂。另一個地雷是節點之間的視覺連線斷掉，主軸沒有貫穿，看起來像幾個獨立區塊，失去流程該有的連貫感。

綁定 Divi 模組：Divi 原生沒有獨立的 Timeline 模組，常見做法是用 Blurb 配 Row 堆疊，再配自訂 CSS 畫連線；或裝第三方 Timeline 模組（這類屬於擴充模組，可以從必裝 Divi 外掛的方向去找適合的）。

原型七：全寬區塊式 Full-width Stripe

適用情境：品牌形象官網首頁、企業形象站、旗艦產品介紹頁。若網站重視品牌氛圍與敘事層次，就可以評估這一款。

設計要點：整頁由數個全寬的橫向區塊組成，每一個區塊有自己的背景色或背景圖，區塊之間靠顏色交替（例如白、淺灰、白、深色）創造層次感。這個版型的視覺力量來自「每一個區塊都很大、很滿、很完整」，精緻的小細節反而是次要。適合放品牌主視覺、核心服務、客戶 logo 牆、數字成果、聯絡資訊這類大區塊內容。

常見地雷：區塊數量太多。一頁塞七八個全寬區塊，讀者滾到手酸還沒到底，跳出率反而升高。建議控制在五個區塊以內，每一個都做到位。另一個地雷是背景圖沒做壓縮，五張全寬大圖等於五個載入瓶頸，記得搭配WordPress 圖片壓縮的觀念。

綁定 Divi 模組：Fullwidth Header、Fullwidth Code（嵌入自訂內容）、Fullwidth Post Title。這個版型很吃跨頁一致性，建議把做好的區塊存進Divi 的雲端版型庫，其他頁面直接取用，避免每頁重畫導致走樣。

產業對照表：你的站該套哪一款

七款原型看完，你可能還是會問：那我的站到底屬於哪一款？我整理了一張對照表，把常見的生意類型、主要轉換目標、建議原型對在一起。這張表是「優先建議」，不是唯一答案，很多網站其實是兩三款原型混搭，例如形象官網首頁用全寬區塊式，服務頁用 Z 字敘事流，作品集頁用卡片格狀。

你的站是	主要轉換目標	優先原型
形象官網 / 品牌站	留下印象、引導聯絡	全寬區塊式
服務 / 顧問 / 接案	預約、名單留下	Z 字敘事流
部落格 / 媒體 / 內容站	多讀幾篇、廣告或會員	雜誌式 Magazine
作品集 / 攝影 / 設計師	看作品、詢價	卡片格狀 Grid
活動 / 課程 / 知識型產品	報名、購買	Hero 全幅 CTA 式
雙語 / 雙產品 / 方案對比	二選一	分屏式 Split Screen
流程 / 沿革 / 路線圖頁	建立順序與信任	時間軸 Timeline

對照表的角色是「快速收斂」，幫你把範圍從七款縮到一兩款，再進一步用前面的三個問題去確認。如果你的站同時具有電商屬性，記得把 WooCommerce 的需求一起考慮進去，相關的主題選擇可以看WooCommerce 主題推薦，開店流程則走一遍WooCommerce 開店教學。

挑版型時五個最常踩的陷阱

看完原型與對照表，這裡再補一份審稿時最常抓到的五個版型陷阱。這些多半卡在判斷層面，跟技術能力的關係其實不大，可是一旦踩中，整個網站的轉換力道會被悄悄削弱，而且很難從後台數據直接看出元兇。

1. 把「好看」當成首要篩選條件。版型庫裡視覺最搶眼的那一個，常常跟你生意需要的動線對不上。一個低調但動線清楚的版型，轉換表現往往勝過一個華麗但讓人不知道點哪裡的版型。先篩動線，再看視覺，順序不要反過來。
2. 一個版型從頭用到尾。首頁、服務頁、文章頁硬套同一個版型，結果服務頁變得像首頁、文章頁擠滿了不相關的 Hero 區。不同頁面類型應對應不同原型，前面提過的混搭觀念在這裡要派上用場。
3. 僅看桌面預覽就定案。這是下一節手機版那段的主題，但在挑版型的當下最容易犯。很多版型在桌面預覽極美，到手機版整個崩潰，而你在挑選階段僅盯著桌面的話根本不會發現。挑的時候就同步切到手機視窗看一遍。
4. 忽略未來擴充性。現在僅有三個服務、六篇文章，挑了一個剛好僅能放這麼多內容的版型。半年後服務變成八個、文章累積到三十篇，版型塞不下，又要整個重挑。挑的時候就預留一點長大的空間，特別是卡片格狀與雜誌式這兩款。
5. 把所有特效一次開好開滿。視差、動畫、懸停特效、背景影片，能開的全部打開，網站看起來很熱鬧，實際上載入慢、手機卡、Core Web Vitals 滿江紅。特效是調味料，一頁最多一兩處點綴就夠，加太多會蓋掉內容本身的味道。

這五個陷阱的共同點是：它們在挑選的當下都覺得「沒什麼大不了」，等網站上線、開始累積流量與數據後，代價才會慢慢浮現。能在挑版型這一步就避開，後面的修正成本會低非常多。

手機版才是版型的真正考驗

這一節單獨拉出來講，因為手機版與跨頁一致性很容易被低估。若等桌面版完成才處理這兩關，通常會增加回頭修改，因此應從版型選擇階段就納入驗證。

手機版的問題通常出在三個地方。

第一個是區塊順序。桌面多欄排版到手機會依 DOM 順序堆疊。Divi 5 可用 Column 的 Display Order 依裝置調整；Divi 4 則需要 CSS。僅有在預設順序不符合內容語意時才重排，並同步檢查鍵盤與螢幕閱讀器順序。

第二個是字級與留白。桌面上的標題用 48px 看起來很大器，到手機上一樣 48px 會塞爆螢幕、一行僅能擠兩三個字。按鈕也是，桌面上的按鈕到手機上如果沒有放大觸控範圍，會很難點。Divi 的每個模組都可以針對手機、平板、桌面分別設定字級與間距，這個一定要分開調，不要偷懶用同一組。

第三個是圖片裁切。桌面全寬 Hero 圖到手機可能僅剩中間一塊，重點人物或產品若在邊緣就會被切掉。可為手機準備直式圖，或在 Divi 設定不同背景圖。排序實作可看Divi 手機版排序教學，其中同時說明 Divi 5 原生設定與舊版 CSS。

跨頁一致性是另一個隱形殺手。首頁的標題用 40px、服務頁用 36px、關於頁又用 44px，這種不一致在桌面上不明顯，到手機上會被放大檢視，讀者會感覺這個網站「東拼西湊」。我習慣在專案一開始就先把全域字體、標題層級、間距比例釘死，做法可以參考Divi 自訂字體與子主題的觀念，把這些設定寫進主題層級，避免每頁重設。子主題的選擇可以從Divi 子主題推薦裡挑一個接近你品牌的當底。

版型選錯會拖垮 Core Web Vitals

版型決定的第三件事是效能，而效能直接連到 Core Web Vitals。Core Web Vitals 是 Google 用來衡量網頁體驗的三個指標：LCP（最大內容繪製，多久畫出主要內容）、INP（互動到下次繪製，介面順不順）、CLS（累計版面位移，畫面會不會跳動）。這三個指標的好壞，跟你的版型選擇高度相關，相關的 SEO 影響可以看Core Web Vitals 與 SEO的完整說明。

速度值得認真看待，因為等待會增加訪客放棄操作的風險（見 web.dev 的研究）。搜尋方面，Core Web Vitals 是小幅訊號，不能把速度分數與排名變化直接畫上等號。

版型怎麼影響這三個指標？幾個直接的連結：

• LCP 殺手是首屏大圖與背景影片。全寬區塊式、Hero CTA 式這兩款原型最容易中招，因為它們的首屏視覺份量最重。解法是首屏圖片先壓到 200KB 以內、用現代格式（WebP/AVIF）、背景影片改用海報圖替代。
• CLS 殺手是沒設高度的圖片與動態載入的字體。卡片格狀 Grid 特別容易出問題，因為圖片載入完才把卡片撐開，畫面會跳動。解法是給每張圖一個固定的長寬比容器，讓它在圖片載入前就佔好位置。
• INP 殺手是過多的視差與動畫特效。視差滾動看起來很有質感，但它要不斷重新計算畫面位置，會吃掉主執行緒，低端手機上會卡頓。視差滾動特效可以加，但要有節制，建議一頁最多一兩處。

效能優化的完整工具箱，可以再搭配速度優化的完整做法與WordPress 快取外掛。版型是源頭，快取是下游，兩邊一起顧才有意義。

如果你的站要接電商：WooCommerce 帶來的版型變化

這裡補一個很多人漏掉的視角。一旦你的網站從純形象升級成電商，版型的考量會多一層。WooCommerce 是目前全球市佔最高的 WordPress 電商外掛（依 W3Techs 的統計，2026 年 6 月），它的商品頁、結帳頁、購物車頁都有一套自己的版型邏輯，不能完全用上面七款原型硬套。

具體來說，電商站通常會是「形象首頁（全寬區塊式）+ 商品分類頁（卡片格狀 Grid）+ 單一商品頁（左圖右文變體）+ 結帳頁（極簡單欄）」的組合。每一種頁面對應不同原型，版型選擇要按頁面類型分開想，不要企圖用同一個版型貫穿整個電商站。3C 類這種圖片密集、規格比較多的品類，可以參考3C 電商網站的設計取向；瑜珈、生活風格這類重氛圍的品類，則可以看Divi 瑜珈網站設計怎麼把品牌感放進版型裡。

版型從哪裡取：三條路的取捨

知道要用哪一款原型之後，緊接而來的問題是：這個版型要從哪裡取得。Divi 生態裡有三條主要路線，每一條的自由度、成本、風險都不一樣，選錯路線會讓你多花好幾天，甚至買了一堆用不上的版型。我先用一張表把三條路並排，再逐條說明。

來源	成本	自由度	最大風險
官方 Layout Packs（Divi 內建）	免費（已含在授權裡）	中	風格偏大眾，容易跟別人撞臉
第三方市集與子主題	付費	中高	品質參差，來源信譽要查
自己用 Visual Builder 從零畫	時間成本最高	最高	最慢，一致性地雷最多

官方 Layout Packs提供 250 多套主題包，可作為頁面骨架。官方來源通常較容易核對版本與支援資訊，但仍應在更新後測試自訂內容、第三方模組與行動版，不宜宣稱永遠不會壞。風格若偏安全牌，可先挑接近的原型再往品牌方向修改（見 官方的 Premade Layouts 文件）。

第三方市集與子主題提供更強烈的設計風格，通常是一個設計師或工作室把整套配色、字體、區塊樣式打包成一個子主題販售。優點是視覺完成度高，買來套上去就有品牌感，省下大量微調時間；缺點是品質參差，有些來源的程式碼寫得不夠乾淨，會拖慢網站，或跟新版的 Divi 產生衝突。挑的時候認長期更新紀錄、看評價數量與負評內容、確認是否標明相容 Divi 5。Divi Marketplace 資源總整理會是入門的好起點，先從信譽穩定的來源下手。

自己用 Visual Builder 從零畫是自由度最高的路，也是我最不建議新手走的一條。原因很實際：從零畫一個能看的形象首頁，熟手要兩三天，生手可能要花兩三週，而且畫完之後的跨頁一致性、行動版適配、效能控制，每一項都要自己扛下來。除非你本身有設計底子，或者你的版型需求真的特殊到沒有任何現成版型能當底，否則把時間花在內容與生意邏輯上，會比重複造輪子更值得。

本質上來說，三條路的本質是同一個取捨：你要用錢換時間，還是用時間換自由度。對九成的中小企業網站來說，官方 Layout Packs 當底、再搭配少量第三方子主題點綴，已經足夠做出專業級的成果，不必把自己逼到從零畫圖的窘境。

從版型到上線：六步驟工作流

觀念講完了，給你一份能照著做的步驟。這是一份在 Divi 專案裡行得通的流程，每一步都對應前面講過的某個判斷。

1. 釘死轉換動作：在動工之前，寫下這個網站（或這個頁面）唯一最重要的那個轉換動作。寫不出來，就先別碰版型，回去把生意邏輯想清楚。
2. 對照產業表選原型：用上面的產業對照表，把你主要的頁面類型對到一到兩款原型。形象首頁一個原型、服務頁一個原型、內容區一個原型，允許混搭。
3. 從版型庫挑底，不要從空白拉：在Divi Marketplace 資源或官方 Layout Packs 裡挑一個最接近你原型的版型當底，再改。從空白頁開始是最慢的路徑。
4. 換品牌視覺，不動結構：把字體、配色、logo 換成你的品牌資產，但盡量不要動區塊的順序與層級。結構是原型的價值所在，改壞了等於丟掉你選它的理由。
5. 手機版逐頁檢查：每一頁都切到手機視窗看一遍，檢查區塊順序、字級、按鈕觸控範圍、圖片裁切。這一步偷懶，前面的功夫會全廢。
6. 測一次 Core Web Vitals 再上線：用 PageSpeed Insights 或 Lighthouse 跑一次，確認 LCP、INP、CLS 都在綠區。有紅字就回頭檢查首屏大圖、視差特效、未壓縮圖片這幾個源頭。

如果你是第一次走這個流程，建議從一個頁面完整跑完六步，再把經驗複製到其他頁面。不要六個頁面同時開工，那樣僅會陷入每一頁都半成品的泥沼。Divi 5 的新介面在這個流程裡會幫你省不少操作時間，還沒升級的可以先看過Divi 5 介面解析再決定。

把版型當地基，不要當裝潢

回到最根本的那句話：版型是地基，不是裝潢。地基決定這個網站能乘載什麼樣的生意動線、能不能一致地擴張、會不會被效能拖累。裝潢隨時可以換，但地基一旦灌下去，要改就是打掉重練。

因此，我不建議你看到漂亮版型就套上去。先問自己三個問題（轉換動作是什麼、內容密度多少、手機怎麼讀），再對照七款原型選出最符合生意動線的那一款，最終用六步驟工作流把它落地。這套流程走完，你的網站會有一個能撐很久的骨架，而不是一個好看但三個月就想打掉重來的殼。

還有一個觀念想留給你：版型上線之後，真正的優化才剛開始。骨架定下來，不代表每一個區塊的細節都不能動。我通常會建議客戶在網站累積一兩個月的真實流量數據之後，回頭看幾個關鍵頁面的熱區與跳出點：首屏的標題有沒有被打動、CTA 按鈕的位置會不會被忽略、卡片格狀區塊的點擊是不是集中在某幾張。這些數據會告訴你，當初挑的版型哪裡猜對了、哪裡需要微調。版型是地基，但地基之上的動線，是可以一邊做生意一邊慢慢磨亮的。把它當成一個會跟著生意一起長大的活體，不必一次就做到完美，你反而會更捨得在挑版型這一步把基礎打扎實，因為你知道後面還有很多機會根據真實數據把它磨得更順。

如果你正在煩惱整個 Divi 網站該怎麼從零開始規劃，不僅是單一頁面的版型，Divi 架站全攻略會是下一步該看的。把整體架構想清楚，再回頭挑每一頁的版型，順序對了，後面的事會輕鬆很多。