/
/
Elementor 教學 – 如何使用 JetEngine 客製網站
Elementor 教學

Elementor 教學 – 如何使用 JetEngine 客製網站

JetEngine 是 Crocoblock 的 Elementor 擴充外掛之一,它擁有許多功能,如:自訂文章類型 (Post Types)、自訂文章列表樣式 (Listings)、自訂欄位 (Meta boxes) 等,透過 Query 的設定可以組合出千變萬化的功能,讓 Elementor 可以做出獨一無二、方便管理的客製網站。本篇文章將分享使用 JetEngine 客製網站的心得與技巧。

事前規劃

在架設網站時,你們是如何開始的呢?我在架設 WordPress 網站時,還是比較習慣使用一般架設網站的設計流程,雖然 WordPress 有很多現有的範本可以選擇,但我認為如果想掌握網站整體的架構需要一個縝密的事前規劃,例如:配色、區塊的安排、文字的一致性等,有好的事前規劃,如同一棟房子有穩固的地基,將來在維護以及更新上才會事半功倍。目前常用的介面設計工具是 Figma,其他常見的設計工具如 Photoshop、Illustrator,過去甚至有收過客戶使用 Excel 規劃網站;最簡單的方式就是用紙、筆紀錄在哪些頁面預期使用什麼外掛或是什麼方式進行開發。

想了解更多網頁色彩規劃,可以閱讀:網站色彩計畫 (2022 最新) 🙂

elementor 052
使用 Figma 進行設計規劃

自訂文章類型 (Post Types) 不用安裝 WooCommerce 也可以製作出型錄網站

若你的網站不需要使用到金流,單純只是介紹商品,可以使用 JetEngine 的 Custom Post Type,為商品新增一個文章類型 (Post Type),如此一來就不用安裝 WooCommerce,以節省主機資源,也方便管理商品頁面,不會與網站文章、頁面混在一起。

elementor 053
使用 JetEngine 的 Custom Post Type 為商品新增一個文章類型

🔗 官方文件:JetEngine: How to Create a Custom Post Type

利用 Taxonomies 設定文章類型的分類與標籤

若需要在自訂文章類型加入分類以及標籤,如同 WordPress 後台文章預設的功能,可以透過 Taxonomies 進行設定。在設定 Taxonomies 時,分類以及標籤是要個別設定的,若要設定分類,可以在 Advanced Settings 裡面將 Hierarchical 開啟,這樣才會有分類的功能。
另外在設定 Taxonomy Slug 要避開 WordPress 已有的 Slug,如 category、tag 等,否則無法創建。

elementor 054
新增文章類型的分類時,需要至 Taxonomies / Advanced Settings 將 Hierarchical 開啟

🔗 官方文件:JetEngine: How to Create a Custom Taxonomy

自訂文章列表樣式 (Listings) 讓文章列表不拘限於佈景主題

佈景主題所提供的文章列表樣式並不多,有的只能控制顯示、隱藏部分項目,可以做的編排相當有限,如果需要特定的編排方式,可以使用 JetEngine 的 Listings 搭配 Dynamic Field 完成。其製作方式與使用 Elementor 編排大同小異,只需要注意文章標題、精選圖片等內容要使用 Dynamic Field 和 Dynamic Image 產生,這樣才可以應用在任何文章上面。

elementor 055
使用 Elementor Pro 的 Dynamic Tags 產生的文章標題

🔗 官方文件:JetEngine: How to Create a Listing Template for Post Types

減少 section、column 的使用

由於 Listings 所產生的文章列表樣式會放置在文章列表頁中,一般列表頁會設定 6 ~ 12 篇或是更多的文章顯示在文章列表頁中,這時候就要避免使用太多的 section、column 編排,否則會產生太多程式碼包覆內容,增加頁面讀取時間。我們可以善用 Elementor 的自訂定位編排出現在 Listings 的物件。

elementor 056
使用 Elementor 進階 / 自訂定位,編排出現在角落的文章分類

使用 Listing Grid injections 讓文章列表編排更多樣

若希望文章列表呈現不同樣式、色彩進行編排,可以使用 Listing Grid injections 達成,使文章列表編排更多樣、豐富。

elementor 057
開啟 Listing Grid injections 後,可以在 Listing Grid 設定兩種以上的 Listing

🔗 官方文件:JetEngine: How to Use Alternative Listing Template Injections in Listing Grid

透過 Query 設定文章列表收錄的內容

Listing Grid 透過 Query 的設定可以控制要顯示的文章,例如顯示特定分類、日期、作者等。Query 可以設定的條件相當多,要經過多方嘗試、測試才可以設定出想要的效果。

elementor 058
設定 Terms Query 顯示特定分類的子分類

🔗 官方文件:JetEngine: Listing Grid Posts Query Overview

自訂欄位 (Meta boxes) 讓網站更好維護、更新

JetEngine 的 Meta boxes 可以在指定的文章類型加入自訂欄位,利用 Elementor 的主題建構器製作 Single Post,並使用 Dynamic Tags 串接自訂欄位,可以讓網站編輯人員透過 WordPress 後台輕鬆更新資料。

elementor 059
利用 Meta boxes 在文章後台加入自訂欄位

使用 Dynamic Repeater 輕鬆新增商品規格

若自訂欄位屬於重複、需要新增的資料,使用 Dynamic Repeater 即可透過後台操作,輕鬆新增資料。

elementor 0510
使用 Dynamic Repeater 新增商品規格

🔗 官方文件:JetEngine: Dynamic Repeater Widget Overview & Creation Process

使用 Dynamic Visibility 控制物件顯示、隱藏

開啟 Dynamic Visibility 後,在 Elementor / 進階 / Dynamic Visibility 即可進行設定,可以設定的條件相當多,例如登入、登出按鈕可以藉由 Dynamic Visibility 設定,在使用者在登入時隱藏登入按鈕。

elementor 0511
使用 Dynamic Visibility 設定在特定的分類才會顯示文章列表

🔗 官方文件:JetEngine: Dynamic Visibility Module Options Overview

碰到問題問客服最快

沒有人比客服還要了解設定,當操作碰到問題或卡關時,就大膽的請教客服吧!
🔗 Crocoblock 客服:https://support.crocoblock.com/support/home

提問的小技巧

若英文沒有把握,可以透過 Google 翻譯,把問題的關鍵字寫出來,最重要的是附上你的網址與截圖,把有問題的部分標註出來,我想客服大概也能夠理解你的問題是什麼,最後記得附上 “Thanks!” 表示禮貌。

elementor 0512
只要不是假日,發問的問題大多在當天就可以得到回覆

客服無法為你解決的問題

  • 與他們的產品無關的問題,例如:主機、WooCommerce 設定等
  • 與 CSS、JavaScript 有關的問題,客服不會幫你寫任何程式碼

小結

JetEngine 的功能相當強大,讓我省下安裝不少外掛,雖然部分設定相對複雜,需要經過好幾次的嘗試才可以達成想要的效果;也因為有 JetEngine,讓我在製作網站時,可以替客戶加入一些方便維護、更新的功能,例如:自訂文章類型、自訂欄位等,藉由自訂文章列表樣式,使網站的編排更多樣,不拘限於佈景主題所提供的樣式。

廣告
延伸閱讀
相關標籤:
SHARE
WRITTEN BY
Hend Chen
Hend Chen
嗨,我是 Hend!專長於網頁設計 、UI 設計、品牌設計,熱愛參與社群活動、分享設計新知。我的英文名字取自中文名字發音,發音和手的英文 “hand“ 沒有差異,如果您正面臨網站設計的困擾,我很樂意成為協助您的那雙手!

目錄

Subscribe