Elementor PRO 教學 (一) – 文章列表設定項目說明與實作演示

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略，Elementor 文章列表設定 – 在建立網站時為了提供更多其他頁面連結來指引使用者瀏覽順序，常常都會使用彙整頁( Achive ) 的方式將網站文章、頁面、產品等連結集中在單一網頁上提供給使用者直接瀏覽相關資訊，呈現更直觀的網站操作模式。

本篇文章要說明的就是如何運用 Elementor PRO 中的文章小工具，在網頁中快速建立彙整區域，在文章小工具中可以設定不同的來源類型，從一般意義上的文章、頁面到自定義文章類型都可以呈現，且在文章列表中可以決定要怎樣的方式呈現，包含圖片比例、標題顏色、描述長短、按鈕大小、甚至到列表單一文章之間的距離都可以做調整，不需要寫入程式碼，只要了解 Elementor 設定模式，就能快速上手建立文章列表的方法，在開始閱讀內文前，可以先觀看下方 Elementor 文章小工具的介紹影片，之後會比較容易上手。接下來跟著鵠學苑的腳步，讓我們開始學習吧！

Elementor PRO 外掛購買
https://elementor.com/pricing/
Elementor PRO 外掛特色介紹
https://elementor.com/features/

Elementor PRO 外掛購買與安裝

第一步：進入到上方提供的連結，選則適合自己的方案後使用信用卡購買。特別提醒，鵠學苑本身也是透過購買才能使用此外掛，因此沒有提供任何免費版或試用版，同時我們也不會因為你的購買收到任何佣金或分潤，也不保證安裝此外掛與你的網站不會發生任何問題，在安裝前建議要先確認外掛與 WordPress 版本，才能將風險降到最低。

第二步：購買完成後在 My Account 中可以下載外掛壓縮檔，下方的 License Key 是用來在網站後台驗證外掛，讓外掛可以具有自動更新的功能。

第三步：下載 Elementor PRO 壓縮檔後上傳至網站中。

第四步：在 Elementor 許可證選項中連結購買帳戶，或者輸入 License Key，讓外掛有更新時可以第一時間收到通知。

Elementor 文章列表建立與設定

第一步：以 Elementor 開啟編輯頁面後，在左方小工具列中可以找到專業版（有時候顯示為 PRO），將文章小工具直接拉到虛線區域中。

第二步：加入後預設來源為文章，在佈局方面可以選不一樣的呈現方式，這部分可修改的包含圖片、標題、描述、連結的相對位置，特色圖片來源、要顯示哪些文章資料比如分類、標籤、建立時間、作者等，細部操作方式請參考下方影片。

第三步：內容中的查詢區域是設定要顯示哪一類的文章來源，可設定顯示條件，比如只顯示單一分類、排除當前文章頁等，排序則可以按照日期、標題、隨機等方式呈現，詳細操作畫面請參考下方影片。

第四步：內容中分頁的設定是對頁碼呈現外觀做編輯，包含顯示為頁數、是否加入上下頁按鈕等，這部分相對容易，就不再細談。

第五步：點擊第二頁籤 – 樣式，第一個佈局選項可以決定每一篇文章項目之間的間距與標題、文字大小、行高、顏色等細節，設定方式請參考下方影片。

第六步：Elementor 也可以設定在不同裝置上文章列表的顯示方式，切換方式是在下方白色小圖示中選擇手機圖案，就會顯示可切換的裝置畫面，分為桌面（桌上型電腦）、平板、手機三種，以欄位為例，如果想要在平板電腦上只顯示兩欄，可以在左方佈局中的欄選項點選中間的平板圖示後，接者修改右方下拉選單的數字為 2 後就完成了。

第七步：在進階設定中可以決定目前編輯的文章列表要在哪一種裝置上顯示，以下圖為例，如果要在手機上隱藏文章列表，只要點擊在手機上隱藏右邊的開關至藍色，文章列表就只會在電腦、平板上顯示。

編輯文章列表在不同裝置上的外觀樣式操作方法請參考下方影片。

結語：

Elementor PRO 中具有很多實用的小工具，後續鵠學苑也會針對常用於網站架設功能的部分做單一文章介紹，為避免篇幅過長，大部分的細節操作都會使用影片錄製呈現，如果説對影片播放的操作內容不了解，歡迎在下方留言，鵠學苑會盡力解答每一位朋友的問題。

今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新 WordPress 教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到 鵠崙設計 做線上免費諮詢喔！我們下次的教學見～