Elementor 教學

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 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

Elementor 相關教學文章:

網站資訊文章推薦

內容行銷到底要多久才能見效呢?撰寫內文時一定要遵循的潛規則!
SEO到底追不追的完?文章怎麼寫!
Google Search2020再進化,如何提升網頁品質?

Share
Published by
鵠學苑