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

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

用 Elementor 做作品集有三條主力路線：內建 Portfolio 元件、Loop Grid 加自訂文章類型、套用現成 Kit 模板；路線的選擇，取決於你打算讓它慢慢長成會自己帶詢問的長期資產，還是只做一次性的展示頁。想像一下這個畫面。潛在客戶從你的廣告、社群、或某篇搜尋結果點進網站，停在作品集頁面。他會很快掃過前幾件作品，判斷這個人（或這間工作室）做過的東西，值不值得進一步聯絡。

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

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

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

作品集需要持續更新。先把作品、分類與案例頁的結構規劃好，日後新增內容時比較容易維護；是否帶來搜尋曝光與詢問，仍取決於內容、目標受眾和推廣成效。

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

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

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

如果你需要自行安排卡片欄位，Loop Grid 比較合適；只需要精選圖片、標題與分類篩選，Portfolio 元件也能隨新文章自動更新。兩者都不必為每件作品手動重拉卡片，作品數量並不是唯一的選擇標準。

如果你完全沒碰過 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. 調欄數與間距，行動裝置上記得縮成單欄或雙欄。

篩選標籤應讓讀者知道會看到什麼內容。作品類型與產業可以分成不同分類法；先選最有助於尋找作品的一組，再觀察是否需要另一種篩選方式。

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

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

篩選標籤應採用目標讀者熟悉的詞。例如「活動網站」「品牌識別」比專案內部代號容易辨識；是否比專業術語有效，仍要透過實際點擊資料或使用者測試判斷。

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

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

Loop Grid 會依查詢條件顯示已發布作品，卡片連結則由 Loop Template 設定。若要讓訪客依分類切換，還要另外加入 Taxonomy Filter 並指定對應的 Loop Grid；它不是加入 Loop Grid 就自動出現的功能。

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

• 自訂文章類型（CPT）：可用 Custom Post Type UI，或 ACF 6.1 以後的文章類型註冊介面建立「作品」。兩種註冊方式擇一即可，不必為同一類型重複安裝。
• 自訂欄位：用 Advanced Custom Fields（ACF）幫每件作品加上結構化欄位，例如客戶名、專案年份、我的角色、使用的工具、封面圖、成果指標。
• Loop Grid：用 Elementor 的 Loop Grid 元件，把「作品」這個類型撈出來，套一個你自己設計的卡片樣板（Loop Template），點卡片連到單篇案例頁。

Loop Template 管卡片版型，後台文章與自訂欄位管內容。改版型可以一次影響整組卡片；新增年份篩選則還需要分類法或自訂查詢，並不是修改卡片樣板就會產生。

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

1. CPT 是否開啟 archive 取決於是否需要彙整頁；設定不與既有網址衝突的 slug，例如 works 或 portfolio，並測試單篇與彙整頁網址。
2. 依讀者需要建立作品類型或產業分類法。Loop Grid 可搭配多個 Taxonomy Filter，但要測試各篩選器的組合結果；目前官方文件不支援以 Current Query 作為其來源。
3. 首頁要顯示精選作品，可先使用「精選」分類或手動選取。若要依 ACF True/False 值查詢，需實作 Query ID 對應的自訂查詢，不能只建立欄位就期待元件自動過濾。
4. Loop Grid 套一個獨立的 Loop Template，卡片裡用 Dynamic Tags 把封面圖、標題、分類、年份拉進來。
5. 單篇案例頁用 Theme Builder 的 Single Post 模板套用，限定 CPT 等於「作品」，這樣每一件作品自動套用同一個案例頁版型。

設定完成後，新增作品時填入標題、精選圖片、案例內容與欄位，再發布。若前端沒有更新，先檢查查詢條件與頁面快取；更新時間不能一律保證為三十秒。

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

註冊基本 CPT 與欄位可以透過圖形介面完成。若需求涉及自訂欄位篩選、特殊排序或外部資料，就可能需要程式或相容擴充；先列出作品要儲存與呈現的資訊，再決定工具。

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

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

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

縮圖協助讀者選擇要看的作品，案例頁則補充背景、決策和成果。哪一種內容帶來較多詢問，應以本站的閱讀路徑與實際表單紀錄檢驗，不能直接從案例長度推斷。

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

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

你有沒有發現，這個結構其實很像我們在 部落格文章 裡寫長篇內容的邏輯？沒錯，案例頁本質上就是一篇「寫給潛在客戶看的深度內容」，獨立案例頁可以提供搜尋引擎與潛在客戶更完整的內容，但收錄、排名與詢問成效仍需觀察。

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

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

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

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

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

下表比較的是設計模式，並非 Portfolio 元件都內建的選項。Portfolio 以格狀列表為主；Loop Grid、Loop Carousel 與手動容器版面各有不同控制，選擇後再確認所需功能與授權方案。

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

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

卡片除了作品名稱，也可以補一行說明，交代專案範圍，例如「從識別到包裝的完整設計」。Loop Template 可從自訂欄位帶入摘要；是否需要這行文字，應看它能否幫讀者區分作品。

依作品代表性與目標客群安排排序，並定期檢查點擊及詢問資料。可以用手動選取或元件支援的 Menu Order；若另建 ACF 排序權重，需搭配自訂查詢，不能把新增欄位視為排序已完成。

手機上的作品集：檢查縮圖、篩選與案例頁

作品集的裝置比例應以本站分析資料為準。即使桌機訪客較多，仍應用手機測試篩選、圖片、案例頁與聯絡流程，確認小螢幕也能完成操作。

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

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

1. 卡片從桌機的四欄改成手機的單欄或雙欄，不要讓使用者 pinch zoom。
2. 篩選標籤太多時，先精簡或允許換行；若要改成下拉或摺疊，需另確認元件或擴充是否支援，不能假設 Portfolio 內建此切換。
3. Lightbox 在手機上要支援滑動切換，不是只能點 X 關閉。
4. 案例頁應在實機上檢查字級、行長與行距，確保閱讀清楚，不必一律比桌機更寬。
5. 確認實際 LCP 元素；若是圖片，以 srcset 與 sizes 提供合適候選尺寸，避免延遲載入該圖。

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；首屏與 LCP 圖片應避免延遲載入，這個機制的原理在 延遲載入與效能 有完整說明。
4. 尺寸控制：搭配 srcset、sizes 與正確的顯示尺寸，讓瀏覽器選擇圖片，再檢查實際下載的檔案。
5. 圖片 SEO：資訊圖片的 alt 應描述相關內容，純裝飾或已由同一連結文字完整描述的圖片可用空 alt。alt 不會縮小圖片或加快下載；圖片 SEO 優化 與 WordPress 圖片優化 有更細的作法。

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

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

尺寸表只是起點。WordPress 會依設定產生不同尺寸，Loop Template 的圖片元件可選擇 Image Resolution；Dynamic Tags 負責資料來源。最後仍要檢查前端實際輸出的 srcset、sizes 與下載檔案。

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

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

Google Analytics 可用來觀察作品瀏覽與詢問路徑。安裝前先規劃必要事件及隱私告知，避免把姓名、Email 或表單內容送入分析工具；以下是可考慮的觀察項目。

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

實際在 GA4 裡設定時，先確認事件在表單實際成功後觸發，再將它設成關鍵事件；Enhanced Measurement 的 form_submit 不代表信件已送達，應另測試錯誤與成功情境，再用卡片點擊與 Lightbox 開啟等自訂事件觀察互動。GA4 Enhanced Measurement 內建的 scroll 事件是在垂直捲動達 90% 時觸發；若要追蹤 75% 或成果段落是否進入視窗，需要自訂事件或透過標籤管理工具設定。等資料量足夠後，再比較各作品的互動與詢問表現。

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

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

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

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

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

• 主要 CTA：在作品集頁面結尾、以及每個案例頁結尾，放一個清楚的「聊聊你的專案」按鈕，連到聯絡頁或直接打開表單 Popup。CTA 文案要具體動作，不是「了解更多」這種空話。
• 聯絡表單：用 Elementor Pro 的表單元件做，Elementor Pro 表單全攻略 有完整做法。只保留回覆與評估需求所必要的欄位，例如「名字、聯絡方式、想解決的問題」三欄。
• 情境式 Popup：可在案例頁捲動到適當位置後，測試邀請聊一聊的輕量 Popup；捲動比例不等於讀完內容，應觀察關閉與詢問資料。這個需要節制，太早或太頻繁會惹人厭。彈窗設計 的觸發條件要抓好。
• 頁首頁尾的常駐入口：不管人在哪一頁，頁首的「作品」與「聯絡」都要一直在。頁首頁尾的設計看 Elementor 頁首頁尾。

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

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

CTA 可放在摘要與成果之後，讓讀者在需要時容易聯絡。Popup 是否使用、何時出現，應依內容長度和實際體驗測試；Elementor 將顯示頁面、觸發方式與進階規則分開設定，各項門檻的計數方式也應按目前官方說明確認，不能直接等同 GA4 工作階段。

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

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

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

地雷一：縮圖下載了不必要的大圖。CSS 把圖片縮小並不會直接縮小傳輸量。用開發者工具的 Network 面板比較實際下載尺寸、顯示寬度與裝置像素密度，再設定適合的圖片尺寸與響應式候選，避免所有位置都用原圖。

地雷二：一次載入超過需要的作品。依實測傳輸量與操作速度決定初始數量，必要時用分頁或載入更多。Loop Grid 的分頁可選頁面重載或 AJAX，但需確認篩選、網址狀態與鍵盤操作都正常。

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

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

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

如果你還在比較製作方式，可延伸閱讀主流頁面編輯器、作品集網站設計與作品集網站製作，先釐清資料結構、維護成本與版型自由度，再決定是否以 Elementor 為主力。版面靈感不足時，也可以先翻翻作品集範本與實際範例，看過幾種排列再回頭挑路線。選定後，Cloud Templates 設計庫可作為加速版型建立的工具。

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

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

1. 盤點手上作品：把過去一年做過的東西全部列出來，標出最有故事的六到十件。不夠的就先不放，寧缺勿濫。
2. 決定路線：只需要格狀圖片與分類篩選，可先用 Portfolio；需要自訂卡片欄位與版型，選 Loop Grid。兩者都能查詢既有文章或作品 CPT。
3. 設計分類與欄位：按讀者找作品的方式建立分類法，再決定需要哪些結構化欄位；若用自訂欄位篩選或排序，另外規劃查詢實作。
4. 做一個案例頁樣板：需要共用版型時，以 Theme Builder 的單篇模板套用到作品 CPT，清楚呈現背景、過程與成果。
5. 檢查圖片與閱讀體驗：測試格式、壓縮、響應式尺寸與延遲載入；LCP 圖不要 lazy load，alt 則依圖片功能處理。
6. 接上 Analytics 與詢問流程：確認 CTA、表單收件與必要事件正常，再按足夠的資料量觀察結果；Popup 是選項，不是上線條件。

完成後，先用實機走一次找作品、閱讀案例與送出詢問的流程，再安排作品更新與成效檢查。清楚的資料結構能降低維護負擔，但不保證搜尋曝光或接案數。

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