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

Elementor 文章列表設定 內容綱要:

1. Elementor PRO 外掛購買與安裝

2. Elementor 文章列表建立與設定

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

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

Elementor PRO 外掛購買:https://elementor.com/pricing/

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

Elementor 文章小工具操作說明:https://docs.elementor.com/article/101-posts

• Elementor PRO 外掛購買與安裝

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

Elementor 文章列表設定

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

Elementor 文章列表設定

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

Elementor 文章列表設定

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

Elementor 文章列表設定

• Elementor 文章列表建立與設定

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

Elementor 文章列表設定

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

Elementor 文章列表設定

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

Elementor 文章列表設定

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

Elementor 文章列表設定

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

Elementor 文章列表設定

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

Elementor 文章列表設定

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

Elementor 文章列表設定

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

結語:

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

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

Elementor 相關教學文章:

網站架設知識推薦閱讀:

WordCamp Taipei 2019 專屬 WordPress 跨國交流活動開跑了!

Elementor 網頁編輯器 突破 300 萬下載次數,最受歡迎的外掛!

WordPress SEO 項目 – 10 項一定要知道的網站 SEO 優化技巧

分享在 facebook
Facebook
分享在 google
Google+
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top