Elementor Pro：客製化 WordPress 文章列表教學

想像一下，你花三個月寫了二十篇紮實的長文，每一篇都查過資料、配好圖、調過 SEO。然後讀者從 Google 點進你的網站，落在文章列表頁，看見的是一排一模一樣的卡片，圖又糊又大、標題被截斷、沒有分類標籤、手機滑兩下就卡住。他沒有點任何一篇，按了上一頁。這是很多用 Elementor 架站的站長最常踩的坑：把全部心力投進單篇文章，卻讓「文章列表頁」停留在預設樣子。這篇文章要解決的，就是這一塊。

三分鐘重點：文章列表頁是部落格的「店面」，不是後台報表。用 Elementor Pro，可先在 Theme Builder 建立 Archive Template，挑 Loop Grid 或 Posts 元件當骨架，用 Dynamic Tag 讓卡片模板重複套用，再用分類篩選與可抓取分頁兼顧體驗和 SEO。手機版則要重新檢查欄數、資訊密度與圖片載入。

為什麼文章列表頁是部落格最被低估的轉換關卡

大多數人把文章列表頁當成「把文章排出來」的功能頁，這是誤解。換句話說，它的角色是內容的店面。讀者搜尋一個關鍵字，Google 把他送進你的分類頁或首頁文章區，他在那裡停留的時間、他點了哪一張卡片、他有沒有往下滑，直接決定了你那一篇文章能不能被讀到。單篇文章再好，列表頁接不住，流量就從第一個畫面漏光。

文章列表頁的任務可以拆成三層：第一層是導覽，讓讀者一眼看懂你寫了哪些主題、怎麼分類；第二層是篩選，讓他三秒內往他要的主題靠近；第三層才是點擊，把卡片設計成值得被點。預設的 Elementor 文章列表往往只做到了第一層的一半，因為它把所有欄位用同一個密度塞進去，沒有層次。

正因如此，列表頁應該被當成一個獨立的設計專案，千萬別把它當成「把文章拉進來就好」的功能頁。如果你還在思考整個部落格的內容方向，可以先看內容行銷策略把主題叢集先排出來，列表頁的設計才會有清楚的分類邏輯可以呼應。分類邏輯一旦清楚，你在 Elementor 裡要做的事就會收斂成「怎麼把這個邏輯視覺化」，而不是漫無目的地調卡片。

先選對工具：Elementor 三種文章列表元件，你該用哪一個

Elementor Pro 裡常用來做 WordPress 文章列表的元件包括 Posts Widget、Loop Grid與偏作品集用途的 Portfolio。三者的版面彈性、查詢條件與適用情境不同，先依是否需要自訂卡片、Archive 範本或作品分類選擇，再開始製作。

元件	最適合的情境	客製化彈性	什麼時候選它
Posts（Classic/Cards）	想快速套版、欄位排序固定	中（欄位順序半固定）	客戶只要「能看」的上線速度優先
Loop Grid	要自己決定卡片長相、重複套版	高（搭配 Loop Template 全自訂）	多數品牌部落格、需要一致視覺的站
Portfolio	作品集、案例展示、圖優先	低（偏展示導向）	設計師、攝影師、工作室

預設答案是 Loop Grid。原因是它把「資料來源」和「卡片長相」徹底拆開：你先在 Loop Template 裡用一般 Elementor 元件畫一張卡片，再用 Loop Grid 把這張卡片當成模板重複套用。這代表你日後要改全站所有列表的長相，只要改那一張模板，這對長期維護是巨大的省事。如果你是 Elementor 新手，建議先讀過Elementor 完整教學把基礎觀念弄熟，再回來碰 Loop Grid 會順很多；已經在評估要不要買 Pro 的話，Elementor Pro 完整功能指南把授權與功能邊界講得很清楚。

一個選元件前該先回答的問題

在選元件之前，可以先問一個問題：「你的列表頁是給讀者『瀏覽』，還是給讀者『找到特定一篇』？」前者重視視覺一致性、留白、節奏，Loop Grid 合適；後者重視篩選與搜尋，那你應該把重心放在分類篩選與分頁，卡片美化是次要任務。把這個答案想清楚，後面所有設定都會自動收斂，你也不會浪費時間在用不到的特效上。

用 Theme Builder 把列表頁升級成資料驅動的 Archive 模板

下一個關鍵觀念是 Theme Builder 的 Archive Template。很多站長第一次做文章列表，是「新增一個頁面，拉一個 Posts 元件進去」。這做得到，但它是一個手動頁面，你不會自動套用到分類頁、標籤頁、作者頁、搜尋結果頁。結果就是你的分類頁還是長 WordPress 預設那副樣子，品牌體驗斷掉。

正確的做法是走 Templates → Theme Builder → Archive，建立一個 Archive Template，把條件（Display Condition）設成 All Archives 或指定特定分類。這樣一來，你的文章分類頁、標籤頁、作者頁、日期彙整、搜尋結果頁，全部自動套用同一個版型。這是 Elementor Pro 真正的價值所在，也是「Pro 才有資格談部落格客製化」這句話的道理所在。

把這個觀念再往前推一步：你還可以為「部落格首頁（Posts Page）」單獨做一個條件，例如設成 Posts Page，讓文章索引首頁和分類彙整頁可以有不同密度的排版。首頁可以做成大圖 hero 配精選文章，分類頁則用緊湊的兩欄卡片。這種層次是手動拉頁面做不到的。如果你對整體版面邏輯還不是很熟，網頁版面設計完全攻略可以幫你把 RWD 排版的觀念先打底。

一個 Archive Template 的標準設定流程

把實際會走一遍的流程寫下來，讓你照著做不會漏：第一步，在 Theme Builder 新增 Archive Template，先放一個 Container 當外層，決定整頁的最大寬度與左右留白；第二步，在 Container 內放一個標題區（顯示分類名稱或「所有文章」），用 Dynamic Tag 綁定 Archive Title，這樣每個分類頁會自動帶出對應名稱；第三步，把 Loop Grid 或 Posts 元件放進來，設定 Query；第四步，設定 Display Condition，先設 All Archives 上線；第五步，存檔後到前台實際點進幾個分類頁，確認套用沒問題，再回頭微調。這個流程最大的好處是它是一次的設定，換來的是全站自動一致，之後你新增任何分類，頁面自動長好，完全不用再動手。

條件設定的順序陷阱

Display Condition 有一個容易踩的雷：條件的優先順序。如果你同時設了 All Archives 和某個分類的專屬條件，Elementor 會依序比對，先比對到專屬條件就用專屬模板。所以設定的時候，愈具體的條件愈要先想好它要不要覆寫通用版，否則你會困惑「為什麼這個分類頁沒吃到你改的樣子」。實務上的習慣是通用版先上線，等某個分類真的有特殊需求，再補一個專屬條件覆寫。另一個小提醒：搜尋結果頁（Search Results）在 Elementor 裡也算 Archive 的一種，如果你不想讓搜尋頁套用同一個版型，記得在條件裡排除它，或為它單獨做一個更精簡的模板。

文章卡片的解剖學：六個區塊決定讀者要不要點進去

選好元件與模板，接下來是卡片本身。一張文章卡片可以拆成六個區塊，由上到下分別是：特色圖片、分類標籤、標題、摘要、後設資料（作者、日期、閱讀時間）、閱讀全文按鈕。這六個區塊每一個都是設計決策，不能當樣板照抄，每一個都要單獨想「它在這個位置要完成什麼任務」。

• 特色圖片：卡片的視覺主體。重點不是放圖，是統一比例。全部卡片用同一個 aspect ratio（例如 16:9 或 3:2），列表才會整齊。比例不一致是新手列表頁最常見的視覺災難。
• 分類標籤：疊在圖片左上或左下的小色塊，讓讀者一眼分類。這是導覽任務，顏色要和品牌主色連動，不能隨便挑。
• 標題：列表頁裡最重要的文字。建議用 H3，字級比摘要大一個明顯級距，行數限制在兩行內，超過用省略號。標題被截斷到第三行是最傷點擊率的。
• 摘要：三到四行就好，目的是補標題講不清楚的「這篇要解決什麼」。很多站長把整段首章貼進來，反而讓卡片過長、一頁能顯示的篇數變少。
• 後設資料：作者、日期、閱讀時間。挑讀者會在乎的那一個放上去就好。SEO 教學類部落格，日期與閱讀時間比作者照片重要；個人品牌站則相反。
• 閱讀全文按鈕：CTA。文字用動詞開頭（「閱讀全文」「繼續看」），不要用「了解更多」這種沒有方向感的詞。按鈕設計的心理學整理在CTA 按鈕設計指南，這裡先記得一個原則：整張卡片其實都可以點，按鈕是視覺強調，不是唯一的點擊區。

這六個區塊的順序不是死的。表現很好的卡片，有的會把分類標籤放在標題下方而非圖片上，也有拿掉摘要、只留標題與日期的極簡版。關鍵是你能不能說出每一個區塊存在的理由，說不出來的就拿掉。卡片排版牽涉的視覺層次與字體選擇，可以參考排版設計技巧，那篇把行距與視覺層次講得比較細。

卡片之間的留白與視覺節奏

很多人把心力全花在單張卡片上，卻忽略卡片跟卡片之間的關係。一個好看的列表頁，秘密往往在「留白」與「節奏」這兩件事。具體要控制的是三個間距：欄與欄之間的 Columns Gap、列與列之間的 Rows Gap、以及卡片內部 padding。實務上的習慣是欄間距與列間距設成一樣的值（例如 24px 或 32px），讓格線形成隱形的網格；卡片內部 padding 則比間距小一級，這樣卡片邊界清楚但不會顯得擠。

留白還牽涉到一個心理學：間距愈大，每一張卡片看起來愈「重要、高級」；間距愈小，列表看起來愈「豐富、資訊密度高」。品牌定位偏向質感、高單價的站，建議留白拉大、一頁少放幾張；資訊型、教學型的站，則可以縮小間距、一頁多放幾張，讓讀者快速掃描。這個判斷沒有標準答案，但要有意識地選一邊，不要落在不上不下的中間值。你如果對版面節奏想再深入研究，可以回頭搭配Bento Grid 網頁排版設計思考格線系統，或參考網頁排版設計範例找靈感。

查詢與篩選：用最少的點擊把對的文章推到讀者眼前

卡片的骨架解決了「好不好看」，查詢與篩選解決的是「對的文章有沒有出現」。Elementor 的文章元件裡有一個 Query 區塊，這是很多人略過、但它其實是列表頁能不能用的核心。Query 控制的是「這個列表要撈哪些文章、依什麼排序、要不要排除某些文章」。

幾個務必開啟的設定：

1. Source 設成 Post，除非你真的有 Custom Post Type（例如作品集、課程），不然不要亂切。
2. Posts Per Page：一頁幾篇。可以從 9 或 12 開始，再依卡片欄數與效能調整。這通常是整個查詢的單一數值；響應式控制主要改變欄數與版面，不要預設手機版能單獨查詢較少文章。
3. Exclude Current Post：在單篇文章頁底部的「相關文章」列表，一定要勾這個，否則讀者會在相關文章裡看到他正在看的那篇，這是低級失誤。
4. OrderBy：首頁用 Date DESC（最新在前），但如果是「精選文章」列表，可改用 Manual Selection 或搭配一個「精選」標籤來篩，別再靠日期排序決定曝光。
5. Offset：搭配首頁的精選大圖用。例如首頁頂部已經用 hero 秀了最新一篇，那正下方的列表就用 Offset 1 跳過它，避免同一篇重複出現。
6. Filter By：用分類或標籤篩。這在做「主題叢集」的支柱頁時特別有用，你可以讓支柱頁下方的列表只顯示同一個叢集的文章。

進階一點，可以用 Taxonomy Filter 讓讀者在列表頁直接切換分類。文章量大、主題分明的網站通常更需要這類導覽，但沒有「超過五十篇就必須使用」的門檻。分類的排序邏輯也值得整理，分類排序教學有講怎麼調；如果對單篇文章的發佈與分類流程還不熟，WordPress 文章發佈教學能幫你理解列表資料從哪裡來。

AJAX 篩選的 SEO 代價

Elementor 的進階篩選常用 AJAX 動態切換。Google 能執行許多 JavaScript，但通常不會替使用者點擊每個篩選器或「載入更多」。如果深層文章只能透過互動後出現，抓取與發現就可能受限。較穩健的做法是讓初始 HTML 有意義的文章清單，並為重要分類提供可抓取的 <a href> 連結；AJAX 用來加強體驗，不取代可導覽網址。

列表頁是你主題叢集的支柱

分類列表頁可以成為主題叢集的導覽入口，但不會只因聚合文章就自動變成支柱頁或取得「主題權威」。要讓它有獨立價值，除了卡片連結，還應提供清楚的主題說明、分類邏輯與有用的瀏覽方式。

文章主題明確時，可以為主要分類建立各自的列表頁，並把最具代表性的內容放在容易找到的位置。分類頁是否會排名，仍取決於搜尋意圖與頁面本身是否有獨立價值，不能預設它會比單篇文章表現更好，也不存在把所有文章「權重收攏」後必然更強的公式。

所以當你在 Elementor 裡調 Query 的時候，多想一層：這個列表頁要服務的是哪一個主題叢集？它要向讀者與搜尋引擎展示的，是你品牌在這個領域的深度。把這個念頭放進去，Query 的每一個設定就會從「技術選項」升級成「內容策略的延伸」。

動態標籤：一張卡片模板，套用全站上千篇文章

如果你用 Loop Grid，那 Loop Template 裡幾乎每一個欄位都會用到 Dynamic Tags（動態標籤）。動態標籤是 Elementor 的核心武器，說白了，它讓你把「這個位置要顯示什麼」綁定到文章本身的欄位，避免把內容寫死成固定值。

常用的動態標籤列出如下，這幾個幾乎涵蓋一張卡片的全部需求：

• Featured Image：綁到圖片元件，自動抓該篇的特色圖。
• Post Title：綁到標題元件。
• Post Excerpt：綁到文字元件，顯示摘要。記得到 WordPress 文章編輯區手動寫摘要，不要讓它自動抓首段，自動抓常常抓到一段不吸引人的開場。
• Post Terms（Category/Tag）：綁到分類標籤色塊。
• Post Date / Author：綁到後設資料列。
• Post URL：綁到按鈕或整張卡片的連結，讓整張卡片可點。

動態標籤的真正威力在於一次設定、全站生效。你花一小時把 Loop Template 的六個區塊調到最好看的狀態，之後不管你新增十篇還是一千篇文章，列表頁都自動一致。這比逐篇手動排版省下的時間，是你能不能持續產出內容的關鍵。實務上，可以把 Loop Template 當成「品牌視覺規範」的實作層，它就是你網站的設計系統在文章層級的具體落地。

動態標籤的 fallback 與備援

動態標籤有一個細節容易被忽略：欄位沒有值的時候怎麼辦。例如某篇舊文章忘了設特色圖，Featured Image 就會是空的，卡片直接破圖。解法是點開那個動態標籤的齒輪設定，在 Fallback 欄位放一張統一的預設圖（一張帶品牌色或 logo 的佔位圖最合適）。Post Excerpt 同樣可以設 fallback 文字，避免沒寫摘要的文章出現空白。這些小設定花你十分鐘，卻能擋掉未來幾十篇舊文章造成的視覺破洞。實務上的底線是：任何一個動態欄位，都要假設它可能空值，並為那個空值準備一個不難看的退路。

如果你想要更多進階元件，例如閱讀進度條、文章瀏覽數、自訂卡片特效，第三方擴充可以補 Elementor 原生功能的不足，這份清單整理得蠻完整，挑的時候記得避開會拖慢速度的那一類。外掛裝多了列表頁就會變慢，這跟下一節要講的速度問題直接相關。

分頁與載入策略：100 篇文章別在同一頁倒出來

文章一多，分頁就會變成問題。Elementor 文章元件的分頁選項大致有四種：數字分頁（Numbered）、上一頁下一頁（Prev/Next）、載入更多（Load More）與無限捲動（Infinite Scroll）。這幾個不是看心情選，它們各自有效能與 SEO 的代價。

數字分頁通常是穩健的預設：每一頁有穩定 URL 與可抓取連結，讀者也知道目前位置。這不代表 Google 一定會索引每個分頁 URL，但能協助發現深層文章。無限捲動若沒有對應的分頁網址與連結，爬蟲可能無法透過捲動找到後續內容，頁尾也較難抵達。

分頁方式	SEO 友善度	讀者體驗	建議
數字分頁	高（每頁獨立 URL）	中（要主動點）	預設首選
Prev/Next	中	中	文章數量少時可用
Load More 按鈕	中（需搭配可索引的初始頁）	高	首頁精選區可用
無限捲動	低（深層文章難索引）	高但頁尾失效	不建議用在主列表

文章量大時，主列表可以用數字分頁，首頁的精選區再用 Load More 加強體驗。分頁 URL 應穩定且可直接開啟，例如 /page/2/ 這類路徑；它不是查詢參數，也不應只存在於無法分享的隨機 hash 狀態。

行動版排版：手機上的文章列表才是真正的戰場

這裡要給一個可能反直覺的事實：你精心設計的桌面版文章列表，大多數讀者根本不會看到那個樣子，因為他們是用手機看的。根據 Statista 的全球統計（2026 年 4 月），行動裝置佔整體網頁流量的比重長年過半，而且這個比例在內容導向的網站通常更高。換句話說，你的列表頁在 iPhone 上的樣子，才是它真正的樣子。

手機版的文章列表，有幾條鐵則：

• 欄數砍到一欄。桌面三欄、平板兩欄、手機一欄。一欄讓圖片有足夠寬度呈現，也讓標題不被擠到換行換得很難看。
• 圖片比例維持一致。手機雖然是一欄，圖片比例還是要和桌面版一致，不要因為一欄就把圖拉成超長條。
• 標題字級不要縮太多。很多人為了擠進更多卡片，把手機標題縮到很小，結果讀者根本看不清楚。寧可一頁顯示少一點，也要讓標題可讀。
• CTA 按鈕放進拇指熱區。手機上拇指自然落點在螢幕中下半部，閱讀全文按鈕或分頁控制項放在這個範圍，點擊率會明顯比較好。
• 分頁控制項夠大。手機上的數字分頁按鈕，點擊目標至少要有 44px 見方，否則讀者會點錯或點不到，直接放棄翻頁。

響應式設計的完整觀念，包括斷點與裝置優先的策略，寫在響應式網頁設計 RWD，這裡只點一個重點：在 Elementor 編輯器底下，記得切到行動裝置視窗逐項檢查，不要只用桌面視窗調完就收工。建議的做法是調完一個設定，就三個視窗（桌面、平板、手機）各看一次，確認沒有跑掉再換下一個設定。如果你同時也在做電商頁面，RWD 購物網站設計那篇用 Elementor 走過一次完整流程，手機版的處理邏輯是相通的。

手機版要敢於砍資訊

桌面版的卡片可以放六個區塊，手機版建議狠下心砍到剩下三個：特色圖、標題、以及一個清楚的點擊暗示（按鈕或箭頭）。分類標籤、摘要、後設資料這些在手機上往往變成雜訊，把卡片撐得很長，一頁只能看到一兩篇，讀者反而滑不出「這個站內容很多」的感覺。手機閱讀的本質是掃描，不是細讀，你給的資訊愈少、每一張卡片的視覺重量愈輕，讀者一頁能掃過的篇數就愈多，點擊的機會也就跟著變多。這個取捨聽起來像是在偷工，其實是把手機版的體驗目標重新校準：它在這個裝置上的任務是「引導點擊」，把細節留給點進去之後的單篇文章。Elementor 的響應式設定允許你針對手機視窗單獨隱藏某個元件，善用這個功能，你不用為手機版單獨做一套模板，只要在行動視窗把不要的區塊設成 Hide On Mobile 即可。

速度與 SEO：列表頁是高流量頁，效能就是排名

列表頁可能承接大量導覽流量，因此效能會直接影響閱讀與點擊。Google 將 Core Web Vitals 用於排名系統，但它只是整體訊號的一部分，良好分數不保證排名，慢頁也不等於必然被推到後面（速度對讀者的影響可見 web.dev 的說明）。第三方的相關性研究，例如 Backlinko 對搜尋結果的分析（2025 年 4 月），同樣不能證明載入速度是某個名次差異的單一原因。

那麼列表頁最常拖慢速度的兇手是什麼？答案很單調：圖片。一頁十二張卡片就是十二張特色圖，如果每一張都沒壓縮、沒轉成現代格式、沒延遲載入，首屏就會卡住。要特別注意的是，列表頁的 LCP 元素通常是第一張卡片的特色圖，因為它落在首屏最大可視區域，這代表你只要把那幾張首屏圖片顧好，整頁的 LCP 就能拉起來，成本遠低於把全部圖片都重度優化。建議把這幾件事列為列表頁上線前的檢查清單：

1. 特色圖統一壓縮。卡片縮圖實際顯示尺寸通常不超過 800px 寬，卻常有人上傳 4000px 的原圖。用壓縮工具先把圖壓到適合的尺寸與格式，圖片壓縮工具有完整的實測清單可以挑。
2. 啟用延遲載入（Lazy Loading）。首屏之外的卡片圖片延後載入，可以降低初次載入資料量；不要延遲載入可能成為 LCP 的首屏圖片。觀念與做法看Lazy Loading 延遲載入指南。
3. 用 WordPress 外掛做自動壓縮備案。即使你上傳前壓過，多一層 Smush 之類的外掛做自動轉檔還是划算的，WordPress 圖片壓縮指南把設定步驟走過一遍。
4. 顧好 Core Web Vitals 三指標。LCP（最大內容繪製）常被那張首屏的特色圖拖累，CLS（版位位移）常被沒設固定比例的圖片造成跳動，INP（互動到下一次繪製）則被過重的 AJAX 篩選拖慢。這三個指標的最佳化邏輯整理在Core Web Vitals 完全攻略。
5. 搭配快取外掛。列表頁是重複性高的頁面，非常適合快取。網站速度優化指南把快取與其他加速手法串起來，建議一起看。進一步還可以研究WordPress 快取外掛的實測比較，挑一套穩定的長期使用。

這裡要特別提醒一個常常被低估的 SEO 細節：列表頁本身的標題、描述、網址結構。分類頁的網址會自動帶分類 slug，這部分通常沒問題，但分類頁的 SEO 標題與描述預設是空的，你應該手動為每一個分類頁寫一段能吸引點擊的標題與描述。這件事和你在 WordPress 寫單篇文章的 SEO 邏輯是同源的，WordPress 部落格架站教學從主機到上線的流程裡會帶到這些基礎 SEO 設定。如果你想更系統化地整理全站的 SEO，WordPress 架站與 SEO 優化全攻略會是更好的起點，分類頁的優化只是其中一環。

常見雷區與實戰踩坑

這一段是誠實分享，把實務上常見的錯誤整理出來，讓你少走幾步冤枉路。

第一個坑：特色圖沒有備援。你設了 Loop Template 綁 Featured Image，結果某幾篇舊文章根本沒設特色圖，那幾張卡片就破圖。解法是在圖片元件設一個 fallback 預設圖，這樣沒有特色圖的文章至少有一個統一的佔位視覺，不會讓列表頁看起來像掉牙。

第二個坑：分頁的 canonical 處理。第二頁、第三頁通常不是第一頁的重複副本，因為它們連到不同文章。較穩健的預設是讓每個分頁有可抓取 URL 並使用 self-canonical；不要把所有分頁 canonical 到第一頁，也不要只因內容相似就 noindex。重複內容通常是 canonical 選擇問題，不是「處罰」。只有在確定不希望分頁出現在搜尋結果，且不會妨礙文章發現時，才另行評估 robots 設定。

第三個坑：為了美觀犧牲可點擊面積。有些設計會把整張卡片做成純圖片、標題用很淺的字疊在圖上，看起來很有質感，但在某些圖片上標題根本看不清楚，可點擊的連結區也只綁在一個小按鈕上。結果是漂亮的頁面、很低的點擊率。實務上的底線是：標題一定要夠清楚到能在縮圖狀態被讀懂，整張卡片盡量都可點。

第四個坑：忽略列表頁的內部連結價值。列表頁能協助讀者與搜尋引擎發現文章。重要內容不該只埋在深層分頁，但固定置頂也要符合讀者需求，不能把它當成排名保證。更好的做法是從相關分類說明、支柱頁與文章正文自然連入，而不是只靠手動精選列表。

第五個坑：列表頁沒有「無文章」的空白狀態。當某個分類或篩選條件剛好撈不到任何文章（例如新分類還沒寫內容，或篩選條件太嚴），Elementor 預設會顯示一片空白，讀者以為網站壞了。解法是設定一個「No Results」的訊息元件，顯示「這個分類還沒有文章，先看看其他主題」之類的引導文字，並放一個回到全部文章的連結。這個小動作能把一個失誤畫面變成一次導覽機會。

這幾個坑的共同點是：它們都不是「會不會用 Elementor」的問題，而是「有沒有把列表頁當成一個獨立的、需要被設計與優化的頁面」。工具會用之後，真正拉開差距的是這些細節。

五步行動方案：今天就升級你的文章列表

講了這麼多，給你一個可以今天就開始動手的版本。不需要一次做完，但照這個順序走，每一步都會帶來肉眼可見的改善。

1. 第一步：選定元件與建立 Archive Template。在 Theme Builder 新增一個 Archive Template，元件用 Loop Grid（新手先用 Posts Classic 也行），條件先設成 All Archives。這一步是地基，先讓全站分類頁統一版型。
2. 第二步：把卡片六個區塊調到一致。特色圖統一比例、標題字級與行數限制固定、分類標籤顏色綁品牌色、CTA 文字用動詞。這一步做完，列表頁立刻脫離「預設樣」。
3. 第三步：設定 Query 與分類篩選。確認 Posts Per Page 合理、Exclude Current Post 有勾、主題叢集的支柱頁用 Filter By 綁定對應分類。文章多的站加上 Taxonomy Filter，並為每個動態欄位補上 fallback。
4. 第四步：手機版逐項檢查。切到行動視窗，一欄排列、標題可讀、按鈕落在拇指熱區、分頁按鈕夠大。這一步通常是提升點擊率最多的一步。
5. 第五步：上速度與 SEO 檢查清單。圖片壓縮、首屏外延遲載入、Core Web Vitals、分類頁的 SEO 標題描述，以及分頁的 self-canonical 與可抓取連結。跑一次 PageSpeed Insights 並搭配真實使用者資料，把結果記下來當基準。

這五步走完，你的文章列表頁會從「只是把文章排出來」升級成「一個會替你的內容說話的店面」。而這件事的回報是長期的：每一篇你之後寫的新文章，都會自動落在這個已經被設計好的、高效能的列表裡，不需要再手動照顧。這就是用系統取代手工的價值，也是「為長期投資、不為單次發文」這個原則的核心。

如果你看完這篇，發現自己網站的列表頁問題其實牽涉到更深層的版面結構、主題叢集或整體內容策略，那往往不是調一個元件能解決的，這時候找一個熟悉 WordPress 與 Elementor 的顧問陪你走一遍，會比自己 trial and error 省下不少時間。這是其中一個可考慮的選項，不是義務；多數狀況下，你照著上面五步自己做，就能看到明顯改善。先動手，把第一版的列表頁架起來，剩下的我們再聊。