Elementor Pro 作品集展示教學：用模板打造令人驚豔的 Portfolio 頁面

Elementor 作品集怎麼做：用 Portfolio 小工具從零打造會被點開的案例頁

用 Elementor Pro 做 WordPress 作品集，核心是把 Portfolio 小工具拖進頁面、選一個 Skin（網格或磚牆）、再把「內容來源」指向你用 Custom Post Type 建好的作品資料。整套流程不用寫程式，但決定作品集是「及格」還是「令人驚豔」的，不是模板本身，而是分類邏輯、縮圖比例、單篇內頁這三件模板之前的事。Elementor 官方把 Portfolio 小工具列為 Pro 專屬功能，免費版拿不到，這也是多數人會卡在「要不要升級」的起點。如果你才剛接觸這套編輯器，建議先讀過 Elementor 完整教學 把基礎打穩。

作品集在接案與求職情境裡的重量很高，它往往是潛在客戶或雇主對你專業能力的第一手判斷依據。一個結構清楚、分類直覺、單篇有故事的作品集，會讓對方在三十秒內決定要不要繼續往下看；相反地，一面塞滿縮圖、點進去空白、分類毫無邏輯的圖片牆，會讓前面的曝光成本全部浪費掉。把 Portfolio 小工具用到位，等同於把這三十秒的判斷時間放大成實際的詢問與合作機會。

重點先看：Portfolio 小工具只負責「排版」，真正決定差異化的是作品分類、縮圖比例、單篇故事；根據 Elementor 官方文件，Portfolio 屬 Pro 專屬小工具，搭配 Custom Post Type 才能發揮全部彈性。

設計師為什麼偏好用 Elementor 排作品集

Elementor Pro 的 Portfolio 小工具讓你用拖拉方式排出網格、磚牆、投影片式作品集，完全不用碰程式碼。它最關鍵的設計是：每一件作品都是一筆獨立的 Custom Post Type（CPT）內容，可單獨設定標題、分類、特色圖片、單篇內頁，這是免費 Gallery 區塊很難做到的彈性。換句話說，你排的不是圖片，而是結構化的案例資料。

對設計師、攝影師、接案者來說，這個彈性會直接影響接單轉換。一個能把作品分成「網頁設計／平面／攝影」並提供篩選的作品集，和一面塞滿縮圖的圖片牆，給客戶的專業感差距很大。這也是為什麼很多接案者願意為了這一個小工具升級 Elementor Pro。

結構化的 CPT 還帶來一個長期紅利：日後要做分類頁、標籤頁、作者頁、甚至把作品匯出給其他系統使用，都不必重新整理資料。因為每件作品本來就是獨立文章，WordPress 原生的分類法、永久連結、RSS、搜尋功能全部能用。這層底層結構會跟著你的職涯走，換版型、換主題、換網域都不會丟，這是單純用 Gallery 區塊貼圖永遠達不到的延展性。

不過老實說，Portfolio 小工具的價值要看你怎麼用。如果你只是想丟十幾張圖上去，它的優勢其實不明顯；但如果你打算把每件作品當成一個小型 case study，搭配 Elementor 編輯器的區塊混排能力，它的整合性會比獨立作品集外掛乾淨很多。

• Pro 專屬：Portfolio 小工具屬 Elementor Pro 功能，免費版沒有，這是要做像樣作品集的第一個門檻。
• 多種 Skin：內建 Grid（網格）、Justified（磚牆）、Slider（投影片）等樣式，對應不同作品類型，名稱可能隨版本微調，以實際版本為準。
• 獨立內容：每件作品是獨立 CPT，可自訂分類、標籤、特色圖片，日後篩選與排序都靠這層結構。
• Theme Builder 整合：搭配 Theme Builder 可自訂單一作品的內頁版型，做出有故事感的 case study。
• 主題相容性：與 Astra、Hello Elementor 等輕量主題相容性最好，若想進一步搭配 Astra Pro 拿到更多範本，載入速度也比較可控。

開始前：先準備好這些作品資料再開 Elementor

別急著打開 Elementor。我看過太多人在編輯器裡做到一半才發現缺分類、缺縮圖、缺說明文字，版面來回改好幾次。正確順序是倒過來的：先把每件作品的內容準備成清單，等 CPT 建好再進 Elementor 排版，一次到位。

這一步看似瑣碎，卻是作品集能不能令人驚豔的真正分水嶺。模板只是把已經準備好的內容排好看，它救不了空洞的內容。如果你還在猶豫作品集該怎麼起步，可以先讀過這篇 作品集網站設計指南，或參考 作品集網站製作完整教學 把腦中藍圖想清楚。

• 分類先決定好。用網頁／平面／攝影這類客戶一聽就懂的名稱，因為分類會直接顯示成前端的篩選按鈕。
• 縮圖統一長寬比（4:3 或 1:1 皆可）。磚牆版型尤其怕忽大忽小，比例不一致就會出現空洞。
• 每件作品準備 50 到 100 字背景說明，放在單篇內頁，對 SEO 與說服力都有幫助。
• 高解析原圖先壓縮再上傳，一次載入十幾張大圖會拖垮速度，可參考這份 圖片壓縮工具實測。
• 備好作品的外部連結（客戶網站、Behance、IG），方便單篇內頁放置。

把這份清單想成你的內容底牌。日後想換版型、加新作品、做分類頁，都是從這份清單長出來的。模板可以換，累積下來的內容會跟著你走，這也是用 CPT 架構做作品集相對於 作品集範本模板 最大的長期優勢。

作品分類的資訊架構：四種常見切法與挑選原則

分類是作品集的骨架，骨架歪了，再漂亮的 Skin 都救不回來。常見的切法有四種，各有適用情境：按「作品類型」分（網頁、平面、攝影、影片）、按「產業」分（餐飲、科技、時尚）、按「交付項目」分（品牌識別、包裝、網站 redesign）、按「服務階段」分（策略、設計、落地）。挑選的判準是「你的目標客戶會用哪一個維度搜尋你」。如果你接的客戶多數是餐飲業老闆，按產業分會讓他們一眼找到同類案例；如果你賣的是品牌識別這種明確服務，按交付項目分最能對齊購買意圖。

實務上有幾個原則能避免分類失控。分類數量建議控制在 4 到 7 個之間，少於 4 個分不出差異，多於 7 個前端篩選列會變成一長串雜訊。每個分類底下至少要有 3 件作品，否則那個分類會看起來空蕩蕩，反而削弱專業感。命名要用名詞而非形容詞（「網頁設計」優於「精美的網頁」），並保持同一個分類維度，不要把「餐飲」和「包裝設計」混在同一層，那會讓訪客的篩選心智模型錯亂。

分類維度	範例分類	最適合	常見陷阱
作品類型	網頁、平面、攝影	跨領域接案者、設計工作室	分得太細變成十幾個按鈕
產業別	餐飲、科技、時尚	深耕單一產業、想吸引同業客戶	跨產業作品無處可放
交付項目	品牌識別、包裝、網站	賣明確服務方案、顧問型接案	一件作品同時含多種交付難歸類
服務階段	策略、設計、落地	主打流程與方法論的團隊	訪客難理解階段含義

選定維度後，分類的名稱會直接顯示在前端篩選列與單篇內頁的麵包屑，務必用客戶能秒懂的白話詞。命名測試很簡單：把分類名稱唸給一個非設計領域的朋友聽，如果對方要你想一下才懂，就改成更直覺的詞。篩選列是訪客與作品集的第一個互動點，命名直覺度會直接決定他們願不願意點下去深入瀏覽。

Step 1：安裝 Elementor Pro 並啟用 Portfolio 小工具

要拿到 Portfolio 小工具，第一個動作是安裝並啟用 Elementor Pro。Pro 是付費外掛，需先購買方案、下載安裝包（方案與定價以 Elementor 官網為準），而且它需要建立在已安裝的免費版之上，不能單獨跑。已經在比較主題搭配的人，可順手參考這份 WordPress 佈景主題推薦。

啟用之後，還有一個關鍵設定：到「設定 → Elementor → Features」確認 Custom Post Type「Elements」或 Portfolio 相關 CPT 已開啟。沒開這個，作品集專屬內容類型根本不會出現在後台選單，Portfolio 小工具抓不到任何內容。

很多人抱怨「找不到 Portfolio 小工具」，九成是兩個原因：授權沒啟用，或免費版與 Pro 版本不同世代。安裝時建議把兩邊都更新到同一世代的版本，避免小工具不相容。如果你對整體安裝流程還不熟，這篇 WordPress 外掛安裝教學 可以先打個底；想一次看懂該裝哪些，則可參考 WordPress 必裝外掛清單。

1. 確認已安裝 Elementor 免費版，再上傳並啟用 Elementor Pro 安裝包。
2. 進入後台「設定 → Elementor → Features」，啟用 Portfolio 相關 CPT（Elements）。
3. 到「範本 → Theme Builder」檢查是否要自訂 Single Portfolio 內頁範本。
4. 回到頁面編輯器，在 Pro 分類下找到 Portfolio 小工具，確認可拖入。
5. 把免費版與 Pro 更新到同一世代版本，避免小工具顯示異常。

完成這五步，Portfolio 小工具就會出現在編輯器的 Pro 分類下。如果你打算連作品集的整體頁首都自己拉，可以順手研究 Elementor 滿版輪播 Hero 區塊，讓作品集入口更有氣勢。

找不到 Portfolio 小工具的疑難排解清單

安裝卡關是新手最常放棄的點。把排查表從第一列依序對照，八成的「小工具消失」問題都能自己解掉，不必寫信給官方支援。

症狀	最可能原因	排查與修復
編輯器搜尋 Portfolio 沒結果	Pro 授權未啟用或已過期	到「Elementor → 帳號」重接授權金鑰，重新整理編輯器
有小工具但拖進去空白	Portfolio CPT 未開啟或尚無任何作品	先到「設定 → Elementor → Features」啟用 CPT，再新增至少一件作品
免費版有、Pro 功能變灰	免費版與 Pro 版本不同世代	兩邊都更新到最新穩定版，清除快取
更新後小工具報錯	主題或第三方 addon 與新版衝突	暫停所有 addon 逐一啟用，定位衝突來源
前端顯示但後台找不到作品	作品設為草稿或私密狀態	把作品發佈為公開，特色圖片補齊

Step 2：建立 Portfolio 作品資料（內容來源）

啟用 CPT 之後，WordPress 左側選單會多出一個「Portfolio」項目。點進去新增作品，操作邏輯跟寫文章一模一樣：填標題、上傳特色圖片、寫內文、選分類。這些資料就是 Portfolio 小工具等一下要抓的「內容來源」。

這一步常常被低估，但它其實是整個作品集的靈魂。特色圖片等於作品縮圖，內文等於單篇案例說明，分類會自動變成前端的篩選條件。沒有特色圖的作品會直接破圖或留白，所以每一件都要補齊。建議先建 6 到 12 件作品再開始排版，數量太少的話，再漂亮的 Skin 也看不出效果。

分類命名這件事值得多想兩秒。與其用「作品一／作品二」這種沒意義的詞，不如用客戶聽得懂的「品牌設計／包裝設計／網站 redesign」。篩選按鈕會出現在前端，命名直覺與否，會影響訪客願不願意點下去。這個觀念在做 作品集網站製作實戰 時特別實用。

欄位	作用	常見錯誤
標題	作品名稱，顯示在縮圖與單篇內頁	只寫「作品 01」，毫無資訊量
特色圖片	作品縮圖，決定網格視覺	忘記上傳，前端破圖
分類／標籤	轉成前端篩選按鈕	分類太雜，篩選按鈕一長串
內文	單篇案例說明，影響 SEO	完全空白，點進去沒東西看
外部連結	導向客戶網站或 Behance	連結失效沒更新

單篇內頁千萬不要只放一張圖就結束。把它當成 case study 來寫：用 圖片輪播 放前後對比、嵌入影片說明設計過程、補上問題與解法的段落。這些內容會餵給搜尋引擎，也是長尾關鍵字能見度的來源。

單篇案例內頁寫作模板：把縮圖變成會說服人的故事

單篇內頁是作品集真正發揮說服力的地方，也是多數人最敷衍帶過的環節。一個能用的 case study 模板大致包含五個段落：背景與挑戰、目標設定、設計過程、成果交付、可量化結果。背景與挑戰交代客戶是誰、原本碰到什麼問題；目標設定說明這次合作想達成什麼；設計過程展示你的思考與取捨；成果交付呈現最終產出；可量化結果則用數字或客戶回饋收尾。

每個段落不必長，但要有具體細節。與其寫「我幫客戶做了一個現代感的網站」，不如寫「客戶是經營十年的咖啡烘焙品牌，舊網站載入超過六秒、行動版破版，目標是把首屏載入壓到兩秒內、並用產地故事強化品牌差異」。同樣的字數，後者讓訪客看見你解決問題的能力，前者只是形容詞堆疊。可量化結果如果手邊沒有數字，用客戶的口頭回饋或專案時程也行（例如「上線後一個月內客戶回報詢問信增加」），重點是給出佐證。

• 背景與挑戰：客戶產業、規模、合作前碰到的具體痛點。
• 目標設定：這次合作想解決什麼、成功標準是什麼。
• 設計過程：你的思考流程、為什麼選這個方向、做過哪些取捨。
• 成果交付：最終產出的項目清單與視覺呈現。
• 可量化結果：數字、客戶回饋、專案時程等佐證。

把這個模板套用到每一件作品，單篇內頁的字數自然會落在 200 到 400 字之間，這個長度對 SEO 友善、對訪客的閱讀負擔也合理。若你已有舊版作品資料散落在 Behance、舊網站或雲端硬碟，可以先用 CSV 匯入外掛批次轉成 Portfolio 文章，再把每篇補成上述五段結構，省去重新打字的工夫。

Step 3：用 Portfolio 小工具排版與設定樣式

作品資料建好後，回到作品集頁面打開 Elementor 編輯器。把 Portfolio 小工具拖進欄位，接下來的設定會直接決定作品集長什麼樣：選 Skin、調欄數、設縮圖比例、開 Hover 效果，最後在 Content Source 指定剛才建的 Portfolio 分類，版面就會自動把作品帶出來。

Skin 是視覺風格的總開關。Grid 適合統一比例的縮圖，整齊方正；Justified 適合長寬不一的攝影作品，能保留每張圖的原始比例；Slider 則適合當輪播展示。選哪一種，取決於你的作品類型，而不是哪一種看起來「比較高級」。

欄數設定是另一個容易翻車的地方。桌面通常設 3 欄、平板 2 欄、手機 1 欄，這組配置對多數作品集都適用。Image Ratio 建議設統一比例（例如 4:3），網格才會整齊；不設的話會依原圖比例呈現，碰上比例差很多的作品就會出現空洞。Hover Effects 記得開啟，Zoom 或 Fade 搭配標題覆蓋，能讓縮圖有互動感，不會像靜態圖片牆；想再搭出更有層次的視覺，可順手研究 品牌色彩選擇，把分類色系定下來。

Skin	適合作品	縮圖建議	注意事項
Grid（網格）	平面設計、網頁截圖	統一 4:3 或 1:1	比例不統一會出現空白
Justified（磚牆）	攝影、長形構圖	保留原始比例	欄數控制較弱，靠高度自動排列
Slider（投影片）	精選作品、首頁展示	統一比例為佳	不適合大量作品一次展示

Skin 裡的 Meta Data、Title、Category 都可以逐一開關，控制每張縮圖要顯示多少資訊。我的習慣是只留標題與分類，把按鈕拿掉，讓縮圖呼吸。如果你要做的是 Bento Grid 風格 的版面，也可以混搭其他 Elementor 區塊，不要被 Portfolio 小工具的預設樣式綁死。

Skin 選擇的二維決策矩陣

選 Skin 時多數人憑直覺挑「看起來順眼」的，但作品類型與作品數量這兩個變數會決定哪個 Skin 真的適合你。把作品類型放橫軸（統一比例／比例混雜）、作品數量放縱軸（少量精選／大量展示），就能對照出建議的 Skin 與搭配欄數。

	統一比例作品	比例混雜作品
少量精選（6 至 12 件）	Grid 3 欄，Hover 開 Zoom	Justified，保留原圖比例
大量展示（13 件以上）	Grid 3 至 4 欄，務必開 Lazy Load	Justified 搭分類篩選，避免無止境捲動
首頁精選區	Slider 4 至 6 件，自動播放關閉	Slider 僅放統一比例件，比例混雜件另開 Grid

這個矩陣的核心邏輯是：作品越多、比例越雜，越需要靠篩選與延遲載入把視覺與速度顧好；作品越少、越精選，越能把 Hover 動效與較大的縮圖尺寸拿來放大質感。先判斷自己落在哪一格，再回頭對照前面 Skin 對照表的細節設定，能省下大量試錯時間。

作品集版型優化：手機版、速度與 SEO

作品集最容易在三個地方出問題：手機版欄數沒調、圖片沒壓縮沒延遲載入、單篇內頁沒寫夠文字。桌面版再漂亮，手機一跑版、首圖載入慢、點進去沒內容，前面所有努力都會打折扣。這三項是作品集最常見的三個致命傷。

手機版的處理方式是用 Elementor 的響應式模式，分別檢視桌機、平板、手機三種狀態。手機建議把欄數降到 1 到 2 欄，作品才不會擠成一團。這不是作品集手機版排版的獨有問題，而是所有 響應式網頁設計 的基本功，但作品集因為圖多，影響會被放大。

手機版不能只當附帶項目處理，原因在於它早就不是少數流量來源。根據 Statista 的統計，2026 年第一季行動裝置（不含平板）占全球網站流量的 52.27% [來源：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]。換句話說，超過一半的訪客是從手機看你的作品集，手機欄數一跑版、縮圖一擠，第一眼就掉了，這也是響應式模式必須逐一檢視三種裝置的核心理由。

速度方面，作品圖一定要啟用延遲載入（Lazy Load），並用 Smush 或 ShortPixel 這類工具壓縮。一次載入十幾張未壓縮的大圖，會讓 LCP 衝高，直接影響 Core Web Vitals 與搜尋排名。完整的速度優化思路可以參考這篇 網站速度優化全攻略。

把 LCP 顧好，影響的不只是搜尋排名，而是實質的接單成效。web.dev 引述的案例顯示，Vodafone 在 LCP（最大內容繪製）改善 31% 之後，銷售成長了 8% [來源：web.dev（Google）〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]。對以圖片為主的作品集來說，首屏那張代表作縮圖通常就是 LCP 元素，把它壓縮、延遲載入非首屏圖片，等同於同時優化速度與轉換，而不只是討好搜尋引擎。

作品集圖片優化的逐項設定清單

圖片是作品集的命脈，也是拖垮速度的最大兇手。把逐項設定清單照著做完，能在不犧牲視覺品質的前提下，把首屏載入時間壓到合理範圍。

• 格式選擇：攝影類用 JPEG、含透明背景的圖用 PNG 或 WebP，優先把縮圖轉成 WebP 兼顧品質與檔案大小。
• 尺寸控制：縮圖寬度壓在 1200 至 1600 px 之間，超過的只在單篇內頁放大圖時才用，避免首屏一次載入超大解析。
• 壓縮外掛：用 Smush 或 ShortPixel 批次壓縮既有圖庫，並設定上傳時自動壓縮，杜絕未來大圖混入。
• 延遲載入：啟用 Lazy Load，首屏作品除外，其餘縮圖等使用者捲到才載入。
• alt 文字：每張縮圖寫實際內容（例如「咖啡品牌包裝設計正面圖」），別留空或塞關鍵字。
• 快取層：搭配頁面快取外掛與 CDN，把壓縮後的圖片送到離訪客最近的節點。

這六項做完之後，建議用 PageSpeed Insights 或 Lighthouse 實測一次作品集頁面，把 LCP、INP、CLS 三個核心指標的數值記下來作為基準。日後每加一批新作品、每換一次 Skin，都拿這個基準對照，一旦數值明顯退化就回頭查是哪一張圖或哪一個設定造成的。圖片優化是持續性工作，不是一次性設定就能永遠有效。

• 用響應式模式分裝置調欄數，手機降到 1 到 2 欄。
• 作品圖啟用 Lazy Load，搭配壓縮外掛降低 LCP。
• 每張縮圖 alt 寫實際內容（例如「咖啡品牌包裝設計」），別留空或塞關鍵字。
• 單篇內頁補 200 字以上案例描述，搭配 H2 小標，提升長尾關鍵字能見度。
• 用 Theme Builder 自訂 Single Portfolio 範本，加上下一件作品與聯絡按鈕。

SEO 不只是寫 alt。單篇內頁的結構化文字、H2 層次、內部連結，都會影響搜尋引擎能不能讀懂這件作品。把 圖片 SEO 優化 和 WordPress 圖片優化 一起做，作品集才有機會同時在圖片搜尋與一般搜尋被找到。想把作品集背後的關鍵字選題與排名邏輯一次搞懂，也可以從一套系統化的 SEO 排名攻略實戰課 入手，回頭檢視自己的單篇內頁會更有方向。

用 Theme Builder 打造一致化的單篇與分類頁範本

一件一件手動排版調單篇內頁，很快就會變成維護噩夢。Theme Builder 的價值在於讓你設計一次 Single Portfolio 與 Portfolio Archive（分類頁）範本，所有作品自動套用同一套版型。Single Portfolio 範本裡可以放作品標題、特色圖大圖、case study 內文區塊、下一件作品的引導連結、聯絡按鈕；Archive 範本則統一所有分類頁的縮圖排列與篩選列樣式。設定完成後，新增任何作品都不必再碰版面，系統會自動用範本渲染。

範本設計上有幾個細節會直接影響停留與轉換。單篇內頁底部放一個明顯的聯絡或詢問按鈕，因為訪客看完一件感興趣的作品，往往是詢問意圖最高的瞬間；加上「下一件作品」的引導連結，能延長瀏覽深度，讓訪客多看幾件再離開。分類頁範本則要確保篩選列在所有裝置都好點擊，手機上按鈕間距不能太擠，否則手指誤觸會中斷瀏覽體驗。把這些範本當成作品集的基礎建設一次性做好，後續維護成本會降到很低。

要不要為了 Portfolio 小工具付費：Pro、Divi、Bricks 與主題內建方案比較

這是每個人在升級前都會問的問題：做作品集到底要不要花錢買 Elementor Pro。答案要看你的使用情境。若只是放幾張圖，Astra、Divi 等主題也有內建作品集功能，成本較低就能做到基本網格；但要做到自訂單篇內頁、複雜篩選、與其他 Elementor 區塊混排，Pro 的 Portfolio 小工具仍是彈性最高的選擇。

選擇的關鍵不在「哪個最強」，而在「你的網站已經重度依賴哪個生態」。若你本來就大量用 Elementor 排版，Portfolio 小工具的整合性與擴充性會讓升級很值得；若你只是臨時要放幾張作品，硬買 Pro 反而划不來，用免費主題內建作品集或 Gallery 區塊更實在，WordPress 自架網站費用解析 可以幫你算清楚總開銷；不想自架的人，也能先試 線上作品集製作工具。

方案	作品集能力	單篇內頁自訂	適合對象
Elementor Pro Portfolio	強，多 Skin、可篩選	高，搭配 Theme Builder	已重度使用 Elementor 者
Astra WP Portfolio	中，網格為主	中，需額外設定	預算有限、用 Astra 者
Divi Portfolio 模組	中高，含 Filter	中高，Divi 主題內建	已使用 Divi 主題者
Bricks Builder	高，自訂程度大	高，效能取向	重視效能、願意學習者
免費 Gallery 區塊	低，無篩選排序	低，手動排版	只想放幾張圖的人

Bricks Builder 是近年效能黨愛用的替代品，作品集自訂程度高，但學習曲線較陡。如果你正在比較各家頁面編輯器，這篇 WordPress 頁面編輯器深度評測 給了完整的橫向比較。而如果你連 Gutenberg 區塊編輯器 都在考慮，那作品集的彈性會受限很多，得靠第三方區塊外掛補。

順帶一提，如果你已經投資了 Ultimate Addons for Elementor 這類擴充模組，或考慮 第三方外掛，部分 addon 也提供進階作品集區塊，能補 Portfolio 小工具做不到的版型。但 addon 一多，載入與相容性風險也會上升，這個取捨要想清楚。

什麼情況其實不需要 Elementor Pro 作品集

多數教學預設你一定要升級，但有些情境用免費方案反而更俐落。第一種是作品量極少（三到五件）且短期內不會增加的人，這種規模用 Gallery 區塊手動排，維護成本比建一套 CPT 還低。第二種是作品只是輔助說明、主要業務在文章或服務頁的人，把作品嵌進關聯文章裡，比另開作品集分區更自然。第三種是已經重度使用其他頁面編輯器或主題內建作品集的人，為了單一小工具把生態搬過來，遷移成本會吃掉所有好處。誠實評估自己落在哪一種，能避免花了錢卻用不到三成功能的浪費。

作品集上線之後：用數據與自動化把它變成接單入口

作品集不是做完就結束，上線之後能做的優化比你想的多。用 Popup 做點擊作品跳出詢問表單、用 Theme Builder 自訂分類頁、搭配 GA4 追蹤哪件作品最常被點，這些都是讓作品集從「放著」變成「接單入口」的進階玩法。

舉例來說，點擊作品縮圖時開啟 Popup 放詢問表單，就能把作品集直接轉成接單入口。搭配 聯絡表單，訪客的興趣最高時剛好填單，轉換率會比放在頁尾的表單好；想再強化引導動線，可參考 CTA 按鈕設計。再結合 Elementor Cloud Templates 跨網站重用範本，作品集的維護成本會降很多。

用 GA4 找出最會帶來詢問的作品

光知道「有訪客來看作品集」不夠，要進一步知道哪一件作品最常被點開、哪一件最常帶來詢問。在 GA4 裡可以針對單篇作品內頁設定自訂事件，追蹤「作品點擊」「聯絡按鈕點擊」「外部連結點擊」等動作，再透過探索報表把這些事件與作品分類交叉比對。跑一段時間後，你會發現少數幾件作品的詢問貢獻不成比例地高，那幾件就是值得繼續強化 case study、放到 Slider 精選區、或拿來當廣告素材的代表作。

這個數據循環的好處是讓作品集從「憑感覺排順序」變成「依據真實互動調整」。把高互動作品往前放、低互動作品補強或淘汰，每季調整一次排序與精選區，作品集會越來越貼近潛在客戶想看的內容。Google Analytics 是目前最普及的網站流量分析工具，在 W3Techs 的調查中涵蓋 46.6% 的所有網站、81.8% 已知分析工具的網站 [來源：W3Techs〈Usage Statistics and Market Share of Google Analytics〉 https://w3techs.com/technologies/details/ta-googleanalytics 2026-06-29]，設置資源與教學都很容易取得。

• 舊作品可用 CSV 匯入外掛批次轉成 Portfolio 文章，不必手動重打。
• 進階玩法：點擊縮圖開 Popup 放詢問表單，把作品集變接單入口。
• 搭配 GA4 事件追蹤，找出哪件作品最常被點，作為強化案例的依據。
• 免費版可用 Image Box 或 Gallery 手動模擬，但失去分類篩選與自動排序。
• 作品集是活的，建議每季更新順序、補上新作品，維持對客戶與搜尋引擎的新鮮度。

FAQ

Elementor 免費版能做作品集嗎？

免費版沒有 Portfolio 小工具，只能用 Gallery 或 Image Box 區塊手動排列，缺少分類篩選與自動排序。要做出可篩選、可自訂單篇內頁的作品集，需要升級 Pro。

Portfolio 小工具在哪裡打開？

啟用 Pro 後，在頁面編輯器的 Pro 分類下可找到 Portfolio 小工具。若找不到，通常是授權未啟用、CPT 未開啟，或免費版與 Pro 版本不同世代所致。

作品集縮圖要準備什麼尺寸？

建議統一長寬比，例如 4:3 或 1:1，並在 Image Ratio 設定一致比例。磚牆版型可保留原圖比例，但桌面欄數控制力較弱。縮圖原圖先壓縮再上傳，避免拖慢載入。

作品集怎麼加分類篩選？

分類來自 Portfolio 文章的分類法。在每件作品選好分類後，Portfolio 小工具的 Content Source 指定分類，前端就會自動帶出對應的篩選列。

Elementor 作品集手機版要怎麼調？

用響應式模式切到手機視圖，把欄數降到 1 到 2 欄，並檢查縮圖比例與間距。作品圖啟用 Lazy Load 與壓縮，避免手機首屏載入過慢。

Elementor Pro 做作品集值得嗎？

若網站已大量使用 Elementor，Portfolio 小工具的整合性值得升級；若只是放幾張圖，用 Astra、Divi 主題內建作品集或免費 Gallery 區塊反而更划算，不必為單一功能硬買 Pro。

作品集該放幾件作品才夠看？

建議先累積 6 到 12 件作品再正式上線，這個數量能撐起 Grid 與磚牆的視覺密度，也夠讓分類篩選看得出效果。少於 6 件容易顯得單薄，多於 20 件則要靠分類與延遲載入控制瀏覽負擔。重點在於每件都有完整的單篇故事，勝過堆砌大量半成品。

單篇案例內頁要寫多長？

單篇內頁建議落在 200 到 400 字之間，涵蓋背景挑戰、目標、設計過程、成果與可量化結果五個段落。這個長度對搜尋引擎友善、對訪客的閱讀負擔也合理。只放一張圖、完全不寫字的內頁，會讓點進去的訪客沒有著力點，也拿不到長尾關鍵字能見度。

作品集圖片太多會拖慢網站嗎？

會。未壓縮的大圖加上未啟用延遲載入，會讓 LCP 升高，影響 Core Web Vitals 與搜尋排名。務必啟用 Lazy Load、用 Smush 或 ShortPixel 壓縮，並把縮圖寬度控制在 1200 至 1600 px 之間，搭配頁面快取與 CDN 分流。

講了這麼多，作品集的本質其實很單純：它是一份會持續長大的案例庫。模板可以換、Skin 可以改，但分類邏輯、縮圖比例、單篇故事這三件事一旦做扎實，作品集就不只是圖片牆，而是會被客戶點開、被搜尋引擎理解的內容庫。如果你還在評估整體架站方向，可以從 新手架站與網站推薦大全 或 WordPress 架站新手教學 或 網頁設計從零到一完整指南 開始打底，再回頭把 Portfolio 小工具當成放大專業感的工具來用。對版面配色或字體搭配有疑問的人，也可以參考 排版設計實戰技巧、網頁版面設計完全攻略，或直接選一套 中文字體 做為作品集標準字，讓作品集不只內容扎實，視覺也站得住。