Crocoblock是什麼？(20個Elementor超好用外掛介紹)

2023 年 3 月 6 日

Crocoblock是什麼？

Crocoblock是知名WordPress頁面編輯器Elementor的第三方外掛，主打動態內容，不需要會程式碼，也能用Crocoblock做出許多原本寫程式才能製作的網站，像是預約、出租、訂房、客製化使用者介面、客製化WooCommerce等。

這是一款外掛，但它也是「主題編輯器」，只要有Crocoblock，你不需要額外再去購買其他主題，甚至也不一定需要Elementor pro，就能輕鬆建立精美實用的網站。

查看Crocoblock使用者們製作的精美網頁

Crocoblock

Websites built with Elementor and Crocoblock Check out websites created with Elementor and Crocoblock plugins

查看官方提供的預約、出租、訂房模版

Crocoblock

Dynamic Templates for Elementor | Crocoblock Dynamic website templates by Crocoblock. Dynamic content tuned and ready. AJAX filters, booking functionality, Profile Builder, and more.

除了Elementor外，隨著古騰堡編輯器(Gutenberg)的發展，官方也開始逐步提供對Gutenberg的支援，目前可搭配Gutenberg使用的外掛有JetEngine、JetSmartFilters、JetGridBuilder(免費)、JetSmartFilters、JetBooking、JetReviews、JetAppointment、JetPopup、JetProductGallery、JetSeach、JetMenu等。

Crocoblock介紹

Crocoblock總共包含了18款外掛：

外掛	功能簡介	Elementor 支援	Gutenberg 支援
Jet Elements、Jet Tricks、Jet Blolcks	類似Elementor提供的功能，但視覺效果更豐富	✅	🔺
Jet Engine	動態內容，提供網頁介面完全客製化(類似ACF / Metabox)	✅	✅
Jet Tabs	網頁內的tab	✅	🔺
Jet SmartFilters	篩選功能	✅	✅
Jet Booking、Jet Appoinment	預約、預定功能	✅	✅
Jet Woobuilder	自定義WooCommerce相關頁面	✅	🔺
Jet Productgallery	WooCommerce單一商品頁面圖片佈局	✅	✅
Jet Compare&Wishlist	願望清單、商品比較	✅	🔺
Jet Popup	彈出視窗小部件	✅	✅
Jet Reviews	商品評論功能	✅	✅
Jet Menu	選單功能	✅	✅
Jet Search	搜尋功能	✅	✅
Jet Blog	部落格呈現功能	✅	🔺
Jet Style Manager	頁面載入資源控制	🔺	✅
Jet ThemeCore	主題建構器	✅	✅
Jet FormBuilder	表單功能	🔺	✅
Jet GridBuilder	Grid排版功能	✅	✅

Jet Elements、Jet Tricks、Jet Blolcks(與Elementor功能相似，但視覺效果更豐富)

這三個外掛中，有很多Elementor原先就有提供的功能，但視覺效果更加豐富，能夠製作動態的內容顯示，例如在圖片裡隱藏折扣碼，需要手動擦除後顯示折扣。你可以在這查看Jet elements、Jet tricks、Jet Blolcks提供的小部件功能細節。

Jet Engine(動態內容)

Jet Engine是Crocoblock裡的重量級外掛，不需要會程式碼，也能夠自定義WordPress的結構、分類等各種客製化功能。可以直接在Elementor編輯介面內，直接用拖拉的方式，將事先在Jet engine裡設定好關連的資訊（標題、內容、日期、價格等等），呈現出來。

舉例來說，原本預設的WordPress只提供「頁面」、「文章」之類的分類，WordPress會將文章的標題與內容對應關連，點擊部落格文章後，想看「A標題」就會出現「A內容」而不是「B內容」。

Jet engine則提供更大的客製化功能，例如新增一個「服務」分類，可以在這個服務分類下新增自己想設定的欄位如「標題」、「內容」、「日期」、「價格」等，並在Elementor、Gutenberg編輯器內呈現出來，打造完全客製化的頁面，像是客製化個人資料頁面、目錄類型的網站。

目前市場上與Jet Engine同類型的外掛有ACF(Advanced Custom Fields)、Meta Box、Toolset等，你可以在下方連結查看功能的比較表。

Crocoblock

JetEngine vs. Toolset vs. ACF vs. Meta Box: Feature Comparison JetEngine dynamic plugin compared to Toolset, ACF, and MetaBox functionality. Catch-all feature comparison.

透過Jet engine外掛，能自定義每個頁面要呈現的項目，像是下方官方提供的demo，同時能搭配Jet smartfilter快速篩選，從自定義的欄位中快速篩選，除此之外，還可以自定義地圖上標記的資訊、或點擊後彈出的頁面，以及自定義日曆的樣式與內容；結合Jet booking、Jet appointment預約外掛，直接在網頁內進行預約、付款。

透過Jet engine，還可以搭配Jet smartfilter，快速篩選出想要的內容

結合Jet booking、Jet appointment預約功能，直接線上付款，並可加入google行事曆提醒

Jet Tabs(網頁內的分頁)

Jet Tabs是一個能在同一個頁面內，呈現多個小分頁的功能，你可以直接透過點選，在頁面內切換不同內容。
這個外掛總共提供4個小部件，分別是Switcher（下圖左上功能）、Tabs（下圖左下功能）、Classic Accordion（下圖右上功能）、Accordion（下圖右下功能）。

看起來與其他相類似外掛沒有特別差異，但他真正的功能是與Jet Engine結合，顯示任何自定義的動態內容，具體的功能介紹可看官方的介紹頁面。

Jet SmartFilters(篩選功能)

Jet SmartFilters是WordPress裡非常好用的篩選器，除了常見的商品篩選，也能用在Jet Engine裡任何動態內容的篩選。與Google地圖整合，篩選的結果可直接顯示在Google地圖上。在手機上，還可以搭配Jet Popup，將篩選功能放到彈出的小頁面內進行篩選。

提供的篩選類別有：

搜尋
多層選單(ex假設要找秋季服裝裡的白色系衣服，先選「春夏秋冬，再選衣服色系」)
複選框
下拉選單
價格區間
顏色
評分
排序(可選擇依造標題、日期排序)
日期

以下則是官方提供的篩選功能示意圖。你可以在這裡查看Jet SmartFilters與Toolset、FacetWP、Search & Filter Pro外掛功能比較表。

Jet Booking、Jet Appoinment(預約、預定功能)

Jet Booking和Jet Appoinment都是提供預約類型的外掛，差別在前者主要提供自行車、汽車、旅館、設備、公寓等以「天」為單位的預約；後者則是提供任何服務以「小時」為單位的預約。兩種外掛都能結合Google日曆提醒、WooCommerce結帳付款。

Jet booking除了Google日曆外，也提供Integromat、Zapier、iCal synchronization等達到自動化協作的功能。同時這個外掛也需要搭配Jet engine才能正常使用喔。由於功能過於複雜，建議直接觀看官方提供的租車網站模版、旅館網站模版查閱具體功能。你還可以在這裡查看Jet Booking與WooCommerce Booking、MotoPress Hotel Booking三個外掛的功能比較表，確認是否有符合你需求的功能細節。

Jet Appoinment跟Jet Booking一樣也需要搭配Jet Engine使用，相比Jet Booking可以選擇小時為單位的預約時段。你可以查看官方提供的理髮店預約網站模版、醫療服務預約網站模版。除此之外，在這裡還可以查看Jet Appoinment與BookingWP、BirchPress、Amelia、Bookly Pro的功能比較表。

Jet Woobuilder(自定義WooCommerce相關頁面)

Jet Woobuilder主要提供頁面重新佈局與透過專屬的Elementor小部件設計的功能，能自定義我的帳戶、購物車、結帳、商品分類、商品、感謝頁面內容。如果想要在我的帳戶my account頁面新增其他選項、新增商品的特別內容，則需要透過Jet Engine來達成。在這裡你可以查看官方提供的DEMO網站，操作教學請看這篇。

透過Jet woobuilder建立的商品頁面搭配Jet smartfilter的篩選功能

Jet Productgallery(WooCommerce單一商品頁面圖片佈局)

Jet Productgallery提供4種不同的樣式，呈現單一商品頁面內的圖片。也支持插入影片內容。

Jet Compare&Wishlist(願望清單、商品比較)

Jet Compare&Wishlist能為你的商品頁面添加收藏按鈕，建立願望清單，並比較任何商品的具體細節。

Jet Popup是一款提供彈出視窗的小部件，提供以下不同資訊彈出，或者客製化Elementor能做出的任何內容。同時也能設定彈出的條件，如開啟/關閉網頁、頁面滑動時、點擊時、特定時間等條件觸發彈出，也能搭配Jet SmartFilters做彈出的篩選框。

訂閱
折扣
選擇
倒數
聯絡
資訊卡
GDPR
Cookie

Jet Reviews(商品評論功能)

Jet Reviews能提供商品評論功能，使用此外掛後，使用者可以查看以下內容，並能搭配評論者驗證(訪客/註冊會員)、投票(喜歡/不喜歡)、身份驗證(名稱/電子郵件/reCAPTCHA v3)功能使用。

單一商品內的評論總數
評論表格
評論摘要
評分(星數/評分/百分比呈現)
評論內容

Jet Menu(選單功能)

Jet Menu提供Mega選單功能，你可以在選單內放入任何Elementor能製作的內容(只要你不怕網頁變慢)，不管是水平、垂直測邊欄或者Hamburger選單都能輕鬆完成。有著豐富的動畫特效與預設不同的樣式選擇。你可以查看Jet Menu與Clever Mega Menu、Uber Menu、Max Mega Menu、Wp Mega Menu by Themeum的功能比較。

Jet Search(搜尋功能)

Jet Search能搜索WordPress內的任何內容，使用AJAX增加搜索效率、能事先自定義在特定的類型、分類、標籤中進行搜索，並按照相關性排列，以及自定義呈現的搜尋結果排列方式。

Jet Blog(部落格呈現功能)

Jet Blog提供六個Elementor小部件，非常適合想要快速製作部落格版面的使用者。

影片播放列表
文章區塊分頁
文章輪播
由左到右動態顯示文字(新聞或股票行情)
文章小部件
Smart Post

Jet Style Manager(頁面載入資源控制)

Jet Style Manager是Crocoblock裡的外掛內容加載控制器，透過設定不同的網頁加載等級，能讓網頁速度加快20-30%，幫助創造出更好的網頁瀏覽體驗。

Jet ThemeCore(主題建構器)

Jet ThemeCore是Crocoblock裡的主題建構器，搭配任意的主題，Jet ThemeCore都能幫助你製作出Header、footer、產品頁、404 page、文章模版，並擁有比Elementor Pro更豐富的模版庫(1000+)，對於任何想要快速建立形象網站的使用者，Jet ThemeCore是一個不錯的選擇。