Elementor 作品集教學：模板打造 Portfolio 頁面

先回答一個關鍵問題：你的作品集，到底要解決什麼問題？

想像一下這個畫面。潛在客戶從你的廣告、社群、或某篇搜尋結果點進網站，停在作品集頁面。他會很快掃過前幾件作品，判斷這個人（或這間工作室）做過的東西，值不值得進一步聯絡。

很多人把作品集當成「把做過的東西全部秀出來」的櫥窗。這個直覺其實只對了一半。真正會帶來案子的作品集，解決的是「信任」問題，不只是「展示」問題。客戶滑過去的時候，腦袋裡在問三件事：這個人的風格跟我想要的搭不搭？他的執行品質穩不穩？他能不能把我託付的事如期如預算做完？

也因此，我會建議你，動手拉 Elementor 元件之前，先花十分鐘回答兩個問題。第一，你的作品集主要服務誰：是為了接新案子的潛在客戶、是為了求職的面試官、還是為了合作夥伴？對象不同，要強調的東西完全不一樣。第二，你希望看完的人做什麼下一步：填表單、加 LINE、寄信、直接下單？這個下一步，會回頭決定整個頁面的排列邏輯。

把這兩題答清楚，你會發現下面所有技術選擇都變得很好決定。換句話說，Elementor Pro 只是工具，它不會替你回答「我想被誰看見」這件事。如果你還在摸索整個 WordPress 架站的脈絡，可以先看一篇 從零架站的完整流程，再回來這裡聚焦作品集。至於用 Divi 架站的人，Divi 作品集展示樣式有另一套做法，可以一併對照。若你的主題底座是 Astra、想改走付費外掛路線，可以再對照四種作品集展示類型的挑選與設定。

有一個觀念我會在這篇反覆回來：作品集是長期資產，跟廣告投放的邏輯完全相反。廣告是花錢租流量，停了就沒；作品集是你慢慢累積、會自己在搜尋結果裡被找到、會持續帶詢問的東西。這個資產性格，決定了你應該用「會用五年」的標準去蓋它，別貪圖「這週末弄個頁面交差」的省事。前者多花兩個晚上規劃，之後五年都受用；後者兩週後就會想打掉重做。

Elementor Pro 能做作品集的三條路線，先選對再動手

這是我這篇最想先講清楚的決策框架。Elementor Pro 做作品集不是只有一種做法，常見的有三條路線，各自適合不同階段的人。選錯路線的代價是：你每新增一件作品就要回來改一次頁面，改到後來那個頁面會變成你的噩夢。

三條路線的差別，本質上是資料來源與版型自由度。路線一直接把現有文章、頁面或自訂文章類型交給 Portfolio 元件排列；路線二用 Loop Grid 自訂卡片與欄位；路線三把整套視覺交給現成模板。你怎麼管理作品內容，決定了哪條路線最合適。

路線	核心工具	適合誰	新增一件作品的成本	天花板
路線一：Portfolio 元件	Elementor Pro 內建的 Portfolio Widget	已有文章、頁面或自訂文章類型，只想快速做可篩選列表	新增內容並設定精選圖片與分類	中，卡片版型自由度較低
路線二：Loop Grid + 自訂文章類型	Loop Grid + Custom Post Type + 自訂欄位	會持續累積作品、想要案例頁 SEO、接案工作室	後台發佈一篇文章就自動出現	高，可擴充到上百件不亂
路線三：Kit 模板套用	Elementor Template Kits / Cloud Templates	想直接套設計師做好的整套版型	視模板結構而定，多半仍需手改	中，美感取勝但結構不見得合

我自己會把絕大多數認真做接案的人，推向路線二。原因很簡單：作品集是會長大的東西。你今年十件、明年二十件、三年後五十件，如果每加一件都要回 Elementor 編輯器裡拉一個新區塊、調間距、改連結，這件事最後一定會荒廢。Loop Grid 加自訂文章類型的組合，等於把作品集變成「發文就更新」，這才是會持續維護的結構。

如果你完全沒碰過 Elementor 的進階功能，建議先讀一遍 Elementor Pro 完整功能指南，把 Theme Builder、Loop Grid、Popup 這幾個名詞的位置搞清楚，下面會順很多。對 Elementor 還很陌生的讀者，從 Elementor 完整入門教學 起步也不會錯。

路線一：Portfolio 元件，快速做出可篩選的格狀展示

先講最快的路線。Elementor Pro 內建 Portfolio 元件（新版介面的位置可以對照 Elementor 新介面解析）。它會查詢文章、頁面或自訂文章類型，使用精選圖片做格狀展示，也能依分類法產生篩選列。它不是手動加入圖片的 Gallery；若作品尚未建立成內容項目，必須先補齊文章資料與精選圖片。

操作流程大概是這樣：

1. 在要放作品集的區段拉一個 Portfolio 元件。
2. 在 Query 選擇要顯示的來源，例如文章或已註冊的作品 CPT，並設定數量與排序。
3. 確認每件內容都有標題、精選圖片與可用的分類法，例如「品牌」「包裝」「網站」。
4. 開啟 Filter Bar，並選擇要用哪一個 taxonomy 產生篩選項目。
5. 依素材比例選擇合適的版面設定，並調整圖片比例與顯示內容。
6. 調欄數與間距，行動裝置上記得縮成單欄或雙欄。

這條路線最大的陷阱是篩選標籤的設計。很多人隨手給標籤，結果出現「LogoA」「LogoB」「客戶A的網站」這種標籤，篩選列變成垃圾場。我會建議你，篩選標籤只從兩個維度挑一個來用：要嘛用「作品類型」（品牌、包裝、網站、插畫），要嘛用「產業別」（餐飲、科技、非營利）。不要兩種混用，否則使用者點了「品牌」又看到一堆產業標籤，會直接離開。

Portfolio 元件的限制不在於「沒有案例頁」：卡片本來就可連到來源文章或自訂文章類型的單篇頁面。真正差別是卡片版型與欄位呈現較受限制。若你需要自行設計卡片結構、顯示角色與年份等自訂欄位，或使用更細的查詢邏輯，就適合升級到路線二。

如果你只是要做一個很簡單的視覺型展示，不打算寫案例故事，那 Portfolio 元件加 圖片輪播 做首頁的精選作品區塊，搭配 彈窗 放大圖細節，已經能做出像樣的成果。

篩選標籤的命名還有一個很容易漏掉的細節：用字要跟潛在客戶的搜尋語言一致，不要用你行業內的術語。我舉個例子，做網站的接案者，作品分類常寫「RWD 重製」「Landing Page」「CMS 移轉」，這些是工程師語言；但客戶搜尋的時候腦袋裡想的是「做一頁活動網站」「幫我重做手機版」「把舊網站搬到 WordPress」。篩選標籤用後者，點擊率會明顯高於前者。篩選列的本質是導航，導航要用使用者的語言，不是你的語言。

Portfolio 元件本身是可篩選的格狀列表，不是自動輪播。若再搭配輪播展示精選作品，才需要評估是否關閉 Autoplay，把瀏覽控制權留給使用者。

路線二：Loop Grid 加自訂文章類型，這才是會長大的作品集

這條路線是接案者與小型工作室架站時的預設選項。它多了一點前置作業，但之後每加一件作品都只要在後台「發佈一篇文章」，前端作品集會自動更新、自動篩選、自動連到獨立案例頁。長期來看，這個結構省下的時間非常可觀。

核心概念是三件事串起來：

• 自訂文章類型（Custom Post Type，簡稱 CPT）：用一個外掛（例如免費的 Custom Post Type UI）註冊一個叫做「作品」的類型。從此後台多出一個「作品」選單，跟「文章」「頁面」並列。
• 自訂欄位：用 Advanced Custom Fields（ACF）幫每件作品加上結構化欄位，例如客戶名、專案年份、我的角色、使用的工具、封面圖、成果指標。
• Loop Grid：用 Elementor 的 Loop Grid 元件，把「作品」這個類型撈出來，套一個你自己設計的卡片樣板（Loop Template），點卡片連到單篇案例頁。

這個組合的威力在於：前端長相由樣板決定，內容由後台決定，兩者完全解耦。你日後想換卡片樣式、加一個「年份」篩選、改 hover 動畫，改一次樣板全部作品就跟著變，不用一件一件改。

實作上有幾個我一定會做的設定：

1. CPT 註冊時開啟 archive 頁與自訂 permalink，slug 設成 works 或 portfolio，乾淨好記。
2. 啟用階層分類（hierarchical taxonomy），分類維度選一個就好，前面講過的理由。
3. 用 ACF 設一個「精選作品」的 True/False 欄位，前端首頁只撈勾選的，作品集頁撈全部。
4. Loop Grid 套一個獨立的 Loop Template，卡片裡用 Dynamic Tags 把封面圖、標題、分類、年份拉進來。
5. 單篇案例頁用 Theme Builder 的 Single Post 模板套用，限定 CPT 等於「作品」，這樣每一件作品自動套用同一個案例頁版型。

聽起來步驟不少，但這是一次的設定成本。設定完之後，你新增一件作品的流程就是：後台點「新增作品」→ 填標題、封面圖、案例故事、欄位 → 發佈。前端三十秒內就會出現在作品集。這才是會持續累積的結構。

Dynamic Tags 是路線二能變這麼省力的關鍵。簡單講，它讓你在 Loop 樣板裡寫「這裡要顯示這件作品的封面圖」「這裡要顯示年份欄位」「這裡要顯示分類」，然後 Loop Grid 跑迴圈的時候，每一張卡片會自動把對應欄位填進去。你不用為每一件作品單獨設計卡片，設計一次樣板，全部作品共用。這也是為什麼之後想換卡片樣式，改一次樣板就夠。

路線二最常見的卡點是「自訂文章類型聽起來很嚇人」。本質上來說它就只是一個跟「文章」平行的內容類型，沒有寫程式的成分。CPT UI 這個外掛用表單填一填就註冊好，ACF 也是圖形介面拉一拉就把欄位加好。真正需要花腦筋的，是前面講的「你要問每件作品什麼問題」這個設計判斷，不是技術本身。

這條路線要動到 CPT 與 ACF，如果你對 WordPress 外掛生態還不熟，WordPress 必裝外掛清單 與 安裝外掛的標準流程 兩篇可以對照著看。主題只要和 Elementor、Theme Builder 與自訂文章類型相容即可，不必為了作品集綁定特定品牌。

案例頁才是作品集的靈魂（不是縮圖牆）

這一節是我整篇最想講、也最常被略過的觀念。一件作品值不值得做單獨一頁來講？我的答案非常肯定：值得。

從作品集網站的 GA 數據普遍可以看到，真正帶來詢問的幾乎都是單篇案例寫得最完整的那幾件，不是縮圖最美的那幾件。縮圖負責讓人點進來，案例頁負責讓人願意寫信給你。這兩件事是不同的工作，混在同一個格狀展示裡，兩件事都做不好。

一個能把信任感撐起來的案例頁，通常會有這幾個段落：

• 開頭的問題背景：客戶是誰、他本來面對什麼狀況、想解決什麼。這裡誠實就好，不要誇大。
• 你的角色與限制：你負責哪一段、預算與時程怎麼樣、有哪些現實限制。講限制反而顯得專業。
• 過程的關鍵決策：你做了幾個版本、為什麼選最後這個、中間放棄了什麼。這段最難被抄襲，也是你的差異化所在。
• 成果：能公開的數字就寫數字（銷售、轉換、流量），不能公開就用質化描述（客戶回饋、後續合作）。永遠不要編造數字。
• 視覺：草稿、過程、成品對照，通常比只放一張完成圖更能解釋你的決策。

你有沒有發現，這個結構其實很像我們在 部落格文章 裡寫長篇內容的邏輯？沒錯，案例頁本質上就是一篇「寫給潛在客戶看的深度內容」，它同時具備 SEO 價值（每一件都是一個可以被搜尋到的獨立頁面）與轉換價值（把人推進到詢問）。把案例頁寫好，等於一次解決內容與轉換兩件事。

把這幾個段落對應到 Theme Builder 的案例頁樣板，我會用這個順序排：封面圖全幅放最上面（這是 LCP 那張，記得最佳化），下面是專案標題與一句話摘要，再來是「客戶與問題背景」「我的角色與限制」「過程的關鍵決策」「成果」「下一步行動呼籲」。每一個段落用一個獨立的容器，背景色交錯（白與淺灰），讓長篇案例頁在手機上不會變成一堵灰牆。

案例頁沒有保證有效的字數門檻。長度應由問題背景、你的角色、關鍵決策、過程證據與成果所需的篇幅決定。判斷標準很實際：每一段都問自己「把這段拿掉，潛在客戶會少理解哪個重要決策」，如果答案是「沒差」，那段就該刪。

這也是我推薦路線二給長期經營者的原因。兩條路線都能連到獨立案例頁，但 Loop Grid 加 CPT 能更自由地控制卡片欄位、版型與查詢條件，內容規模變大後比較容易維護。

視覺模式挑選：網格、砌牆、Bento，哪種配你的作品

選對資料結構之後，再來才是視覺模式。很多人反過來做：先決定要長怎樣，再硬把作品塞進去，這通常會悲劇。視覺模式要服務你的作品特性，不是反過來。

Elementor 不論是 Portfolio 元件還是 Loop Grid，都讓你在幾種排列方式之間選擇。實務上的判斷，我整理成下表：

模式	適合的作品特性	優點	要注意的事
Grid（等比網格）	作品圖比例一致（例如全部 16:9 或全部 1:1）	整齊、秩序感強、容易掃視	比例不一致時會被裁切，或出現難看的留白
Masonry（砌牆）	作品圖比例差很多（直的橫的都有）	不裁圖、保留原始構圖	排列不規則，某些產業會覺得不夠正式
Bento（便當格）	想強調幾件主打作品、其餘為輔	有節奏感、能引導視線到重點	設計成本較高，需要刻意安排大小格
Carousel（輪播）	首頁精選、篇幅有限的位置	省空間、有動態感	不適合當主力作品集，使用者會漏看後面

Bento 是近年很紅的做法，但我不建議每個人都跟風。Bento 格放的好不好，取決於你有沒有「層次分明的主從關係」可以表現。如果你的作品其實都差不多重要，硬做 Bento 只會讓畫面看起來很擠。Bento 的節奏感與留白邏輯，可以對照 Bento 格狀版面設計 與 網站版面配置指南 兩篇來抓手感。

排版細節裡，我會特別盯三件事：卡片的留白（太擠會廉價感）、圖的壓縮品質（太糊會直接掉信任）、hover 動畫（微妙的就好，誇張的 hover 會像十年前的 Flash 網站）。字體與層級搭配，字體與排版建議 有完整的原則可以套。

卡片的標題與分類文字，有一個屢試不爽的小原則：用「作品名稱＋一行說明」的雙層結構，勝過只放作品名稱。例如「某某咖啡品牌重塑」下面加一行「從識別到包裝的完整系統設計」，比單純寫「某某咖啡」多了語境，使用者在點進去之前就知道這件作品在講什麼。多這一行字，點擊率會比你想的高。這一行字的來源，就是你在 ACF 裡設的「一句話摘要」欄位。

排列順序也值得想一下。作品集的預設排序不要用「最新在前」，除非你最近的作品真的最強。比較安全的做法是設一個「排序權重」欄位，把你最有把握、最對應主力客群的作品手動排到前面三到六個位置。讀者注意力從上到下遞減，前三個位置是黃金版面，不要浪費在「剛好最近做的」作品上。

手機上的作品集：六成流量在這裡，別毀在縮圖

手機流量早已經是全球網站的大宗。根據 Statista 的追蹤，行動裝置佔全球網站流的比例長年維持在六成上下，而且這個數字已經穩定多年。你的作品集頁面，超過一半的人是用手機看的。

這件事對作品集的殺傷力特別大，因為作品集是整個網站裡圖最密集的頁面。桌機上四欄漂亮，手機上擠成兩欄還能看，但常常發生的事是：圖被裁掉一半、卡片間距消失、篩選按鈕變成橫向捲動找不到、Lightbox 打開圖卻載不出來。

手機版的檢查清單，我會建議你實際拿手機走一遍：

1. 卡片從桌機的四欄改成手機的單欄或雙欄，不要讓使用者 pinch zoom。
2. 篩選標籤在手機上如果太多，改成下拉選單或摺疊，不要硬擠一排。
3. Lightbox 在手機上要支援滑動切換，不是只能點 X 關閉。
4. 案例頁的標題層級在手機上字級要夠大，段落行距要比桌機更寬。
5. 把首屏的 LCP 圖（最大的那張）換成手機專用的較小版本，別讓手機下載桌機的大圖。

RWD 不只是「會縮排」這麼簡單，它是一整套關於裝置與情境的判斷。響應式網頁設計 的完整觀念可以對照著看。只要主題與 Elementor 的響應式輸出相容，真正的盲點通常是設計者沒有用實機走過完整流程。

圖片吃掉你的分數：作品集的速度與 Core Web Vitals 救命配方

速度為什麼重要，不是直覺而已。Google 在 web.dev 的官方文件整理了速度與使用者體驗、商業指標之間的研究。作品集剛好是整個網站最容易被圖片拖慢的頁面。

一個沒做優化的作品集頁，圖片傳輸量很容易累積到數 MB；實際等待時間則取決於網路、快取與伺服器回應。Core Web Vitals 是眾多排名訊號中幅度較小的一項，但 LCP、INP、CLS 仍能幫你找出圖密集頁面的真實體驗問題。詳細脈絡請對照 Core Web Vitals 與 SEO。

我會固定套用的作品集速度配方，分成五件事：

1. 轉檔：依影像內容測試 WebP、AVIF 或 JPEG，在畫質可接受的前提下選較小版本；實際縮減幅度取決於原圖與編碼設定。
2. 壓縮：無損壓縮跑一遍，工具選擇看 圖片壓縮工具 與 Smush 壓縮外掛。
3. 延遲載入：非首屏的圖全部 lazy load，這個機制的原理在 延遲載入與效能 有完整說明。
4. 尺寸控制：用 srcset 提供多種解析度，讓手機不要下載桌機尺寸的圖。
5. 圖片 SEO：每張圖的 alt 文字寫實質內容，不是塞關鍵字。這件事同時幫助速度感受（圖片有意義）與搜尋，圖片 SEO 優化 與 WordPress 圖片優化 有更細的作法。

這五件事多半可先用現有工具完成，實際改善幅度要以前後測量為準。完整脈絡可以對照 速度優化的完整做法。

作品集頁面常用的圖，我會習慣準備四個尺寸來對應不同位置，不要一張大圖吃全部場景：

用途	建議最長邊	格式	說明
卡片縮圖（格狀展示）	800px	WebP	格狀裡每張圖實際顯示約 400 到 600px，2 倍密度給 800px 足夠
案例頁封面（LCP 圖）	1600px	WebP	首屏全幅用，這張最影響 LCP，務必最佳化
案例頁內文細節圖	1200px	WebP	過程對比、細節截圖，lazy load 處理
Lightbox 大圖	2400px	WebP	點開放大才載入，不進首屏

這個尺寸表不是鐵律，但可以給你一個起點。重點是每個位置用對應尺寸的圖，別一張最大圖吃全部位置。WordPress 媒體庫本身會自動產生多個尺寸，你在 Loop 樣板裡用 Dynamic Tags 指定要拉哪個尺寸的圖，就能做到這件事。

用 Analytics 看哪件作品真的帶來詢問（不是哪件最好看）

作品集上線之後，最容易犯的錯是憑感覺判斷哪件作品「受歡迎」。點閱率高不代表帶來案子，待在最久的頁面也不一定是轉換最好的頁面。你要的是把數據接到詢問流程，才能回答「哪件作品真的幫我賺到錢」這個問題。

Google Analytics 是目前最普遍的選擇，W3Techs 的數據顯示它在所有偵測到分析工具的網站裡涵蓋率長年超過一半，是事實上的標準。裝好之後，我會在作品集頁面追蹤這幾件事：

追蹤項目	看什麼	用來回答什麼問題
案例頁的捲動深度	有多少人看到成果段落	案例故事寫得夠不夠吸引人
卡片點擊（事件）	哪一件作品被點開最多次	縮圖與標題夠不夠吸引人
頁面停留時間	案例頁的平均閱讀時間	內容深度有沒有對到受眾
表單提交（轉換）	哪一件案例頁之後觸發最多詢問	哪件作品真的帶來案源
離開點	人在哪個步驟離開	CTA 位置或表單哪裡卡住

把這幾項追蹤串起來，就能檢查被點最多次的作品，是否也真的帶來後續詢問。案例故事是否完整、成果是否清楚，都可以當成待驗證的假設，而不是預先宣告答案。

實際在 GA4 裡設定時，可先把表單提交設成關鍵事件，再用卡片點擊與 Lightbox 開啟等自訂事件觀察互動。GA4 Enhanced Measurement 內建的 scroll 事件是在垂直捲動達 90% 時觸發；若要追蹤 75% 或成果段落是否進入視窗，需要自訂事件或透過標籤管理工具設定。等資料量足夠後，再比較各作品的互動與詢問表現。

案例頁到表單頁的「漏斗」也值得看。CTA 點擊偏低，可能和內容說服力、文案、位置或視覺權重有關；CTA 點擊尚可但提交偏低，則可優先檢查表單欄位、錯誤訊息、載入速度與隱私疑慮。這些數據只能指出需要進一步調查的區段，不能單靠一個比率直接斷定病因。

沒有數據，這一切都只是猜。不確定怎麼開始追蹤的人，把 SEO 接進架站流程 那篇有把分析工具與網站一起規劃的觀念。

把作品集接上詢問流程：CTA、表單、Lightbox 的排法

作品集的最終目的，是讓對的人主動跟你聯絡。但很多作品集頁面在這一步斷掉：畫面很美、案例很完整、卻沒有清楚的下一步。使用者看完，讚嘆一下，然後離開。你什麼都沒拿到。

把詢問流程接好，需要四個零件排到位：

• 主要 CTA：在作品集頁面結尾、以及每個案例頁結尾，放一個清楚的「聊聊你的專案」按鈕，連到聯絡頁或直接打開表單 Popup。CTA 文案要具體動作，不是「了解更多」這種空話。
• 聯絡表單：用 Elementor Pro 的表單元件做，Elementor Pro 表單全攻略 有完整做法。欄位越少越好，我習慣只問「名字、聯絡方式、想解決的問題」三欄。
• 情境式 Popup：在案例頁讀完 70% 時，跳出邀請聊一聊的輕量 Popup。這個需要節制，太早或太頻繁會惹人厭。彈窗設計 的觸發條件要抓好。
• 頁首頁尾的常駐入口：不管人在哪一頁，頁首的「作品」與「聯絡」都要一直在。頁首頁尾的設計看 Elementor 頁首頁尾。

這裡要特別提醒，作品集首頁的 Hero 區段不要只是放一張漂亮背景圖。Hero 區段的輪播 可以拿來放三件精選作品，但更重要的是那一句標題，要直接講清楚「你做什麼、給誰做、為什麼找你」。Hero 標題決定使用者要不要往下看作品。

價格要不要在作品集頁面寫，是另一個常見問題。我的看法是：作品集頁面不寫價格，但放一個明確的「收費方式」連結。想直接談預算的人會自己點進去，不想談的人也不會被價格嚇跑。網站整體成本的觀念，可以對照 WordPress 網站成本結構。

CTA 出現的節奏要克制，不是越多越好。一個案例頁我通常只放兩個 CTA：一個在開頭摘要下方（給已經決定要談的人），一個在成果段落之後（給被故事說服的人）。中間不放任何 CTA，讓讀者專心看故事。 Popup 我更保守，只在使用者捲動到案例頁 70% 以後、且這是他這次工作階段的第二個頁面以上，才觸發。第一次來就跳 Popup，幾乎等於叫他離開。這些門檻都可以在 Elementor Popup 的觸發條件裡設，記得用、不要怕麻煩。

表單送出之後的「感謝頁」也是常被忘記的環節。送出後不要只顯示一行「我們會盡快聯絡您」，要給使用者一個明確的預期：多久之內回覆、回覆的是誰、回覆之前他可以先準備什麼。這個小動作會大幅降低潛在客戶在等待期的焦慮，也讓你看起來像一個有流程的人，而不是一個會漏信的人。

三個常見地雷，幾乎每個舊站都看得到

這幾個是舊站上反覆出現的問題。接手舊站時，通常會先掃這三項，修掉之後整個網站的體質會立刻提升一個檔次。它們都不是高深技巧，而是基本工，但就是沒做。

地雷一：縮圖直接用原圖撐。後台媒體庫傳一張 4000×3000 的原圖，前端當縮圖用，CSS 縮成 400×300。結果一個作品集頁面下載 80MB 的圖。修正：縮圖位置一律用 WordPress 自動產生的縮圖尺寸（thumbnail 或 medium_large），點開才用大圖。判斷自己有沒有踩雷很快：打開瀏覽器開發者工具的 Network 面板，重新整理作品集頁，看圖片的實際下載尺寸跟它在畫面上顯示的尺寸差多少。如果下載 4000px、顯示 400px，你就是在燒使用者的流量與耐心。

地雷二：全部作品擠在同一頁。五十件作品全部用一個 Loop Grid 撈出來，一頁載入五十張圖。手機直接崩潰。修正：用分頁或「載入更多」，首頁只撈十二件，其餘分批。篩選也用 AJAX 不整頁重整。

地雷三：案例頁沒做，只有外部連結。作品卡片全部指向第三方作品平台，自己的網站便難以保留完整案例脈絡與後續行動路徑。修正：優先把最重要的作品做成站內案例頁，其他次要作品再視需要外連。

這三個地雷的共同點是：都是省眼前的麻煩、欠下未來的債。作品集這種長期資產，欠債的利息特別高。

判斷自己有沒有踩進這些地雷，最快的辦法是打開你的作品集頁，用手機的 4G（不是 Wi-Fi）重新整理一次，然後誠實問自己：如果我是第一次來的潛在客戶，我願意等多久？這個答案通常會讓你立刻決定動手修。技術問題多半不難，難的是我們習慣了自己的網站、忘記第一次來的人是什麼感受。

如果你還在比較製作方式，可延伸閱讀主流頁面編輯器、作品集網站設計與作品集網站製作，先釐清資料結構、維護成本與版型自由度，再決定是否以 Elementor 為主力。選定後，Cloud Templates 設計庫可作為加速版型建立的工具。

從零到上線的六步行動方案

講了一堆觀念，接著換一個可以照著走的行動方案。不管你現在是什麼階段，這六步都能幫你把作品集從「想做」推到「上線」。

1. 盤點手上作品：把過去一年做過的東西全部列出來，標出最有故事的六到十件。不夠的就先不放，寧缺勿濫。
2. 決定路線：作品十件以內、短期上線，走路線一；預期會持續累積、想認真接案，走路線二。不要騎牆。
3. 設計分類與欄位：分類挑一個維度、ACF 欄位想好你要問每件作品什麼問題。這一步做完，後面填內容會非常快。
4. 做一個案例頁樣板：用 Theme Builder 的 Single Post 模板，把問題背景、過程、成果的段落排好。這是真正決定轉換率的東西。
5. 速度配方跑一遍：WebP、壓縮、lazy load、srcset、alt 文字，五件事一次做完再上線。
6. 接上 Analytics 與詢問流程：表單、CTA、Popup、頁首頁尾入口全部到位，並把轉換事件設好，上線後第一個月才看得到數據。

這六步走完，你會得到一個會長大、會被搜尋到、會把對的人推進到詢問的作品集，而不是一個只是漂亮的圖庫。作品集真正的價值，會在你累積到第二十件、第三十件作品的時候才完全顯現出來，那時候你會回頭感謝現在這個願意把結構先蓋好的自己。

如果你覺得這整件事自己搞太花時間，想知道架站可以怎麼更系統化地推進，我們的免費 SEO 課程 把從選題、架站、內容、到 SEO 的流程拆成可執行的步驟；當然，這是選項，不是義務。先把上面六步做完，你會發現作品集這件事，其實沒有想像中那麼難，難的都是前面的觀念卡關而已。