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

Divi 內建三種作品集模組，分別是 Portfolio（無分類篩選）、Filterable Portfolio（有分類篩選）、Fullwidth Portfolio（全寬輪播），三者的差別在「分類篩選」與「佈局方式」，跟好不好看無關。選對模組的關鍵在作品數量與分類複雜度：作品少選 Portfolio、分類多選 Filterable、要視覺衝擊選 Fullwidth，再搭配 Grid 格子版面與前台即時編輯，作品集才會真的能接案，而不只是把圖擺出來。Divi 由 Elegant Themes 開發，作品集模組屬於官方內建功能，不需額外安裝作品集外掛（Elegant Themes 官方文件）。

重點先看：Divi 三種作品集模組中，Filterable Portfolio 通用性最高、接案轉換表現最好；超過九成「圖片佔滿整頁、排版混亂」的問題，只要把模組 Layout 從 Fullwidth 切成 Grid 格子版面就能解決（操作實測）。

很多人接觸 Divi 作品集，第一個卡住的環節，其實是「這三個長得好像的模組到底差在哪、我該用哪一個」，按鈕的位置反而次要。這篇把選擇邏輯、建立步驟、上架流程到前台調校一次講清楚，順便回答那個所有人都在問的問題：為什麼我的作品圖片排得很亂、佔滿整個頁面。如果你還沒安裝 Divi，可以先看 Divi 主題終極完整教學 與 WordPress 佈景主題安裝教學 把環境準備好，再回來做作品集會順很多。

Divi 作品集模組是什麼？3 種展示方式先搞懂再動手

Divi 內建三種作品集模組，差別在「分類篩選」與「佈局方式」，選擇取決於你的作品數量與分類複雜度，與好不好看無關。把這個觀念先建立好，後面所有操作都不會走偏。這也是為什麼很多人照著點按鈕、卻做出一個連自己都不想看的作品集頁面，因為從第一步就選錯模組。先別急著動手，花兩分鐘把三種模組的角色分清楚，比學會十個按鈕都值得。

三種模組分別對應不同的展示情境。Portfolio 是最單純的平鋪排列，所有作品不分類全部攤開，適合作品數量少、主題單一的接案者；Filterable Portfolio 在頂部多了分類標籤，訪客可以點標籤快速切換篩選，適合橫跨網頁、攝影、插畫多種類型的設計師；Fullwidth Portfolio 則是全寬輪播、左右箭頭切換，視覺衝擊最強，適合攝影師或單一主題大量作品的首頁 Hero 區塊。把作品集頁面放進 用 Divi 從零架站全攻略 的整體規劃裡思考，會更清楚該用哪一種。

• Portfolio：所有作品平鋪、不分類，適合作品數量少（經驗法則約少於 15 件）、主題單一的接案者，頁面單純、載入最快。
• Filterable Portfolio：頂部分類標籤可切換篩選，適合橫跨多種類型（網頁／攝影／插畫）的設計師，通用性最高。
• Fullwidth Portfolio：全寬輪播、左右箭頭切換，視覺衝擊最強，適合攝影師或單一主題大量作品的首頁 Hero。

這裡有個最容易踩雷的地方：三者的新增路徑不一樣。前兩種 Portfolio 與 Filterable Portfolio 是在 Row 內新增 Module，而 Fullwidth Portfolio 則是在 Section 內選 Fullwidth 版型再加入（Elegant Themes 官方文件）。選錯不會毀掉內容，但會讓分類失靈、圖片比例混亂，所以先決定類型再上架作品，會比事後重做省下大量時間。如果你想搭配不同版型風格，可以參考 Divi 佈局版型設計模板 與 Divi 高質感版型庫套用。

判斷的時候，可以把這三種模組想成三種不同的「內容消化能力」。Portfolio 一次把所有作品攤在桌面上，作品少時清爽俐落，超過二十件就會開始擠壓視線、降低單件作品的辨識度。Filterable Portfolio 用分類標籤把作品收進抽屜，訪客要哪一類就拉開哪一個抽屜，即使作品上百件也不會崩潰。Fullwidth Portfolio 把所有作品串成一條移動的視線帶，每一張都被放到最大，犧牲的是「同時看到全貌」的能力。搞懂這三種消化方式的差異，後面無論接到什麼型態的作品，都能快速判斷該套哪一種。

從零開始：建立 Divi 作品集頁面的 4 個步驟

建立 Divi 作品集頁面其實只要 4 步：在後台新增頁面、啟用 Divi Builder、選 Build From Scratch、在 Section 或 Row 內加入 Portfolio 模組。整個流程下來，第一次操作大概十分鐘就能跑完，剩下來的時間都會花在前台調樣式。我自己第一次做的時候卡在第三步，因為三個選項長得很像，不確定要選哪一個，後來才發現其實只差在起點不同。

1. 後台「頁面 → 新增」輸入標題後，按 Use The Divi Builder 啟用編輯器。若沒看過這顆按鈕，多半是主題還沒裝好，先回到主題安裝流程把環境備齊。
2. 三選一的頁面建立方式中選 Build From Scratch（空白自建）最彈性；Choose A Premade Layout 則適合直接套版的新手，若要計算版型採購成本可對照 Divi 價目表定價展示。
3. 點藍色 Section 裡綠色的「+」選 Row 格式（單欄、二欄、三欄任選），再按黑色「+」新增 Module。想先了解整體編輯介面，可讀 Divi 5 全新介面與操作體驗。
4. 在模組清單搜尋 Portfolio 或 Filterable Portfolio，點擊進入設定，勾選要顯示的分類與作品數量後按打勾儲存，第一個作品集就誕生了。

Fullwidth Portfolio 的路徑跟前兩者不同，要特別留意：它是在 Section 設定內選 Fullwidth 版型，再加入 Fullwidth Portfolio 模組，一般 Row 裡找不到這個選項。這也是新手最常問「為什麼我找不到全寬作品集」的原因，模組其實沒有消失，關鍵是你站在錯的位置找。如果你打算做一頁式形象頁把作品集當 Hero，可以先看 Divi 一頁式網頁設計實戰。

說到這裡，順帶提醒一件事：Divi Builder 的頁面建立方式其實有三種，Build From Scratch 是空白自建、Choose A Premade Layout 是套用現成版型、Clone Existing Page 則是複製已存在的頁面。多數人選 Build From Scratch，因為掌控度最高；但如果你是完全的新手，Premade Layout 會讓你更快看到成果，學習動力也會跟著上來。把這些選擇想成是起跑點的差異，重點是先跑起來。需要更多版型靈感，可以逛 Divi Cloud 雲端版型同步 與 Divi 頁首套版設計。

第一次建立作品集時，建議先用一個臨時的測試頁面把流程跑過一遍，熟悉模組設定面板的位置與選項，再回到正式頁面動手。這個習慣可以避免你在正式頁面上反覆試誤、把前台搞亂。另個小建議是命名規則：作品集頁面、單篇 Project、分類名稱，三者的命名最好有邏輯關聯，例如「網頁設計作品集」頁面只顯示「網頁設計」這個 Project Category，往後維護時才不會搞混哪個分類對到哪個頁面。

Portfolio vs Filterable vs Fullwidth：用一張表選對版型

選哪一種作品集版型，看的不是美感偏好，而是你的作品分類數量與視覺需求：分類少選 Portfolio、分類多選 Filterable、要輪播衝擊選 Fullwidth。如果真的拿不定主意，預設從 Filterable Portfolio 起手，它的相容性最高，往後作品變多也不必重做。判斷標準其實很直白：模組的功能決定它能服務多複雜的內容結構，至於排得多漂亮，那是後續調樣式的事。

比較項目	Portfolio	Filterable Portfolio	Fullwidth Portfolio
分類篩選	無	有（頂部標籤切換）	無（輪播瀏覽）
佈局方式	平鋪 Grid 或 Fullwidth	平鋪 Grid 或 Fullwidth	全寬輪播
適合作品數（經驗法則）	少於 15 件	15 件以上、多分類	單一主題大量作品
適合族群	單一主題接案者	跨類型設計師、工作室	攝影師、首頁 Hero
新增路徑	Row 內 Module	Row 內 Module	Section Fullwidth 版型
載入效能	最快	中等	視圖片數而定
資訊密度	高（一次看全部）	高（可篩選）	低（一次一張）
接案轉換輔助	中等	高（標籤導引）	低（純視覺）

用這張表對照自己的情況，選擇會變得很直觀。Portfolio 適合單一主題、作品數量少的接案者，頁面單純、載入最快，缺點是作品一多就會糊成一團、找不到重點。Filterable Portfolio 是通用性最高的選擇，分類標籤讓訪客快速定位想看的作品類型，對接案轉換的幫助也最大，因為潛在客戶能直接被導到「跟自己需求相關」的作品。Fullwidth Portfolio 視覺最搶眼，但資訊密度低，適合放在首頁當 Hero 精選，不適合做主力作品列表頁。相關的版面思考，可以延伸到 網頁版面設計排版攻略 與 網頁排版設計範例參考。

一個常被問到的問題是：能不能兩種一起用？答案是可以，而且我相當推薦。接案型網站可以在主列表用 Filterable Portfolio 做完整作品索引，首頁改用 Fullwidth Portfolio 做精選輪播，兩者不衝突、各司其職。這樣既保有分類導覽的實用性，又能在首頁給訪客第一眼的視覺衝擊。如果你正在規劃整個形象網站的結構，品牌形象網站設計指南 與 網頁設計必備關鍵元素 會給你更多整體性的想法。

進階判斷：用二維矩陣把模組選擇視覺化

除了比對表格，你也可以用「作品數量」與「分類複雜度」兩個維度，把自己目前的狀態定位到下面的象限，選擇會更果斷。這個矩陣的好處是讓你預先看見未來：隨著作品累積，你多半會從左下角往右上角移動，提早選 Filterable Portfolio 等於替未來留好擴充空間。

• 象限一（作品少、分類單純）：選 Portfolio。十幾件作品、單一服務類型，平鋪排列最快最清爽，不用為了分類標籤而多一層操作。
• 象限二（作品少、分類多）：仍建議 Filterable Portfolio。作品雖少但跨類型，分類標籤能讓訪客依需求跳轉，提早建立分類結構。
• 象限三（作品多、分類單純）：選 Filterable Portfolio 或 Fullwidth。多但同類時，Fullwidth 輪播可強化視覺，Filterable 則方便逐一瀏覽。
• 象限四（作品多、分類多）：必選 Filterable Portfolio。作品數量大又跨類型，沒有分類篩選等於讓訪客在汪洋裡撈針。

定位的時候，記得「作品數量」要算的是你打算長期維護的數量，而不只是手上現有的。很多人用 Portfolio 起手，半年後作品累積到三十件才發現頁面塞爆，又得回頭改模組。提早用 Filterable Portfolio，等於把未來的重做成本一次省下來。

上架作品內容：projects 稿區與分類設定

Divi 作品集的內容位於後台獨立的 Projects（專案）稿區，而非一般「文章」；每件作品一篇，並用 Project Category 分類，而 Filterable Portfolio 頂部的篩選標籤，完全就是從 Project Categories 來的。這是新手最常出錯的地方，很多人在一般「文章」上架作品，結果作品集模組怎麼都抓不到內容，原因就出在這裡。把這個觀念記下來，後面少走很多冤枉路。

1. 後台左側選單找 Projects（中文介面可能顯示「專案」），點進去後按新增。這裡就是作品集的專屬稿區，跟一般文章是完全分開的（Elegant Themes 官方文件）。
2. 每篇 Project 等於一件作品：標題放作品名稱、內文放說明與背景、精選圖片設定為縮圖（這張圖會出現在作品集格子上）。
3. 在右側 Project Categories 勾選或新增分類，這些分類會變成 Filterable Portfolio 的篩選標籤，建議先規劃好分類結構再批量上架。
4. 回到作品集模組設定，可勾選只顯示特定分類、設定顯示數量上限（Posts Number），作品很多時用數量控制首屏載入。

分類規劃這件事，我建議在動手上架之前先花十分鐘想清楚。常見的做法是依「服務類型」分，例如網頁設計、品牌識別、攝影專案；或依「產業」分，例如餐飲、科技、時尚。分類一旦定下來、作品也照著歸類，Filterable Portfolio 的篩選才會真的發揮作用，不然標籤點下去還是一團混亂，等於白做。先規劃分類再上架，是這個環節最重要的原則。想知道文章分類的整體觀念，可以對照 WordPress 文章發佈與分類教學。

分類結構要留意一個常見錯誤：分類太細。有人把分類切到「網頁設計／餐飲網頁／科技網頁／品牌網頁」四層，結果每個分類只有兩三件作品，篩選標籤一排十幾個、點進去又空空蕩蕩，反而讓訪客無所適從。實用的判斷方式是：每個分類至少能穩定累積到五到八件作品，再考慮獨立成一個標籤；否則就用主分類統一收攏，靠單篇作品的內文去說明細節。分類數量建議控制在四到六個之間，過多會讓頂部標籤列擁擠、也增加訪客的決策負擔。

還有一個小細節容易忽略：精選圖片記得在 Project 裡設定，模組設定裡找不到圖片上傳欄位。模組只負責決定怎麼「顯示」，真正的圖片來源是每一篇 Project 的精選圖片。這也是為什麼有人抱怨「作品集格子是空的」，多半是精選圖片沒設好。圖片上傳前先做好 WordPress 圖片優化步驟，搭配 圖片壓縮工具實測推薦，能讓作品集載入順很多。進一步的圖片搜尋曝光，可再看 圖片 SEO 優化完整指南。

Project 單篇該寫什麼：把單篇作品做成迷你案例研究

很多接案者把 Project 單篇當成單純的圖片展示頁，只放一張圖與一行標題就交差。這相當可惜，因為點進單篇作品的訪客，通常已經是高度興趣的潛在客戶，這時候給的資訊越具體，轉換機率越高。一篇結構完整的 Project 單篇，建議包含以下幾個區塊，讓它從「圖片」升級成「迷你案例研究」。

• 專案背景：用兩三句話說明客戶是誰、做什麼、這次想解決什麼問題，讓訪客快速建立情境。
• 設計思路：說明你為什麼這樣配色、這樣排版、選這個字體，呈現你的判斷過程而非只是成果。
• 成果展示：多張大圖依流程排列，首圖用最吸睛的畫面，後續補上細節與不同裝置的呈現。
• 數據或回饋：若有可公開的成果指標（例如上線後流量、客戶滿意度回饋），附上佐證會大幅提升可信度。
• 下一步行動：文末放一句引導，例如「想做類似的作品？聊聊你的需求」，接上聯絡表單。

把單篇 Project 寫扎實，還有一個 SEO 上的副作用：每一篇 Project 都是獨立頁面、有自己的網址，等於在站內多出一條可被搜尋引擎收錄的內容。當潛在客戶搜尋「餐飲品牌網頁設計」這類長尾詞時，寫得詳細的 Project 單篇有機會直接被帶到搜尋結果裡，這對接案型網站的曝光很有幫助。寫的時候把專案關鍵字自然放進標題與內文即可，不必刻意堆砌。

前台即時編輯：Divi 最被低估的作品集調校利器

點 Build On The Front End（前台編輯）進入即時預覽模式，再點模組的齒輪圖示，就能調 Content、Design、Advanced 三大類設定，改一個、畫面跟著變一個，省掉傳統後台改完再預覽的往返。這個功能很多人用了好幾個月 Divi 都沒發現，一旦用上手就回不去了。對作品集這種高度依賴視覺呈現的頁面來說，前台即時編輯幾乎是必備工作流程。

三大設定各司其職。Content 負責內容層面，包括要顯示哪些分類、作品數量上限、是否顯示標題與分類文字；Design 負責外觀，圖片的圓角、陰影、邊框、文字的字體大小、粗細、顏色、間距都在這裡調；Advanced 則是進階，包含動畫、Hover 效果、自訂 CSS。多數時候你會在 Content 與 Design 之間來回，Advanced 偶爾用來做互動效果。想深入了解 Design 面向，可以讀 Divi 標題樣式設計技巧 與 排版字體與行距設定技巧。

• 圖片質感關鍵在 Design：加圓角、陰影、邊框，把所有作品的圖片外觀統一起來，整體質感立刻拉開一個檔次。
• 標題與分類文字的字體大小、粗細、顏色、間距，在 Design 一次調齊，避免每件作品規格不一。
• Advanced 的 Hover 效果讓滑鼠移過作品時出現變化，提升互動感與點擊意願。
• 第一次設定完建議先按一次儲存，之後透過前台編輯微調最有效率，不用反覆切換前後台。

前台編輯最大的價值，在於「邊調邊看」。你不用再經歷後台改一個參數、切到前台預覽、發現不對再切回去的循環，而是直接在看得見成果的狀態下微調，圓角再加一點、陰影再淡一點，全部即時反應。對講究視覺細節的作品集來說，試錯成本幾乎可以忽略。如果你想讓互動更豐富，可以參考 Divi 圖片懸停互動特效，甚至搭配 Divi 視差滾動立體效果 做出更有層次的視覺。

講了這麼多設計細節，老實說一句：很多人卡在「怎麼調好看」，但其實先把圖片比例與圓角統一，做出來的成品通常就比八成隨便排的作品集整齊。一致性帶來的專業感，遠比單一張圖片多酷來得實在。想找配色的靈感，可以看 網頁配色工具推薦 與 網站色彩計畫配色實戰；想處理字體則有 Divi 自訂字體上傳設定 與 中文字體設計與挑選。

常用 Design 設定速查：圓角、陰影、間距的合理範圍

前台編輯雖然自由，但自由也代表容易調過頭。下面列出作品集圖片常用的幾個 Design 設定與合理範圍，給你一個起點，再依品牌調性微調。這些數值來自業界常見的做法，不是硬性規定，目的是讓你第一次設定時不會在零到一百之間亂拉滑桿。

設定項目	常見範圍	建議起點	說明
圖片圓角	0–24px	8–12px	追求現代感取中段；走嚴肅專業風可設 0
圖片陰影	無／淺／中	淺	過重的陰影會讓縮圖顯得髒，淺陰影較安全
格子間距	8–40px	16–24px	間距太擠會壓迫、太鬆會失去整體感
標題字級	14–22px	16–18px	縮圖下的標題不宜過大，避免搶走圖片焦點
邊框	0–2px	0 或 1px 淺色	淺色細邊框可強化結構，重邊框易顯廉價

設定時有一個一致性的檢查方法：把視線從左上角縮圖往右下角掃一遍，如果每一格的圓角、陰影、間距看起來都一樣，那就過關；只要有一格特別突兀，多半是那一篇 Project 的精選圖片比例與其他不同，回頭統一比例即可。這個掃視法比逐格檢查更快，也更貼近訪客實際瀏覽時的感受。

圖片佔滿頁面排很亂？3 個最常見的 Divi 作品集 debug

九成「作品圖片佔滿整個頁面、排版混亂」的問題，都是佈局尺寸沒切：進模組 Design 的 Layout 把 Fullwidth 改成 Grid 格子版面，圖片立刻縮成整齊縮圖陣列（操作實測）。這大概是 Divi 作品集被問最多的問題，沒有之一。解法其實一句話就能講完，但因為它發生在「你以為設定都好了」的時候，特別讓人挫折。其餘兩個常見問題是圖片比例不統一、與作品數量未設上限，下面一個一個拆。

1. Layout 從 Fullwidth 改 Grid：進模組 Design 找到 Layout，把 Fullwidth 切成 Grid，圖片就會縮成等比例縮圖、自動排列成格子狀。
2. 上傳前先把所有作品圖統一比例（建議 4:3 或 16:9，業界慣例），並壓縮到 200KB 內，避免高低不齊。
3. 設數量上限：模組內 Posts Number 設一個上限（例如 12），控制首屏載入與效能，作品多時用分頁或分類處理。

第一個問題解掉之後，多半會遇到第二個：圖片雖然排整齊了，但每張高度不一樣，看起來還是亂。這時候問題出在圖片本身，模組已經盡責了。建議在後製階段就把所有作品縮圖裁切成同一比例，4:3 適合大多數設計稿與攝影作品，16:9 則適合橫式風景或影片截圖。比例統一之後，Grid 排出來的整齊度會讓你嚇一跳。影片相關的處理可搭配 響應式網頁設計 RWD 觀念。

第三個常見問題是數量沒設上限。作品累積到三四十件之後，全部一口氣載入會拖慢頁面，訪客還沒看到作品就先離開。設個 Posts Number 上限，例如首屏只秀 12 件，剩下的靠分類篩選或分頁處理，載入速度與使用體驗都會好很多。還有，每個區塊左側的 icon 都可以拖曳調整 Section 與 Row 的順序，不用刪掉重做。手機版則可以針對手機、平板分別設定顯示欄數，避免手機排成一直列，詳細做法可參考 Divi 手機版排序調整。

會特別強調手機版設定，是因為手機早已不是次要裝置。根據 Statista 統計，2026 年第一季行動裝置（不含平板）占了全球網站流量的 52.27%，超過一半的訪客是從手機進來看你的作品集。手機版欄數沒調好、縮圖排成一長串，這一半流量等於被浪費掉，這也是為什麼 Grid 版面在手機上要另外設顯示欄數，而非直接沿用桌機設定。[來源：Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉 https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 2026-04-28]

debug 進階：圖片還是排不整齊時的逐項排查

如果上面三個基本除錯都做完，作品集看起來還是哪裡怪，多半是更細層的設定出了問題。這時可以照著一份按發生頻率排序的排查清單，從最常見的項目開始檢查，通常檢查到前三項就能解決八成以上的殘留問題。

• 精選圖片遺漏：某篇 Project 沒設精選圖片，Grid 會出現空白格或預設佔位圖，逐篇檢查 Project 列表的縮圖欄位。
• Grid 欄數設定不一致：桌機設三欄、平板卻沿用三欄，會導致平板縮圖過小；手機建議設一欄或兩欄。
• 外層 Row 欄位干擾：把 Portfolio 模組放進多欄 Row 時，模組寬度被壓縮，縮圖會變形；作品集模組建議放在單欄全寬 Row 內。
• 分類標籤過多換行：分類超過六七個時，頂部標籤列會換行擠壓作品區，這時要回頭精簡分類結構。
• 快取未清除：前台怎麼改都沒變，往往是快取外掛或主機快取擋住，清除後再檢視。
• 佈景主題或外掛衝突：某些快取或資源最佳化外掛會延遲載入 Grid 的 JavaScript，造成暫時性錯位，重新整理後恢復即屬此類。

排查時建議用「逐項隔離」的方式：一次只改一個設定，改完重新整理看效果，確認是哪一項造成的。一次改太多設定，會讓你無法判斷究竟是哪一個動作修好了問題，下一次遇到相同狀況又得從頭試。這個習慣看來費時，長期反而省下最多時間。

讓作品集會接案：進階設計與搭配外掛

讓 Divi 作品集不只展示、還能帶來詢價，關鍵是在 Filterable Portfolio 上疊三層：用統一的圖片比例與圓角陰影做出品牌一致性、用 Hover 動畫引導點擊、在作品集頁尾接上聯絡表單或 CTA 按鈕，把看作品的流量引導到詢價。作品集的終點其實是詢問，不是瀏覽。要輪播或更進階的多條件篩選，再視需求裝 Divi 專屬外掛。

• 品牌一致性：全站作品集圖片用同一比例、同一圓角，視覺會像設計師等級而非套版感。
• 互動引導靠 Hover 效果，露出「查看專案」按鈕，提升點擊進入單篇作品的機率。
• 轉換閉環：作品集頁尾接聯絡表單或 CTA 按鈕，把欣賞作品的流量導向詢價。
• 內建 Fullwidth Portfolio 不夠用時，可改用 Divi 輪播外掛做更靈活的作品輪播。
• 分類複雜、需要多條件篩選（例如依產業加類型）時，再搭配 Divi Filter 外掛。

轉換閉環這層，是最多人忽略、卻最影響接案成敗的一環。作品集做得再漂亮，如果看完之後沒有任何下一步可以踩，訪客只會默默離開。在作品集下方放一個清楚的 CTA，例如「聊聊你的專案」「預約諮詢」，再接上聯絡表單，這條路才走得通。CTA 的設計可參考 CTA 行動呼籲按鈕設計，表單與名單經營則有 Divi Bloom 電子報訂閱表單。想把流量轉換做得更完整，再看 Landing Page 銷售頁製作 與 提升網站詢問轉換的方法。

轉換能不能成立，還有一個前提是頁面要載得夠快。前面提到的 Posts Number 上限與圖片壓縮，不只是為了載入順，更直接影響詢價轉換。web.dev 收錄的案例顯示，Vodafone 把 LCP（最大內容繪製）改善 31% 後，銷售提升了 8%；Rakuten 24 投入 Core Web Vitals 優化後，每位訪客營收提升 53.37%、轉換率提升 33.13%。換到作品集的情境，縮圖載太慢、訪客根本還沒看到作品就跳出，CTA 再清楚也沒有機會被點到，這也是為什麼效能優化應該被當成接案轉換的一環，而非純技術問題。[來源：web.dev (Google)〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]

效能優化清單：讓作品集頁面跑得快的具體做法

把上面的速度觀念落實到作品集頁面，可以照下面的清單逐項處理。這些做法彼此獨立，做越多載入越快，但效益有邊際遞減，建議從影響最大的圖片壓縮與數量控制先做。Google 早自 2018 年起就將行動頁面載入速度列為搜尋排名因素之一，並在 2020 年進一步把 Core Web Vitals 整合進頁面體驗排名訊號，因此效能優化同時具備 SEO 與轉換雙重價值。[來源：Google Search Central Blog〈Using page speed in mobile search〉 https://developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search 2018-01-17]

• 控制首屏作品數：Posts Number 設 9 到 12 件，其餘用分類篩選或分頁承載，避免一次載入幾十張圖。
• 壓縮精選圖片：每張縮圖壓在 200KB 以內，搭配 WebP 等現代格式，單張縮圖可再縮小約三成檔案。
• 統一圖片尺寸：上傳前就裁切成縮圖顯示尺寸（例如 600×450），讓瀏覽器不必再縮放大圖。
• 啟用快取：使用快取外掛產生靜態 HTML，重複造訪的訪客幾乎是瞬間載入。
• 延遲載入：對不在首屏的圖片啟用 lazy load，瀏覽器只在使用者滾動到時才抓圖。
• 精簡外掛：移除沒在用的作品集相關外掛，每多一個外掛都可能增加前端資源請求。

檢視成效時，可以搭配瀏覽器內建的開發者工具或 PageSpeed Insights，觀察 LCP、CLS、INP 三個核心指標。作品集頁面最常拉低分數的是 LCP（通常是第一張大圖載太慢）與 CLS（縮圖載入後把下方內容推下去），把圖片壓縮與固定尺寸做好，這兩個指標多半就能明顯改善。把效能當成定期健檢項目，每上架一批新作品就回頭量一次，能讓作品集長期維持在穩定的載入水準。

進階需求方面，如果內建 Fullwidth Portfolio 的輪播不夠靈活，可以考慮 Divi 作品圖片輪播外掛 做出更細的控制；分類複雜、想做多條件篩選時，則有 Divi 分類篩選外掛教學。其他常被拿來搭配的還有 Divi Monarch 社群分享按鈕、Divi Supreme 模組擴充評價，以及從 Divi Marketplace 免費資源 與 必裝的 Divi 外掛清單 找適合的工具。整體外掛挑選邏輯，可以對照 Divi 子主題模板推薦。

退一步看，作品集能不能帶來案子，跟用什麼模組的關係其實沒那麼大，跟你有沒有用「接案」的思維去設計它關係才大。同樣是 Filterable Portfolio，有人做完只是個展示牆，有人卻能把它做出穩定的詢價流量，差別就在那三層有沒有疊上去。想看別人怎麼把形象網站做起來，可以參考 用 Divi 打造品牌形象網站；想找更多作品集靈感與平台選擇，則有 作品集網站設計完整指南、作品集範本模板大全、作品集網站平台比較推薦。

Divi 作品集與其他方案的選擇

有些人會在「用 Divi 作品集」與「改用 Elementor 作品集」之間猶豫，兩者都能做出專業的作品集頁面，差別在於你已經投資了哪個生態系。已經用 Divi 架站的人，內建模組就夠用，沒有必要為了作品集再多裝一個頁面編輯器；但如果你本來就在比較兩者，可以看 Elementor Pro 作品集展示教學 與 WordPress 頁面編輯器比較。主題挑選方面則有 WordPress 佈景主題推薦清單，Astra 使用者可參考 Astra WP Portfolio 作品集教學。

選擇生態系時，建議把「整站維護成本」一起算進來，而不單看作品集功能強弱。Divi 的優勢在於作品集、版型、頁首頁尾、表單都在同一個主題生態裡，設定邏輯一致，長期維護負擔低；跨好幾個外掛拼湊出來的作品集，雖然單點功能可能更強，但每次更新、除錯都要在多個工具之間協調。對多數接案者與小型工作室來說，把作品集放在已經熟悉的生態系裡，是更省心的長期選擇。

不管最後選哪個方案，作品集成功的核心條件都一樣：選對展示模式、統一圖片比例、設好分類篩選、鋪好轉換閉環。工具只是手段，差別多半來自你有沒有用接案者的角度去思考這個頁面要服務誰。把這幾件事做扎實，作品集就不只是放作品的地方，而會穩定帶來詢問。想從更廣的角度看網頁設計這條路，網頁設計自學路線圖 與 最新網頁設計趨勢解析 會是不錯的延伸閱讀；處理頁面編輯細節則有 WordPress 頁面編輯操作，找素材可以逛 商用免費圖庫素材網站。

什麼情況不該用 Divi 內建作品集模組

內建模組涵蓋大多數接案型網站的需求，但少數情境下，硬套內建模組反而會綁手綁腳。誠實列出這些情境，讓你在投入大量時間之前先判斷是否該換工具，比一味把內建模組推薦給所有人更負責。

• 需要複雜的多條件篩選：同時依產業、服務類型、年份、預算區間篩選時，內建模組只能做單一分類，這時才值得考慮 Divi Filter 外掛。
• 大量作品需要進階排序：想依「最新／熱門／精選」切換排序，或要搜尋框、分頁控制，內建模組的功能有限。
• 作品需要電商屬性：若作品本身是可購買的商品（例如攝影作品賣授權），用 WooCommerce 搭配商品目錄會比 Project 稿區更合適。
• 高度客製的單篇版型：每件作品的呈現方式差異極大、需要完全不同的版面結構時，Divi 的 Theme Builder 與動態內容會比固定模組更有彈性。

判斷的原則是：只要內建模組能滿足你七成以上的需求，就先用它，把剩下三成用分類、單篇內容、CTA 補足。為了少數進階需求而全面換工具，往往會把整個維護流程複雜化，得不償失。真正需要換工具的訊號，是當你發現自己為了繞過內建模組的限制，花了比實際產出還多的時間在「喬」設定上。

上架前的最後檢查：作品集頁面上線 checklist

把作品集頁面從「做得差不多了」推到「可以對外開放」，中間還有一段品質檢查的距離。一份完整上架 checklist 會整理出最容易漏掉的檢查點，照著走一遍，能避免作品集上線後被訪客發現明顯瑕疵。建議在正式發布前、以及每次新增一批作品後，都跑一次。

• 每一篇 Project 都已設定精選圖片，且比例統一為 4:3 或 16:9。
• Filterable Portfolio 的分類標籤不超過六七個，每個分類至少有五件以上作品。
• 模組 Layout 已切換為 Grid，桌機、平板、手機的欄數分別設定過。
• Posts Number 已設上限，首屏作品數控制在九到十二件。
• 作品集頁尾已放置 CTA 按鈕或聯絡表單，且連結有效。
• 單篇 Project 點進去後，內文、圖片、下一步引導都完整。
• 頁面已在手機實機上瀏覽過一次，縮圖排列與字級正常。
• 已清除快取並重新檢視，確認前台顯示與設定一致。

這份 checklist 不必逐條背誦，把它存在書籤或專案筆記裡，每次上架前對照一次即可。作品集頁面的品質往往不是靠單次的大改版，而是靠每一次新增作品時的小幅校正累積出來的。把檢查變成固定流程，作品集會隨著時間越來越完整，而不是越來越亂。想了解整站發布流程，可以對照 用 Divi 從零架站全攻略 的收尾章節。

說到底，作品集頁面要做得好，比點對多少按鈕更看你有沒有做對決定。先把三種模組的角色分清楚，選一個適合自己的，再把版面、圖片、分類、CTA 一層一層疊上去，順序對了，接下來就是上架與微調的功夫。

常見問題

Divi 作品集有哪幾種展示方式？

Divi 內建三種：Portfolio（無分類篩選、平鋪排列）、Filterable Portfolio（有分類標籤可切換）、Fullwidth Portfolio（全寬輪播、箭頭切換）。差別在分類篩選與佈局方式，選擇依作品數量與分類複雜度決定。

Filterable Portfolio 跟 Portfolio 差在哪？

差在「有沒有分類篩選」。Portfolio 把所有作品不分類全部平鋪；Filterable Portfolio 在頂部多一排分類標籤，訪客點標籤就能只看該分類的作品，分類多時實用很多。

Divi 作品集為什麼圖片排得很亂、佔滿頁面？

通常是模組的 Layout 還停在預設的 Fullwidth。進 Design 把 Layout 改成 Grid 格子版面，圖片就會縮成等比例縮圖陣列；若圖片高低不齊，則是上傳前沒統一比例。

Fullwidth Portfolio 適合什麼情境使用？

適合需要強烈視覺衝擊的位置，例如攝影師的首頁 Hero、或單一主題大量作品的精選輪播。不建議當主力作品列表頁，因為資訊密度低、不易讓訪客快速瀏覽全部作品。

Divi 作品集的新作品要去哪裡新增？

作品請改放到後台獨立的 Projects（專案）稿區，與一般「文章」是分開的。每篇 Project 等於一件作品，標題是作品名、內文是說明、精選圖片是縮圖；Project Categories 則決定 Filterable Portfolio 的篩選標籤。

如何在 Divi 前台即時編輯作品集樣式？

按 Build On The Front End 進入前台編輯模式，點模組齒輪圖示，就能在 Content、Design、Advanced 三大類設定裡調整，改一個參數畫面跟著變一個，不用反覆切換預覽。

Divi 作品集可以設定顯示數量上限嗎？

可以。在模組設定的 Content 找到 Posts Number，輸入要顯示的件數（例如 12），就能控制首屏載入數量，作品多時搭配分類或分頁處理。

Divi 作品集要裝額外外掛嗎？

基本需求不用。Portfolio、Filterable Portfolio、Fullwidth Portfolio 都是 Divi 內建模組。只有要更進階的輪播或多條件篩選時，才考慮加裝 Divi 專屬外掛。

Divi 作品集跟 Elementor 作品集哪個好？

看你已經用哪個生態系。已經架站用 Divi 的人，內建模組就夠用；若還在比較兩者，可以從整體頁面編輯器的使用習慣來決定，兩者都能做出專業作品集。

Divi 作品集作品很多時會拖慢頁面嗎？

會，如果沒設數量上限與圖片壓縮。建議用 Posts Number 控制首屏件數、把縮圖壓在 200KB 內、啟用快取與延遲載入，作品即使上百件也能維持穩定載入。