Divi 版型套用機制解析：省下的時間都去了哪裡

用一個拼湊出來的場景示意。週五傍晚，客戶傳來一張截圖：你上週交出的首頁，跟某個他剛好逛到的網站幾乎同一個模子，欄位一樣、圖的位置一樣、連按鈕的圓角都一樣。他沒有動怒，只問了一句「這樣是正常的嗎」。對做網站的人來說，被看出套版的尷尬，往往比做不出東西更傷信任，因為客戶開始懷疑的對象，從版型變成了你本人。

回頭檢討，問題通常不出在選了哪個版型，而出在把版型當成買來的成品，以為匯入之後網站就完成了大半。匯入其實是整個流程裡最輕鬆的一步，點下去幾秒鐘就結束；真正吃工時的三件事都排在後面：把範例內容換成客戶的、讓全站的顏色與字體聽話、把桌機的版面在手機上重新排一次。省時間的幻覺就藏在這裡，時間沒有消失，只是搬到了你還沒看到的地方。

所以省時間的方法不是套得快，是挑得快、改得少。順序是：先用五個問題判斷這個案子適不適合用現成版型，適合的話，讓候選版型依序過四道篩選關卡，套用之後再用內容置換、變數治理與裝置重排把剩下的差距補完。版型是帶著設計判斷的原料，把它當可控的生產資產對待，套版才會真的省時間。

還不熟 Divi 操作的人，可以先翻過Divi 主題的完整入門介紹再回來；想先弄清楚 Divi 在工具版圖裡的位置，WordPress 佈景主題的比較與頁面編輯器的評比提供了對照組，看完再下手也不遲。

快速重點：版型不是答案，是還沒被檢驗的假設。匯入的本質是把結構複製進頁面，之後沒有人替你維護；先用五個問題判斷案子體質，再讓候選版型過四道篩選關卡，套用之後，置換深度、變數治理與行動順序決定它是資產還是負債。

開版型庫之前，先回答五個問題

版型庫解決的是「從空白頁開始」的問題，但不是每個案子都有這個問題。把五個問題依序問完，答案會自己指向三條路線之一：整包套用、取材拼裝、從自建做起。

• 上線時程與預算：時程緊、設計預算薄，版型提供的骨架能省下最多前置工；時間充裕，自建的選項就值得認真評估。
• 內容成熟度：文案、圖庫、Logo 是否已經到位。內容還在模糊階段就套版，版型會反過來逼你遷就它的欄位，改到後來兩邊都不是。
• 品牌識別強度：已有完整視覺規範的品牌，版型愈完整愈是干擾；還在摸索調性的新事業，版型反而是便宜的靈感來源。
• 內容更新頻率：頁面結構幾乎不動的公司官網，與每週都在調整版面的內容站，對版型的依賴程度完全不同。
• 交案後的維護人力：套版之後的修改責任全在自己身上，維護人力有沒有著落，直接決定該選多好照顧的結構。

五問裡最容易被輕忽的，是第一問與第五問的連動。時程緊的時候，人會本能地把套版當成救命稻草，但套版省下的是設計與搭建的時間，不是內容產出的時間；文案沒寫好、照片沒拍的案子，套版只會讓空虛更快被看見。同樣地，交案後的維護若只有業主本人，複雜的版型結構半年內就會變成沒人敢動的謎團，改一顆按鈕都要猜半天；這種案子一開始就該選結構單純、樣式集中的版型，把第五問的答案往前挪到第一問一起算。

五個答案整理完，會出現幾個明顯的訊號。時程緊又缺設計資源，走整包套用，把力氣留給置換；已經有基調、只缺零件，走取材拼裝，把版型庫當材料行。至於三種紅旗訊號，出現任何一種就該轉向自建或半自建：視覺識別已經完整的品牌，版型頂多當零件庫參考，硬套只是稀釋識別，品牌網站自架前的診斷流程對此有完整的取捨判斷；頁面結構高頻變動的媒體型站點，版型的固定骨架很快會變成枷鎖，用 Divi 搭配 Extra 經營內容站的例子走的就是另一套邏輯；成敗繫於文章產能的站，瓶頸在產製流程而非版面，把工時投在把產出流程交給 AI 協作的做法，報酬通常比換版型高。

官方版型庫收錄的 Layout Pack 與頁面版型持續在增減，實際的數量與內容以目前庫存和各版型頁的現況為準。這也是五問裡不建議背數字的原因：分類方式與篩選條件練熟了，每次進庫都派得上用場，任何數字過一季就可能過期。

版型庫裡的三種取用單位：包、頁、區塊

通過五問之後，下一個決定是取用單位。版型庫裡的東西以三種單位存在，決策單位與搬運單位常常不同，選錯層級比選錯樣式更傷。

Layout Pack（版型包）是同一主題下互相搭配的整組頁面設計，首頁、服務頁、聯絡頁的調性一致，資訊架構已經有人想過一輪。它回答的問題是「整站的頁面誰來規劃」：適合還不清楚自己需要哪些頁面的人，先從 Pack 的頁型清單回推自己的內容。各 Pack 的頁型與子頁數量依包而異，匯入仍是逐頁進行，沒有一次按鈕就生成整站這回事。

Page Layout（頁面版型）是單一頁面的完整設計，回答「這一頁的目的是什麼」。活動報名頁、產品登陸頁、單頁式的服務介紹，取這個單位就夠，不必動到整站結構，也不必為了一頁搬動整包。

Section（區塊）是最小的搬運單位，一段 Hero、一面證言牆、一組價目表，拆下來放進既有頁面，或存進 Divi Library 之後跨頁重用。它回答「既有網站缺哪個零件」，也是後面資產庫章節的基礎。

三種單位也對應三種逛庫的方式。找 Pack 的人從產業分類下手，先看這包提供了哪些頁型、每種頁型服務什麼目的，再判斷這組頁面跟自己的業務像不像；找單頁版型的人帶著頁面目的進場，報名頁就看表單與資訊節點的安排，登陸頁就看訴求與證據的排列順序；找區塊的人最自由，也最需要紀律，因為好看的零件誰都想要，拼起來卻未必成立。先決定單位再進庫，瀏覽的時間會短很多，也避免在根本不會採用的 Pack 裡流連忘返。

「看起來像別人家」的問題，多數源於只停在 Pack 層級：整包套用、換掉文字與圖就收工，沒有下探到區塊層做置換與重組。庫存的單位決定工作的單位，能自由拆到 Section 的人，才算真正擁有這座庫。

四道篩選關卡：把候選縮到三個以內

版型數量多到不可能用瀏覽的方式挑，有紀律的作法是讓候選版型依序過關，每過一關砍一批，把候選縮到三個以內再做細比。篩選的目標是壓低後續的修改成本，不是找到最漂亮的畫面。

第一關：產業與轉換目標

先問版型服務的產業與你要的訪客動作有沒有對上。產業決定調性：視覺導向的行業，版型對作品集的承載力是硬條件，作品圖的呈現方式比首頁的炫技重要，作品集頁面的規劃細節可以直接當檢查清單用；氛圍型的品牌，配色能否貼合調性是第一順位，瑜珈品牌的配色實例示範了同一套結構換掉色彩系統之後的差別。轉換目標則決定 CTA 的位置與數量，以報名為主的站與以詢問為主的站，需要的版面重點並不同。這一關也有反向的用法：逛別的產業分類找靈感可以，整包搬回來不行，餐飲的氛圍照搬到法律事務所，調性立刻失準；反過來說，通用型的服務業 Pack 經過配色與字體的替換，也常能服務看起來毫不相干的行業。產業是篩選的起點，不是牢籠。

第二關：內容結構對位

把你自己實際有的內容攤開：有幾種頁面類型、每頁的文字量大概多少、圖文比例如何，再對上版型的骨架。版型示範頁的文字量是被設計過的，你的內容塞進去會變高、變矮，或根本湊不滿一欄，這些都算結構不對位。文字量差一倍的版型，套了之後節奏會完全走樣，這一關就是在擋掉這種隱性成本。實際操作時，把每一種頁面類型列成清單，旁邊寫上現有的文字量與圖片數，再對著版型的示範頁逐頁打勾；有缺口的頁面類型，要嘛補內容，要嘛換候選，不要想著套了之後再補，結構性的缺口從來不會自己長出內容。

第三關：手機呈現

桌機預覽只是版型的一半。切到手機寬度，看欄位怎麼摺疊、選單怎麼收合、CTA 落在第一屏的哪個位置。多數網站的流量結構裡行動裝置占大宗，這不必猜，用自己的 Analytics 或 Search Console 查裝置分布就有答案；就算你的站剛好桌機訪客較多，手機版的可讀與可操作仍是基本盤。響應式設計的基本觀念是這一關的背景知識。檢查的動作很單純：同一個版型，桌機看一遍、縮到手機寬度再看一遍，兩邊的第一屏各是什麼、CTA 各落在哪裡，截圖並排放著比。這個動作五分鐘內做得完，卻能提前擋掉套用後最難修的問題，因為順序的毛病在桌機上永遠看不出來。

第四關：維護與客製成本

這一關在挑選階段就把套用之後的帳算完。開幾個代表性模組，看色彩與字體是區域值還是引用變數，引用變數改一處全站連動，區域值要逐一處理；動畫特效的密度也在此時減分，特效愈多，之後要砍的愈多、載入的負擔愈重。這一關背後的機制，後面變數連動與效能兩節會展開。抽查有個固定的做法：隨機點開三個不同類型的模組，看色彩與字體欄位顯示的是變數名稱還是固定值；顯示變數名稱，代表這個區塊會跟著全域設定連動，顯示固定值，代表之後要手動處理。三個裡有兩個是固定值，這個版型的整理成本就該在報價階段算進去，別等套了之後才發現。

四道關卡走完，手上通常只剩三個以內的候選，而且每一個都被同樣的標準問過一輪：產業調性對不對、內容結構裝不裝得進去、手機上還剩多少秩序、日後要花多少力氣照顧。到這個階段才開始比較美感，判斷的品質會比直接瀏覽整座版型庫好得多，因為不適合的選項已經先出局，剩下的差異都是你消化得動的那一種。

匯入是複製，不是安裝：置換的驗收點

很多人把套版想成「安裝」，像裝應用程式一樣，之後等更新。實際的機制是複製：匯入把版型的結構與樣式抄進你的頁面，從那一刻起，它跟版型庫再也沒有關係，官方之後改版、下架、修錯，都不會反映到你的頁面；反向也成立，你的頁面出了問題，沒有人會替你修。維護責任從按下匯入那一刻起全部落到自己身上，省下來的時間有一部分在這裡現形：變成了你要長期持有的維護責任。

把這個預期先建好，後續的每個決定都會變簡單。升級 Divi 之前，你會先想到頁面上那份複製來的結構不會自動跟上；看到官方庫新增了喜歡的版型，你會知道那是新的原料，不是既有頁面的更新檔。心理上把版型當成一次性的採購，而非持續的訂閱，出了狀況才不會把力氣花在等誰來修，而是直接排進自己的維護清單。

官方的版型使用說明對此寫得直接：Divi 5 的預製版型在 Visual Builder 裡選取後匯入頁面，Layout Pack 是同一主題下的多頁設計，其他頁面要逐一建立與套用，選了某個 Pack 不代表整站自動生成。操作介面在新版有明顯調整，細節差異可以對照Divi 5 介面的變化。

理解了複製的本質，上線前的驗收可以濃縮成三個檢查點：

• 匯入紀律：在空白頁建立，不要把版型匯進已有內容的頁面，新舊結構混在一起的整理成本比重做更高；確實要搬到既有頁面，先確認取代或保留的行為，並留一份備份。
• 置換順序：先文字、後圖片。文字量決定每個區塊的高度與節奏，文字落定了，才知道每張圖該準備什麼尺寸與比例；順序反過來，圖片尺寸會對不上後來的文字量。
• CTA 與連結的活體檢查：版型裡的按鈕預設連向範例錨點或空位，每顆按鈕都要實際點過，確認聯絡按鈕到表單、購買按鈕到結帳、社群圖示到真實帳號。

置換順序的背後是版面的物理機制：文字是會變動的內容，圖是固定尺寸的內容，先固定會變的，再準備不變的，尺寸才會準。同一個道理適用於每個區塊：先確定這一段要講什麼、講多少，再決定配圖的比重與裁切；文字還在改的時候就調圖，每改一次文字就多一次重工。這條紀律看似瑣碎，卻是多數套版套到半夜的故事裡，回頭看最早出錯的地方。

置換的品質還有一道殘酷的門檻：原圖直上，等於把質感打回原形。版型示範頁用的是挑過、修過的圖，你的圖沒有經過同樣的處理，版型再好也撐不起來；這件事與載入成本的關係，留到效能那一節一起算。

為什麼顏色總是改不乾淨？變數連動的機制

套版之後最常見的困擾：明明改了全域的顏色，某些區塊卻紋風不動。這跟程式錯誤無關，原因出在值存放的位置。

Divi 5 的全域變數是這樣運作的：元素必須實際引用變數或 Presets，變數更新時才會跟著連動；已經寫死在模組裡的區域值不會自動變成變數，匯入版型時帶進來的局部色碼有多少，只有抽查才知道。

順著這個機制，正確的路徑是先建品牌色與字型的變數，再把需要共用的元素接上變數；開著編輯器逐區手改，留給少數特例再動用。逐區硬改的後果可以預測：幾十個色碼各自為政，之後想全站換色，等於把每個區塊再點一遍。樣式要收斂，標題的階層樣式先壓到可管理的數量，標題樣式的收斂技巧有實際做法；字型則走系統性的替換，自訂字型的上傳與格式交代了從檔案準備到套用的完整路線。

整理已匯入的版型，順序可以照這樣走：先把品牌的主色、輔色、底色與字型建成變數，接著從出現頻率最高的元素開始接上，按鈕、標題、連結這些每頁都會出現的優先；一次整理一種元素，改完就在桌機與手機各重新載入一次頁面確認。不需要一天做完，但要維持同一種元素只引用同一個變數，中斷之後回來才接得上。整理範圍以實際會用到的頁面為限，用不到的區塊直接刪除，比留著整理更省事。

同樣的邏輯延伸到結構層：頁首、頁尾這類全站共用的段落，交給 Theme Builder 的共用模板管理，改一次、全站生效，省下每頁各放一份的重工。頁首要套現成的版型還是自己組，頁首要套版還是自製的判斷提供了決策流程。一致性的本質是「值存在哪裡」的問題，跟美感無關；值集中存放，改一次就夠，值四散，永遠改不完。

桌機騙了你：手機上的閱讀順序要重排

全球行動裝置流量長期過半，是背景常識；但你的站該怎麼應對，答案在自己的後台。Analytics 的裝置報表、Search Console 的成效資料，都會告訴你訪客實際用什麼裝置上門。無論分布如何，手機版要能讀、能按、能完成該做的動作，這是及格線，不是加分題。

桌機預覽最大的欺騙性在於欄位。多欄結構到了手機會摺疊成單欄，出現順序由欄位結構決定，而不是由你的行銷優先序決定。桌機上「圖左文右」的 Hero，到手機變成一張大圖蓋住訴求，訪客要先滑過圖，才看得到你在賣什麼、按得到按鈕；主資訊與 CTA 被推到後面的代價，每一個沒耐心的訪客都會替你證明。

要拿回排序的主導權，就得依裝置分別設定。Divi 5 在 Column 的 Display Order 提供依裝置調整排列的選項，Divi 4 或特殊舊結構則靠 CSS 補上，實際的操作步驟在Divi 手機版排序教學有完整的拆解；重排之後，把手機上的主訴求與每一顆 CTA 再點一遍，確認它們出現在訪客失去耐心之前。

手機版還有一個容易漏的細節：標題字級。多數版型的標題字級為大螢幕設計，到了窄螢幕可能一行只塞得下三四個字，標題斷成好幾行，視覺節奏就垮了。逐頁檢查窄螢幕上的字級並依裝置調整，這類細節的密度累積起來，就是專業與套版的差距。

檢查不需要安裝額外工具，瀏覽器的裝置模擬就夠用；真正要克服的是慣性，桌機上那個看起來「對了」的畫面，會讓人誤以為手機也一樣。交案前逐頁切換裝置預覽的習慣，比任何工具都有效。

把效能成本算在挑選階段，不是上線之後

套版會不會拖慢網站？會，但程度取決於你怎麼挑、怎麼置換，而不是版型這個東西本身。變慢的來源主要有三個：未壓縮的原圖直上、堆疊的動畫特效、沒有用到卻跟著輸出的樣式；對應的控制也是三層。

圖片層是最大宗。置換時的品質門檻，在這裡兌現成載入成本：先壓縮、用對格式，再上傳。圖片壓縮工具的挑選與WordPress 圖片優化把工具面整理好了，照著走即可，不需要每次都重新研究。格式與尺寸是這一層的兩個槓桿：照片類的素材，現代的壓縮格式能在相近畫質下把檔案壓得更小；尺寸則回到置換時的原則，先知道顯示的容器有多寬，再產出對應的檔案，別讓兩千像素寬的圖塞在六百像素的欄位裡平白占用頻寬。第一屏以外的圖片延後載入，初次載入的壓力又再輕一截。

特效層是紀律問題。視差滾動效果這類動畫，用在 Hero 一處是畫龍點睛，整頁都是就是負擔；特效密度在第四道關卡就該減分，這一節是實際執行砍除的地方。

系統層交給快取與版本治理。快取外掛處理重複請求，網站速度優化指南提供整站的檢查順序。判斷成效的方式不是看版本號，是用測速工具實測，把 Core Web Vitals 裡代表首屏載入體驗的 LCP 當第一個指標；web.dev 的速度說明建議從首屏最大內容元素的載入瓶頸找起，圖片的發現時間、傳輸與渲染延遲逐一排查。載入變慢對訪客去留的影響是真實的，但幅度依站而異，與素材和主機環境都有關係，別用固定秒數的推算嚇自己，用自己的數據驗證。

來源治理：內建庫、雲端、市集的分工

版型從哪裡來，決定了之後誰負責更新。四種來源的取捨軸心是同一個問題：更新責任在誰身上。

內建庫的責任在官方，相容性最有把握，代價是樣式偏大眾化，跟別人長得一樣的機率也高；它的正確用法是當零件來源，而不是當成品的終點。市集補的是官方庫沒有的風格，特殊產業、特定設計語言的作品由第三方作者上架單售，責任也落在作者身上，採購前先看更新頻率與評價，一個半年沒動過的品項，之後與新版 Divi 的相容性都是問號；Marketplace 資源的盤點與子主題的挑選思路提供了評估的切入點。子主題與版型包的差別也在此釐清：子主題連樣式與功能都配好，代價是客製彈性受限，而且繼承了原作者的維護風險，等於買半成品網站；版型包買的是起點，控制權在自己手上。

雲端的角色是跨站同步：同一個帳號存進去的版型與區塊，在不同網站都取得到。官方的雲端服務說明寫明每個會員可以先免費存放 50 個項目，需要更大容量再考慮付費方案；單站經營用本機的 Divi Library 就夠，多站並行時雲端的價值才會顯現，Divi Cloud 的完整介紹把費用與用法攤開來算過。

把四種來源放回五問的脈絡：時程緊的案子主要靠內建庫取材，特殊風格的需求才上市集；品牌識別強的案子，市集與自建的比重自然提高；多站經營者，雲端是讓資產跟著人走的基礎建設。來源之間沒有優劣，只有跟案子的條件合不合。

把重做的區塊變成資產：元件庫的複利

網站一路做到第三座之後，重複出現的區塊會自己浮出來：Hero、服務列、價目表、證言、聯絡區，每個案子的結構大同小異，差別只在配色與內容。每次都重新套版、重新改色，等於把複利往外推；把這些區塊用品牌慣用的設定存進 Divi Library 或雲端，接案時套骨架、換招牌區塊，工時就開始隨案數遞減。

招牌區塊的設計各有講究：價目表的欄位結構與呈現方式，價目表的設計要領有完整拆解；讓資產庫運轉的周邊工具，Divi 必裝外掛列出了常用的搭配。累積的紀律只有一條：結案收拾時，把還會再用到的區塊存回庫裡，別讓它跟著舊專案一起沉沒。

資產庫的單位建議從區塊層開始，不要急著存整頁。整頁的版型牽涉的變數太多，換一個案子幾乎都要重調；區塊層的組件，一段服務列、一面證言牆，換色換字就能上場，重用率最高。等區塊累積出數量，再考慮把常用組合存成頁面層級的骨架，那是水到渠成的事。

這套打法把三個階段閉成環：診斷決定要不要用現成版型，關卡決定用哪一個，資產庫決定下一次用多便宜。當九成區塊來自自己的庫，新站工時變得可以預測，報價也有了底氣。還在摸索整站流程的人，用 Divi 架站的完整流程可以對照著走；預算怎麼抓，WordPress 架站費用的抓法幫你先算清楚。

收束：動工前的三步檢查

把全文的判斷收斂成可執行的順序，進版型庫之前走完三步：

1. 內容盤點：文案、圖片、Logo、品牌色全部到位了沒。內容是版型的燃料，燃料沒到位就進庫，只會選出一個沒東西可填的華麗空殼。
2. 候選收斂：用四道篩選關卡把候選壓到三個以內，別憑外觀漫遊整座庫；這一步捨得砍，後面就省得改。
3. 置換與重排：先文字後圖片、變數先建後接、依裝置重排順序並逐顆檢查 CTA；這三件事做完，再談美感的微調。

回到開場那張截圖。客戶認不出是套版的網站，跟被一眼抓包的網站，差距從來不在版型好不好看，而在診斷、篩選與治理有沒有做完整：版型給的是八十分的起跑點，其餘二十分來自置換的扎實度、變數的紀律與手機上的順序。省下的時間沒有消失，它只是換了形式，變成你能控制的決策。把這些決策一件件做完，與別人相似這件事，就再也構不成威脅。