Divi 作品集設計教學：3 種專業展示樣式輕鬆搞定

作品集網站有流量卻沒有詢問，常見原因不在作品不夠好，而是頁面沒有把「看作品」接到「理解服務」與「採取下一步」。很多人花大量時間整理案例與配色，上線後卻發現訪客看完就離開。

問題很少只出在作品本身不夠好。真正的關鍵，是作品集常被當成「櫥窗」，但它也應該扮演「業務員」的角色：把訪客從看見、產生興趣，一路引導到提出詢問。接下來會示範三種 Divi 作品集展示樣式；動手之前，先釐清這個頁面要協助成交哪一種服務。

如果你完全是 Divi 新手，建議先回頭看一篇 Divi 主題終極指南，把主題購買、安裝、基礎模組的概念補齊，再回來跟著這篇做會順很多。

作品集不是櫥窗，是業務員：先想清楚它要幫你成交什麼

很多人做作品集的第一個動作是「找一個漂亮的版型套上去」。這個直覺不能說錯，但它跳過了最關鍵的一步：這個頁面的商業任務是什麼。

換句話說，作品集在本質上是一個說服工具。潛在客戶點進來，心裡通常帶著三個沒說出口的問題：

• 「這個人做過的東西，跟我想做的像不像？」
• 「這個人的風格，我喜不喜歡？」
• 「這個人靠不靠譜，會不會把我的案子搞砸？」

你的版面配置，其實就是在決定「用什麼順序、用多少篇幅」回答這三個問題。滿版圖牆搶先回答風格；卡片懸停版同時回答風格與類型；分類篩選版則把「像不像」這件事交給使用者自己挑。三種樣式沒有絕對的優劣，僅有「符不符合你的業務模型」。

換句話說，選版面不是設計問題，是業務問題。先確認你接的案子類型、客戶的決策習慣，再回來決定用哪一種樣式，你才不會做出一個「自己看了很爽、客戶看了無感」的頁面。

動手前的三個決定：版面之前，先決定「誰在看、看什麼、看完做什麼」

規劃接案工作者與小型工作室的網站時，建議先確認三件事，再進 Divi 後台。這三件事確認完，後面的版型選擇幾乎會自動浮現。

決定一：誰是你的主要訪客。是還沒合作的潛在客戶？是已經報價、需要看參考案例的準客戶？還是同業或媒體？三種人看的節奏完全不同。潛在客戶需要快速建立信任，準客戶需要深入看細節，同業則會挑剔執行品質。

決定二：作品本身要被「看」還是被「讀」。攝影師的婚紗照、插畫家的視覺作品，本質是用看的，文字越少越好；品牌設計、網站設計、行銷專案，則需要一段說明把脈絡講清楚，否則外人僅會看到一張漂亮的圖，不知道背後解了什麼問題。

決定三：看完之後，你希望他做什麼。這一步最常被忽略。如果你想在頁尾引導到聯絡表單，整個版面的視線動線就要往那個方向收；如果你想引導到單一專案的深度頁面，每個作品卡片就必須是一個清楚的入口，不能僅是純展示。

這三個決定是後面所有設計選擇的根。如果你對「引導下一步」這件事還沒概念，可以先讀一篇 CTA 行動呼籲按鈕設計指南，把轉換的觀念補起來。

這裡多花半小時想清楚，後面會幫你省下好幾天的試錯。太多人跳過這一步，直接在 Divi 裡拉版型，結果做完才發現整個方向不對，又全部打掉重練。作品集要動的是結構，結構錯了，再漂亮的皮都救不回來。把這三個決定寫在紙上或筆記軟體裡，回頭在 Divi 後台每一個猶豫的瞬間，都拿這份筆記對照一下，你會發現大多數的取捨其實已經有答案了。

樣式一｜滿版格網作品牆：讓作品自己說話

這是最直覺、也最適合「視覺先行」創作者的樣式。整個區段用滿版寬度，把作品以等比例格網排列，幾乎不放文字。攝影師、插畫家、平面設計師、婚禮錄影團隊，都很適合用這種方式第一時間建立風格印象。

在 Divi 裡實作這個樣式，最順手的是用內建的 Fullwidth Portfolio 模組，或者把 Gallery 模組設成 Grid 模式。幾個我會特別調的設定：

• 欄數與間距：桌面端設 3 到 4 欄，手機端強制 1 到 2 欄。欄與欄之間留 1 到 2 個像素的細縫，視覺上會呈現為一整面連續的作品牆，讓作品之間產生群體感。
• 圖片比例統一：所有縮圖在進 Divi 之前先裁成同一個比例，例如 4:3 或 1:1。這件事不做，格網就會歪歪扭扭，再貴的主題也救不回來。
• hover 僅放最低限度資訊：滑鼠移上去時，浮出一個半透明遮罩，僅顯示作品標題，不要塞一堆分類與描述。資訊越少，視覺衝擊越大。

這個樣式的優點是衝擊力強、製作成本低，幾乎不用寫字。缺點也很明確：它僅回答了「風格我喜不喜歡」這一題，對「這個人會不會解我的問題」幾乎沒有著墨。所以如果你的服務需要解釋脈絡，例如品牌定位、網站企劃，這個樣式僅能當開場，後面要接其他版型補強。

選圖本身也是一門學問。滿版格網因為資訊量極低，每一張圖都會被放大檢視，所以放上去的必須是你最有把握的代表作。寧可僅放八張頂級作品，也不要為了填滿版面而塞進十二張平庸之作。格網的說服力來自平均水準，一張弱的作品就會把整面牆的質感拉下來。圖與圖之間的風格也要盡量一致，攝影色調、排版骨架、留白比例都接近，整面牆才會像同一個人的作品集，而不像東拼西湊的素材庫。

想讓格網再多一點設計感，可以搭配 Divi 圖片懸停特效，把 hover 的遮罩顏色、縮放、淡入動畫調成跟品牌一致。但請克制，動效是調味料，不是主菜，加太多反而會搶走作品本身的焦點。

樣式二｜卡片懸停資訊層：圖乾淨、hover 才浮出專案來龍去脈

第二種樣式解決的是「既要看、又要讀」的矛盾。版面預設狀態是一張張乾淨的縮圖，什麼文字都不顯示；當使用者把滑鼠移到某張圖上，一個深色半透明遮罩從下方滑入，浮出專案名稱、一句話摘要、類型標籤，以及一個「看詳情」的連結。

這個樣式特別適合網頁設計、品牌設計、室內設計、行銷企劃這類需要說故事的服務。客戶第一眼被視覺吸引，有興趣才進一步看細節，不會一進頁面就被密密麻麻的文字嚇走。

在 Divi 裡實作，用 Image 模組或 Blurb 模組放在多欄結構裡，然後切到模組設定面板右上角的 hover 分頁。Divi 的 hover 系統可以針對「滑鼠移入」這個狀態，單獨設定疊加層顏色、文字、變形、濾鏡。實作步驟大致是：

1. 用多欄 row 排出卡片陣列，每欄放一張 Image 模組。
2. 在 Image 模組的進階設定裡，加上一個 Overlay 元素，設成 hover 時顯示。
3. 把專案標題、類型、摘要寫進 overlay 的文字欄位，並把整個 overlay 設成點擊後跳到單一專案頁。
4. 調整 hover 動畫的時長，建議落在 0.2 到 0.35 秒之間，太快像閃光、太慢像卡頓。

這個樣式的關鍵在「overlay 的文字要精煉」。標題之外，我通常僅放兩個欄位：一個是專案類型（例如「品牌識別」「官網設計」），一個是一句話的問題描述（例如「為一間咖啡烘焙工作室重塑視覺系統」）。一句話能講清楚你解了什麼問題，比列十個得獎紀錄還有說服力。

如果你的卡片數量多、需要輪播呈現，可以再延伸看 Divi 輪播外掛推薦，把卡片做成可滑動的展示列。但請注意，輪播會增加手機版操作的複雜度，不是每種業務都適合。

樣式三｜分類篩選作品庫：一個頁面服務三種客戶

第三種樣式服務的是「什麼都做」的綜合型工作者或小型工作室。你可能同時接品牌設計、包裝設計、網站設計，每一種潛在客戶走進你的作品集，僅在乎跟他需求相關的那一塊。這時候把所有作品平鋪在一起，反而會讓客戶在跟自己無關的作品裡迷路。

分類篩選作品庫的邏輯是：頁面頂部放一排分類標籤（例如「全部 / 品牌識別 / 包裝設計 / 網站設計」），點下任何一個標籤，下方的作品格網就即時篩選出對應的項目。Divi 內建就有 Filterable Portfolio 模組可以直接做到這件事，不需要額外裝外掛。

設定上有幾個我會反覆叮嚀的重點：

• 分類粒度要剛好：3 到 6 個分類是甜蜜點。少於 3 個沒有篩選意義，多於 6 個標籤列會擠成兩行，視覺立刻崩壞。
• 每個分類至少 4 到 6 件作品：點進某個分類僅剩兩件作品，反而會讓人懷疑你在這個領域經驗不足。寧可把分類合併，也不要讓任何一個分類看起來空蕩蕩。
• 分類命名用客戶語言，不要用業內黑話：用「包裝設計」取代「結構包裝與刀模工程」，用「品牌識別」取代「VI 系統建置」。客戶看不懂的標籤，效果跟沒有標籤一樣。

如果你覺得內建的 Filterable Portfolio 模組的篩選邏輯太陽春，例如想做到多條件同時篩選、或者想把作品用自訂欄位排序，可以考慮搭配 Divi Filter 外掛。功能變強的同時，設定複雜度也會上升，建議真的有進階需求再上。

這個樣式的好處是資訊密度高、能同時服務不同需求的客戶；代價是維護成本最高，每新增一件作品都要記得指定分類，否則會掉出篩選結果之外。我會建議，除非你的業務真的跨多個領域，否則不要為了「看起來很專業」硬上分類篩選，前兩種樣式反而更聚焦。

三種樣式怎麼選：用一張表把對應關係講清楚

三種樣式講到這裡，你腦裡可能還是有點模糊。我直接用一張表把「業務類型、作品特性、適合樣式、關鍵模組」的對應關係整理出來，選擇會快很多。

你的業務類型	作品特性	建議樣式	Divi 關鍵模組
攝影、插畫、純視覺創作	用看不用讀、風格先行	樣式一｜滿版格網	Fullwidth Portfolio、Gallery（Grid）
品牌設計、網頁設計、室內設計	需要一句話講清專案脈絡	樣式二｜卡片懸停	Image + Overlay（hover）、Blurb
綜合型工作室、多領域接案	作品跨多個領域、客戶各取所需	樣式三｜分類篩選	Filterable Portfolio、Filter 外掛
服務單一產業、作品量少	件數少但深度高	樣式二，搭配深度專案頁	Image + Overlay + 單一專案頁

這張表是拿來「快速排除」用的，不是鐵律。例如你是攝影師但同時拍婚禮、商品、人文紀實三種類型，那樣式三其實更適合你。關鍵還是回到前面那三個決定：誰在看、看什麼、看完做什麼。

如果你還在比較不同的架站工具，想知道 Divi 在版面彈性上跟其他方案的差異，可以參考 WordPress 頁面編輯器比較，裡面有更完整的橫向評測。

字體、配色、留白：不管選哪種樣式都要守的視覺紀律

三種樣式講的是結構，但決定一個作品集看起來像不像出自同一個人的，是字體、配色與留白這三件更底層的事。不少接案工作者的作品集，單看每一件作品都不差，擺在一起卻像五個不同的人做的，問題幾乎都出在這三項沒有統一的紀律。

字體的紀律。整個作品集頁面最多用兩種字體：一個展示字體負責標題與作品名稱，一個正文字體負責說明文字。中文字體的選擇尤其關鍵，明體給人沉穩古典的氣質，黑體現代俐落，圓體親和但容易顯得不夠銳利。如果你不確定怎麼挑，可以先翻一遍 中文字體設計指南，裡面依黑體、明體、圓體、手寫體分類整理了適合網頁使用的字體清單。Divi 的字體載入設定，則可以對照 Divi 自訂字體教學，把字型檔案控制在最小範圍，才不會拖垮頁面速度。

配色的紀律。作品集頁面本身應該是一張中性畫布，讓作品成為視覺主角。背景用白或淺灰，文字用深灰而非純黑，純黑對比太強，看久了眼睛會疲勞。品牌色僅保留在一到兩個強調點，例如分類標籤、CTA 按鈕、hover 遮罩。我自己習慣把整個頁面的用色壓在三到四個以內，每多出一個顏色，都要問一句它為什麼出現在這裡。配色的系統化做法，可以延伸讀 網站配色指南 與 配色工具推薦。

留白的紀律。留白不是浪費空間，是給眼睛呼吸的節奏。作品格網之間、段落之間、區段之間，都要有層次分明的留白。一個常見的錯誤是把手機版的間距也設得跟桌面一樣緊湊，結果在小螢幕上看起來密不透風。Divi 的區段間距可以針對手機、平板、桌面分別設定，這三組數值我通常會讓手機端略大於桌面端，因為小螢幕更需要呼吸感。

這三項紀律不挑樣式，滿版格網、卡片懸停、分類篩選都適用。把它們守住，你的作品集才會從「一堆作品的集合」升級成「一個有品牌感的展示空間」。排版與視覺層次的進階觀念，排版設計技巧 裡有更系統的整理。

進階玩法：把三種樣式混搭在同一個頁面

三種樣式並不互斥。當你的作品數量夠多、業務也跨多個層次，把樣式組合使用，往往比單選一種更有層次感。最常見也最有效的組合，是用樣式一的滿版格網當開場、用樣式三的分類篩選當主體、用樣式二的卡片懸停處理分類篩選裡的每一張作品卡。

具體的版面安排是這樣的：頁面最上方放一個滿版格網區塊，精選 4 到 6 件最能代表你實力的作品，這個區塊的任務是在使用者滑下去之前，用三秒鐘建立「這個人很強」的第一印象。緊接著放分類篩選區塊，把完整作品庫按類型整理好，讓不同需求的客戶各取所需。分類篩選裡的每一張作品卡，再用卡片懸停的方式呈現，滑鼠移上去才浮出專案資訊，保持格網的乾淨。

這種組合需要你對 Divi 的區段（Section）與欄（Row）結構有一定掌握，建議先熟悉 Divi 主題架站全攻略 的基本邏輯再嘗試。組合的代價是維護成本上升，每一次新增作品都要思考它該進精選區還是分類區、資訊要怎麼下。但如果你把作品集當成長期資產在經營，這個前期投入是值得的。

另一個值得考慮的進階做法，是為不同的服務類型各開一個獨立的作品集頁面，再用主選單或分類連結串起來。例如一個品牌設計師，可以分別做「品牌識別作品集」「包裝設計作品集」「活動視覺作品集」三個頁面，每個頁面都用最適合該類型的樣式。這樣做的好處是每一頁都高度聚焦，對搜尋引擎也更友善，因為每一頁都鎖定一個明確的主題。相關的版面規劃觀念，可以參考 網頁版面設計指南。

作品集頁面的隱形殺手：圖片載入速度

作品集頁面有一個先天劣勢：圖多。一個像樣的作品集隨便就十幾二十張圖，如果每一張都是原始解析度直接上傳，這個頁面在手機上的載入時間會非常難看。

速度重要，主要是留人與操作問題，web.dev 的研究對此有直接說明。未壓縮的作品大圖會增加等待時間，也可能拖累 Core Web Vitals 的 LCP 指標；Google 也在 2018 年 1 月說明頁面速度用於行動搜尋排名，但它只是排名系統中的小幅訊號，不會單獨決定作品集能否被搜尋到。

實務上我會做三件事來把圖片效能顧好：

1. 匯出前就壓到底：用 Photoshop 或免費工具把圖片匯出成 WebP，並把品質壓到肉眼幾乎無感的程度。作品縮圖不需要 4K 解析度，長邊 1600 像素以內對絕大多數螢幕都夠用。
2. 啟用延遲載入：讓畫面外的圖片等到使用者捲動到位才載入。Divi 本身與多數快取外掛都支援這個功能，確認它有被打開。
3. 縮圖與大圖分開：格網裡僅載入縮圖，點進單一專案頁才顯示高解析度大圖。這個做法能讓作品列表頁保持輕量。

如果你不知道從哪個工具開始，可以看 WordPress 圖片優化指南，裡面把壓縮、格式、延遲載入一次講清楚。市面上圖片壓縮工具不少，選一個順手的長期用下去就好。

讓 Google 看懂你的圖：作品集的圖片 SEO

作品集還有一個常被看漏的面相：圖片本身能不能被搜尋引擎理解。Google 圖片搜尋對設計師、攝影師這類視覺創作者，是一個價值很高的流量入口。但前提是你要給圖片足夠的線索。

幾個動作成本很低、長期回報很高：

• 檔名要用有意義的描述：不要用 IMG_8342.webp 這種相機預設檔名，改成 brand-identity-coffee-studio.webp 這種描述性的檔名。
• 每張圖都要寫 alt 文字：alt 是搜尋引擎理解圖片內容的主要線索，也是視障使用者依靠的無障礙資訊。在 Divi 的 Image 模組裡，進階設定面板就有 alt 欄位，每一張圖都不要漏掉。
• 按需求評估結構化資料：CreativeWork 或 ImageObject 可描述作品與圖片，但 Google 沒有為這兩種一般標記提供保證的專屬 rich result，也不是排名捷徑。先把專案背景、圖片替代文字、標題與內部連結寫清楚，再評估其他系統是否真的會使用這些資料。

這部分的完整做法，可以延伸讀 圖片 SEO 優化指南。觀念建立之後，你會發現它跟整體 作品集範本 的選擇是同一件事的兩個切面：一個服務人眼，一個服務機器人。

手機上的作品集：排序邏輯要重排

根據 Statista 的統計（2026 年 4 月），全球網站流量已經有大約六成來自行動裝置，而且這個比例在視覺類內容上往往更高。這代表你的作品集被看到的第一個畫面，很可能是一支手機。

手機上的作品集，真正的考驗往往落在排序邏輯對不對，視覺美感反而是次要考量。桌面端用四欄排列時，使用者由左到右、由上到下，視線動線很自然；但手機端被壓成單欄之後，原本放在第四欄的作品會被擠到很下面，而它可能是你最想讓客戶先看到的那一件。

Divi 允許你針對手機、平板、桌面分別設定顯示順序與欄數。我的建議是：

• 手機端欄數強制 1 到 2 欄，不要讓桌面端的四欄在手機上硬擠成指甲蓋大小。
• 重新排定手機版的優先順序，把你最有代表性的 3 到 4 件作品排到最前面，不要讓使用者為了看到精華而滑半天。
• 把分類篩選按鈕設成手機端置頂 sticky，讓使用者在任何位置都能切換分類，這對樣式三特別重要。

具體的 CSS 調整方法，可以延伸看 Divi 手機版排序教學。手機版不是桌面版的縮小版，它是一個需要獨立思考的閱讀情境。

作品看到一半，下一步去哪：CTA 設計

作品集頁面最致命的問題，不是圖不夠漂亮，而是看完之後沒有下一步。使用者被你的作品打動，想要進一步聊合作，卻找不到明顯的入口，於是默默關掉分頁，你也就永遠失去這個機會。

我會建議在作品集頁面裡，至少埋三個層次的行動引導：

1. 單一作品卡片的「看詳情」：引導到該專案的深度頁面，讓有興趣的人往下挖。
2. 頁面中段的軟性引導：在作品列表之後，放一段簡短的自我介紹或服務說明，搭配一個次要按鈕，例如「看看我能怎麼幫你」。
3. 頁尾的主 CTA：一個視覺醒目的按鈕，直接連到聯絡表單或報價表單，文字要具體，例如用「開始聊聊你的專案」取代空泛的「了解更多」。

CTA 不是頁尾隨便丟一個按鈕就了事，它是整個頁面視線動線的終點。如果你把作品集當成一條「從看見到行動」的路徑來設計，每一個環節都會開始有目的。這個觀念跟 Landing Page 製作教學 裡的轉換漏斗邏輯是相通的：每一個版面元素，都要回答「我為什麼出現在這裡」。

如果你希望作品集不僅是被動展示，還能主動把詢問量拉上來，提升網站詢問量的方法 裡有更系統性的整理。

作品點進去之後：單一專案深度頁要放什麼

三種樣式解決的是列表頁怎麼展示，但真正說服客戶掏錢的，往往是使用者點進某一張作品卡片之後看到的單一專案深度頁。很多接案工作者花大量心力把列表頁做到完美，深度頁卻僅隨便放幾張圖了事，結果客戶的信任在點進去的那一刻瞬間歸零。這就跟開實體店面一樣，櫥窗再漂亮，走進店裡發現空蕩蕩，客人轉頭就走。

一個合格的單一專案深度頁，我會建議至少包含五個區塊：

• 專案封面與一句話定位：一張代表性大圖，搭配一句話說明這個專案是什麼、為誰做的。
• 背景與挑戰：客戶當時面對的問題是什麼、目標是什麼。這段讓潛在客戶對號入座，發現自己也有同樣的麻煩。
• 解法與過程：你怎麼拆解問題、用了什麼方法、關鍵決策是什麼。這段是說服力的核心，它證明你不僅是會做漂亮的東西，而是會思考的人。
• 成果展示：完成的作品圖、應用場景照片、上線後的實際使用畫面。如果可以，附上量化結果，前提是真實可查證的數字，不要憑空捏造。
• 下一步引導：頁面底部放一個回到作品列表的連結，以及一個「想聊聊類似專案」的 CTA。

這五個區塊的順序不是死的，但邏輯是固定的：先講這是什麼，再講為什麼要做，然後講怎麼做，最終展示做出了什麼。這跟 作品集網站設計 裡強調的「用專案說故事」是同一個道理。每一個專案頁都是一個微型案例研究，累積起來就是你最難被複製的競爭力。

如果你的作品數量還不多，寧可把每一個專案深度頁做到位，也不要為了看起來「很多」而放一堆僅有兩三張圖的空殼頁。深度比數量更打動人。潛在客戶看完一個完整的專案故事，心裡對你的信任度，會遠高於掃過十個僅有標題跟一張圖的條目。

常見陷阱：五個讓作品集「好看但沒效」的錯誤

這一段不是理論，而是接案網站上反覆出現、許多人都犯過的常見錯誤。列出來讓你少走冤枉路。

坑一：為了視覺一致性，把所有作品硬塞進同一個比例。有些作品天生是橫長的網站截圖，有些是直長的包裝設計，硬裁成同一個比例會把作品最精華的部分切掉。我的折衷做法是「同一個分類內統一比例，跨分類允許不同比例」，用分類篩選來切換，避免視覺打架。

坑二：分類用自己爽的命名，客戶看不懂。有些設計師會把作品分成「KV 系統」「SM 物料」「VI 延伸」，這些是業內簡稱，潛在客戶點進去一頭霧水。改成都市人聽得懂的「活動主視覺」「社群素材」「品牌識別」，溝通效果會明顯提升。命名是溝通，不是展現專業的場合。

坑三：作品僅有圖，沒有結果。純展示成品圖，等於僅告訴別人「我做過這個」，沒有告訴別人「這件事帶來了什麼結果」。如果在每一件作品底下補一句結果導向的描述，例如「協助這個品牌在三個月內完成視覺系統重整，並上線新官網」，說服力會翻倍。當然，前提是這句話是真的，不要為了好看而灌水。

坑四：忘了在手機上測。桌面端看起來完美，手機一打開，分類按鈕擠成兩行、圖片裁掉一半、CTA 被推到最底層根本看不到。這個坑太常見，建議每次完成一個頁面後，都拿起手機實際走一次完整動線，不要僅靠模擬器。

坑五：作品集頁面從不更新，最新一件還是兩年前。潛在客戶看到作品集最新更新時間停在兩年前，第一個直覺通常是「這個人還在接案嗎」。作品集不需要每週更新，但至少每季補一件近期作品、把過時的案例拿下來，讓任何一個走進來的人都感覺這是一個活著的頁面。一個持續更新的作品集，本身就是專業狀態的最佳證明。老實說，這件事比換一個更炫的版型有用太多了。

今天就能動手：五步把作品集頁面重做一次

講了這麼多，最終給你一個可以馬上開始的行動方案。不用一次做到完美，先跑完一輪再回頭優化。

1. 盤點現有作品：把過去一到兩年的作品列出來，標註類型與代表性。先把量少或品質不穩的拿掉，寧缺勿濫。一件能代表你實力的作品，勝過十件平庸的填充。
2. 決定主要樣式：對照前面的三種樣式表，挑一個最符合你業務類型的當主版型。如果猶豫，就從樣式二的卡片懸停開始，它的彈性最大、能同時兼顧視覺與脈絡。
3. 批次處理圖片：在進 Divi 之前，把所有縮圖統一裁切成相同比例、壓成 WebP、寫好 alt 文字。這一步做紮實，後面的版面幾乎不會出問題。
4. 在 Divi 裡搭出骨架：先放結構、放佔位圖，確認欄數、間距、手機版順序都合理，再回頭換上正式作品圖。先結構後細節，是避免反覆修改的最有效節奏。
5. 補上 CTA 並實測：把三層行動引導補齊，然後拿起手機走完一次從首圖到按下聯絡按鈕的完整流程。任何一個你猶豫「接下來要做什麼」的地方，就是還要修的地方。

這五步不需要任何額外外掛，Divi 內建模組就做得到。如果你想要更快的起跑點，Divi 佈局版型 與 Divi 高質感版型庫 裡有不少現成的作品集骨架可以直接套用，再依你的品牌色與字體微調，能省下大量從零排版的時間。

如果你剛升級到 Divi 5，操作介面跟舊版有一些差異，建議先看過 Divi 5 介面指南 再動手，才不會在新的設定面板裡找不到對應的選項。如果你需要擴充功能，例如更進階的篩選、動畫、輪播，必裝 Divi 外掛清單 是一個不錯的起點。搭配得宜的話，Divi Supreme 模塊 這類擴充也能補上內建模組照顧不到的展示細節。

作品集不是做一次就結束的東西。每完成一個新專案，回來更新這個頁面；每過半年，拿起手機重新走一次動線，看看哪裡卡。把它當成一個會長大的業務資產，而不是一個交差了事的展示頁。久了你會發現，真正為你帶來長期客戶的，往往就是這個被人反覆看見、而且每看一次都更可信的頁面。

如果你還在起步階段、連 WordPress 都還沒裝好，佈景主題安裝教學 與 WordPress 頁面編輯教學 會幫你把地基打好。想往內容面延伸，WordPress 文章發佈教學 則能讓你把作品背後的故事寫得更完整。當你的工具、版面、內容三條線都到位，作品集就會從一個靜態的展示頁，變成一台持續運轉的接案引擎。

現在，打開你的作品集頁面，用一個第一次認識你的客戶的眼睛，從頭到尾走一次。哪一個瞬間你猶豫了，那裡就是今天第一個要修的地方。