只要一個完全免費的 elementor 外掛，你就能在 WordPress 上打造專業、看起來高級的作品集。本文用最實用的步驟，帶你從安裝到顯示效果，一次搞定格局、分類過濾與燈箱等核心功能，讓網站不再需要昂貴主題也能展現專業水準。

在實作過程中，我實際加入多個作品並測試，證實只要幾個拖放與設定就能完成整體展示。你將學會如何安裝免費外掛、以 Elementor 拖放建立 Portfolio 區塊、設定顯示數量、開啟分類篩選與 All 選項、調整格局（網格/方格、三欄至四欄）、以及設定懸停效果與燈箱/單頁詳情連結。照著步驟走，便能快速把作品上線，讓訪客一眼看見你的專業實力。

文章目錄

• 如何利用 Elementor 免費外掛快速打造專業作品集的完整實作步驟與要點
• 從新增作品到分類與篩選的實務操作與最佳實踐
• 佈局與樣式的實務設定欄數網格與懸停動畫的推薦做法
• 提升訪客互動與可用性的燈箱單頁連結與版型微調建議
• 常見問答
• 簡而言之

如何利用 Elementor 免費外掛快速打造專業作品集的完整實作步驟與要點

要快速打造專業作品集，核心在於運用 Elementor 免費外掛 搭配其 Portfolio 模組。以下為完整實作步驟與要點的精要：

• 安裝與啟用：在 WordPress 後台 > Plugins > Add New 搜尋 「Portfolio for Elementor」 或相容的免費外掛，點擊「安裝」再「啟用」。
• 建立作品集項目與分類：新增 Portfolio 項目，填寫標題與描述，設定 Featured Image；再新增 Portfolio Category，如「設計」與「前端」等，並指派至對應分類。
• 匯入內容與排序：依序新增多個項目（範例 6-12 筆），以便後續在前端分頁與過濾時有足夠資料。

在前端頁面使用 Elementor 顯示，步驟如下：

• 進入要放置作品集的頁面，點擊 編輯與 Elementor。
• 新增 Section，選擇 Flexbox 佈局，拖入 Portfolio 小工具。
• 通用設定：
  • Total number of projects：顯示筆數，預設通常為 12。
  • show category filter：顯示分類篩選。
  • Show all option：是否顯示「全部」選項。
• 網格與外觀：
  • Grid settings：選擇 Boxes 或 Masonry 等佈局，預設建議為 3 欄。
  • Box height：高度，可根據需要設定，如 50。
  • Hover style：選擇滑鼠移上時的顯示效果（例如底部浮層）。
• 連結與互動：作品點擊預設可開啟 Lightbox（大圖浮層）或連結到單獨的 Single Page，依需求調整。

完整驗收與發佈要點：

• 頁面預覽與測試：儲存變更後，預覽並測試點擊作品、過濾與光箱功能是否正常。
• 優化與相容性：使用合適尺寸的圖片、啟用 延遲載入，並在行動裝置上測試排版。
• 發佈與維護：確認無錯誤後發布，日後可依需求追加作品與分類。

實用要點與最佳實踐：

• 一致的縮略圖尺寸與裁切，提升整體美感。
• 為每個作品撰寫具吸引力的 標題與描述，利於 SEO 與使用者理解。
• 使用 分類過濾器，讓訪客快速找到感興趣的類型。
• 圖片壓縮與最佳化載入（如 WebP、延遲載入），提升載入速度。
• 若需要更多樣式與功能，考慮升級或搭配其他 Elementor 相容 addon。
• 保持整體設計的色系與字型一致，以維持專業感。

從新增作品到分類與篩選的實務操作與最佳實踐

實務操作要點從「新增作品」開始：先在 WordPress 後台安裝並啟用 Elementor Free Addon 的 Portfolio 模組，接著到「新增項目」建立專案。輸入作品標題、上傳或選取精選影像，指定適用的 portfolio category，撰寫說明文字，並按下發佈。此流程可重複使用，快速累積多個作品，同時為每個項目補充更多分類與說明，以利日後的分類與篩選。若已有分類，亦可在此階段新增或微調，例如新增「Support」等分類。

在前台顯示方面，使用 Elementor 編輯該頁面，新增 Section 並設定為 Content Layout: Flexbox、Content Width: Boxed，並設定適當的上下留白（例如上下 60px）。在左側的元件清單中搜尋並拖入 Portfolio 小工具。設定重點包括：Total number of projects to show（預設 12）、啟用 show category filter 與 Show all option，必要時自訂「All」文字。接著在 Grid Settings 中選擇 Boxes 佈局、Columns 設為 3、Margin 設為 0、Box height 設為 50。完成後發布或更新，預覽時點擊作品即可開啟Lightbox（燈箱）或前往單頁詳情。

關於分類與篩選的最佳實務，建議使用清晰且穩定的分類名稱，並確保每個作品都被正確歸類，這樣篩選功能才真正有用。避免過度細碎的分類，以維持使用者的操作效率；在後台已新增的分類中，直接指派至各個作品，並適時建立新分類（如 Support 等）以反映實際內容。啟用「Category filter」與「All option」，可提升訪客的瀏覽體驗，並可以自訂 all 的顯示文字以配合網站語言與風格。

實作中的效能與可用性要點包括：確保影像尺寸與長寬比一致，為每張圖片填寫替代文字（ALT），提升可及性與 SEO；在桌面通常以三欄佈局，手機上則自動自適應，必要時微調欄數與間距以維持視覺平衡；若需要更進階的互動，可微調 Hover Style、點擊導向單頁或啟用 Lightbox 的設定，確保使用者在各裝置上都能順暢瀏覽。完成設定後，回到頁面檢視並刷新快取，確認篩選、切換與燈箱效果皆符合預期。

佈局與樣式的實務設定欄數網格與懸停動畫的推薦做法

要在作品集區塊實作穩健的佈局與樣式，給你以下實務設定：在桌面使用3 欄、平板2 欄、手機1 欄；卡片高度可固定或讓影像自適應，預設演示中的Box 模式高度為50，若遇到高度不一的圖像可改用 Masonry 以更有效利用空間。欄間距建議維持在0-20px以保持整潔；同時啟用顯示分類過濾器與全部選項，並可自訂 All 的文字。為貼合示意圖，區塊的上方與下方各留設60px的內距。

在懸停動畫部分，建議保持簡潔：在Portfolio設定中選擇Style 0或Simple；若你需要更具動態的效果，可以選擇從底部顯示的 hover 層，讓遮罩自下而上浮現，並確保文字與按鈕的對比度足夠。為了存取性，若使用者啟用系統的減少動作，就應讓動畫更輕微或關閉。若要開啟大圖燈箱，將連結設定為圖像燈箱；若要導向單頁詳情，設定為單頁，並在單頁中放置專案詳情。

實作步驟要點：在後台安裝Element Free Add-on，於Elementor 編輯頁面新增Portfolio 小工具；新增專案並指派分類、設定特色圖片，撰寫簡短描述並發布。回到Portfolio設定，設定總作品數為12（依需求調整），開啟分類篩選與全部選項，必要時自訂全部按鈕文字。在Grid設定中選擇Box模式、3 欄、欄位高度 50；在Hover設定中選取從底部顯示。完成後發布並於前端檢視，確保Lightbox、篩選與分頁皆正常運作。

提升訪客互動與可用性的燈箱單頁連結與版型微調建議

提升互動與可用性的核心策略 要讓訪客在作品集前後有流暢且直覺的互動，關鍵在於「燈箱單頁連結的可用性」與「版型的細微微調」。以下以使用 Elementor 免費外掛 建立的專業作品集為例，提供具體可執行的設定與微調重點。

• 燈箱 vs 單頁連結：在作品項目中同時支援「圖像燈箱」快速檢視與「單頁詳情」深入閱讀。點擊作品先開啟燈箱看大圖與簡短說明，若有需要再導向單頁獨立頁面，以免干擾瀏覽流程。
• 作品數量與分頁：以 Transcript 的實作為參考，設定「總專案數量」為 12，讓使用者在分頁或滾動中維持穩定的閱讀節奏，減少資訊過載。
• 網格與版型：使用 盒狀（boxes）版型，預設三欄（desktop），並支援回應式自動調整。欄位數可依裝置調整為 2 欄（平板）與 1-2 欄（手機），確保不同裝置有最佳的視覺密度。
• 間距與高度：上/下內距可設定為 60px，邊距與格子高度保持一致，有助於整體版面清晰與點擊區域的可觸性。
• 滑鼠櫛梳與 hover 效果：選用「底部滑出」等簡潔的 hover 風格，讓使用者在滑動到作品時能看見操作箭頭與連結，提升互動性。

可用性與無障礙設計要點：為圖片提供替代文字（alt 文字）、燈箱具備關閉按鈕與鍵盤導覽（Esc、左右箭頭），篩選條形要有清晰標籤且保持「全部」選項可見。若採用單頁詳情，請提供明確的返回列表選項與易讀的標題與摘要，確保螢幕閱讀器的使用者也能順暢瀏覽。

實作後的測試與優化方向：在桌面、平板與手機三個裝置上逐步測試版型與互動，確保 3 欄/2 欄/1 欄的排列在不同解析度下不失真。對於載入速度，建議圖像壓縮與延遲載入，並在燈箱/單頁中加入清晰的 CTA（例如「查看更多作品」或「回到作品列表」）。同時透過 Google Analytics 追蹤點擊、篩選與單頁的互動，並針對高互動的作品優先展示。以上設計與微調，能在不需要升級付費插件的情況下，達成專業且高互動的作品集頁面。

常見問答

🧰 如何在 WordPress 使用 Elementor 免費外掛安裝並啟用以建立作品集？

要開始建立作品集，先安裝並啟用 Elementor 的免費外掛（Portfolio 與 Image Gallery For elementor）即可。首先在後台進入 Plugins（外掛）> Add New（新增外掛），搜尋「Portfolio and image Gallery for Elementor」或相近的「Portfolio」外掛，點擊安裝並啟用。啟用後你會看到新增的設定區，接著可以進入 Portfolio 就是新增作品與分類。如此即可開始新增作品項目、設定分類並發布。

🗂️ 如何在 Elementor 外掛中新增作品並分配分類？

要新增作品並分配分類，先在外掛設定中新增作品項目。進入 Portfolio > Add New Item（新增項目），填寫作品標題、上傳設定的特色圖片，並選擇現有分類或新增新分類（例如「Support」）。完成後發布項目，重複該步驟即可新增多個作品。之後回到前台頁面即可看到新增的作品顯示在作品集裡。

🧩 如何設定作品集的網格佈局、過濾器與 Lightbox 效果？

要設置外觀與互動，先在頁面中使用 Elementor 的 Portfolio 元件，並根據需求調整設定。關鍵設定包括：總顯示專案數（預設為 12）、是否顯示分類過濾器（開啟）與全選項（開啟）、佈局類型可選 Box（預設）或 Masonry、欄數設定為 三欄、間距（Margin）設為 0、格子高度（Box Height）設為 50、懸停樣式設定為底部出現，並將連結設定為開啟圖像 Lightbox。然後在前端預覽並儲存發布，即可看到點擊作品時以 Lightbox 顯示圖片與可使用的過濾功能。

簡而言之

透過本影片，你可以在 WordPress 網站上使用 Elementor 的免費外掛，輕鬆打造專業的作品集，且完全不需要 Elementor Pro。以下是本影片的重點資訊與資訊增益：

– 如何安裝與啟用免費的作品集外掛，並在後台新增作品條目與分類，設定特色圖片。
– 在 Elementor 編輯頁面中，使用 Portfolio 元件，建立網格/磚狀佈局，並配置每頁顯示的專案數量。
– 啟用分類篩選與「全部」選項，讓訪客可以根據類別篩選作品。
– 設定滑鼠懸停效果、動畫與燈箱查看單一作品，並建立作品連結。
– 自訂格局，如欄位數、間距、盒高，並選擇網格與燈箱風格。
– 確保響應式設計，作品在手機與平板上也同樣好看。
– 適用於任何主題的 WordPress 網站，且無需 Pro 版本，適合初學者。
– 提供可複製的實作步驟與設定，協助你快速在網站上呈現專案集。

想要在 WordPress 上不用 Elementor pro 就秀出你的作品集嗎？🔥 本影片將一步一步教你如何使用 Elementor 免費外掛新增作品集–不需要編碼、也不需要付費外掛！

你將學會：
– 如何在 WordPress 中用 Elementor Free 插件新增作品集
– 如何安裝與使用免費的 Elementor 作品集外掛
– 如何建立美觀的網格與磚狀佈局
– 如何加入滑動效果、篩選與動畫
– 如何讓作品集在手機與平板上具備響應式
– 如何根據你的品牌自訂設計

適用對象與需求：
– WordPress 最新版本
– Elementor Free（不需要 Pro）
– 任何 WordPress 主題
– 100% 初學者友好

使用 Elementor free 版本建立的作品集，能幫你吸引更多客戶、展示技能、建立信譽。

🔔 記得訂閱我的頻道 👉 @WPHandy，獲取更多 WordPress 教學、Elementor 小技巧與網頁設計秘訣！

💬 有問題？歡迎在留言區提出，我會回覆每一位！

#WordPress #ElementorFree #PortfolioInWordPress #ElementorTutorial #WordPressPortfolio #WPHandy