fbpx
WP Engine 主機優惠:首 4 個月免費 | 優惠碼:JULYCWV

什麼是 Qubely?強化區塊編輯器的功能

預計在 2021 年至 2025 年之間,新型的 WordPress 區塊編輯器(Block Editor)的支援和擴充功能的工具包將會大放異彩,從之前推出 Gutenberg Editor 或俗稱的【古騰堡編輯器】發展至今,已經有大量開發廠商加入研究更強更快的區塊(Block)。當中我們找到非常亮眼的代表【Qubely】,還有很多後起之秀正睦續冒起當中,在可見的將來,大家可能會進入【完全不需要使用和依賴像 Elementor 等的第三方頁面編輯器】的工具,也可以制作快速和令人驚歎的網站作品。

什麼是 Qubely?

預計在 2021 年至 2025 年之間,新型的 WordPress 區塊編輯器(Block Editor)的支援和擴充功能的工具包將會大放異彩,從之前推出 Gutenberg Editor 或俗稱的【古騰堡編輯器】發展至今,已經有大量開發廠商加入研究更強更快的區塊(Block)。當中我們找到非常亮眼的代表【Qubely】,還有很多後起之秀正睦續冒起當中,在可見的將來,大家可能會進入【完全不需要使用和依賴像 Elementor 等的第三方頁面編輯器】的工具,也可以制作快速和令人驚歎的網站作品。

Qubely 是功能齊全的區塊編輯器支援和擴充功能工具包,具有大量自定義和帶有不同功能【Block 區塊】,大量(Pre-made 預制)的套件和範本可供套用,可以輕鬆建立專業的網站。它最小化了區塊編輯的限制,並為區塊編輯上任何簡單到復雜的設計,提供了無限的可能性。Qubely 是一個對用戶友好的【Block 區塊】外掛 ,具有必要的自定義功能和高級功能。使用其中缺少的許多自定義塊擴展默認的WordPress Gutenberg編輯器。控制您的網站設計並應用Qubely中提供的即用型樣式選項。創建出色的網頁以及針對移動設備進行了優化的網頁。

什麼是區塊編輯器?

認識 WordPress 的基本觀念

在 WordPress 5.0 的版本之後,官方以全新的編輯器取代老舊和日久失收的【Classic Editor 傳統編輯器】,用全新和較主流的【Block 區塊】來設計文章和頁面,雖然對老用家來說,帶來一定程度的不方便和需要一段適應期。但官方數據指出 WordPress 的新用戶對區塊編輯器的接受程度很高,不竟 WordPress 是存在超過 10 的內容管理系統,如果希望了解如何使用區塊編輯器建立文章的過程,請參考下方的完整教學連結。官方會提供的完整技術支援及維護直至 2022 年,或視需要延長/縮短期限。依照預設,這個外掛會隱藏新式區塊編輯器 (含 Gutenberg 外掛) 所提供全部功能。

官方網站

什麼是 Qubely?強化區塊編輯器的功能

Qubely 的開發公司是知名的 Themeum 團隊,公司已經有很多優秀的 WordPress 外掛作品,雖然並非一線的水平,但在不少新的領域有不少前衛作品,這裡由於篇幅有限,就不逐一介紹和評價,如果您使用 Qubely 覺得很不錯,可能留意一下他們的關聯外掛和佈景主題作品與服務。

外掛目錄資料

什麼是 Qubely?強化區塊編輯器的功能

由於 Qubely 是一個新產品,市場上約有 1 萬個使用者,跟像 Elementor 等的第三方頁面編輯器相比,市佔率有非常巨大的差距,市場上的中文教學也沒有太多,但我在深入研究後發現非常值得推廣給廣大的中文使用者,我深信區塊的應用,會是未來 WordPress 發展的主要趨勢所在。

超過 161+ 個功能 Block 區塊,方便混合應用

預計在 2021 年至 2025 年之間,新型的 WordPress 區塊編輯器(Block Editor)的支援和擴充功能的工具包將會大放異彩,從之前推出 Gutenberg Editor 或俗稱的【古騰堡編輯器】發展至今,已經有大量開發廠商加入研究更強更快的區塊(Block)。當中我們找到非常亮眼的代表【Qubely】,還有很多後起之秀正睦續冒起當中,在可見的將來,大家可能會進入【完全不需要使用和依賴像 Elementor 等的第三方頁面編輯器】的工具,也可以制作快速和令人驚歎的網站作品。

直到現在為止,可以使用的【Block 區塊】已經高達 161 個,而非初期影片的 120 個,更新和成長的速度非常快,在下方我們會盡量逐一介紹和示範,當然大家也可以上官方網站瀏覽是最更新(Update),如果您本身有使用主流的頁面編輯器如 ElementorBeaver Builder 或 Brizy 等等,轉換到使用區塊編輯器應該很輕鬆應對。

提醒:【Block 區塊】適合用於撰寫【文章 Post】

為什麼要特別提醒,因為版型有分為(部落格的兩或三欄排版)和頁面常見的(100% 寬度或一頁式頁面),這 160+ 區塊可以個別運作,但如果希望組合成複雜的群組等等就不適用,這點應該盡量讓頁面保持簡單和乾淨。

提醒:從 Starter Packs 匯入的【Block 區塊】的差異

從 Starter Packs 匯入的範本 Demo,預設是適合(一頁式網頁)或(100% 寬度網頁),所以如果站長強行在部落格的兩欄版型套用 Starter Packs 的預設範本,會有跑版和出界的問題,調整非常困難,所以不推薦在部落格的文章裡,套用這系列完整的 Demo。

提供 41+ 個網站範本 DEMO,一鍵套用

預計在 2021 年至 2025 年之間,新型的 WordPress 區塊編輯器(Block Editor)的支援和擴充功能的工具包將會大放異彩,從之前推出 Gutenberg Editor 或俗稱的【古騰堡編輯器】發展至今,已經有大量開發廠商加入研究更強更快的區塊(Block)。當中我們找到非常亮眼的代表【Qubely】,還有很多後起之秀正睦續冒起當中,在可見的將來,大家可能會進入【完全不需要使用和依賴像 Elementor 等的第三方頁面編輯器】的工具,也可以制作快速和令人驚歎的網站作品。

Qubely 的 Starter Packs 範本,是協助站長快速和高效制作網頁的利器,直到 17 / 01 /2021 年為止,已經更新到 41 套的範本 Demo。每一個 Demo 是一個簡單網站的組成頁面,例如您選擇一個企業形象的 Demo 匯入,內裡分別會提供如下的頁面,例如【關於我們 About Us】、【公司背景 Company Background】、【產品 Products】、【服務 Service】和【聯絡我們 Contact Us】等等,然後您可以從這些預制的頁面修改內容和圖片,便能立即建立一個簡單的網站。

提醒:部落格結構不適合從 Starter Packs 匯入

承上一個章節,由於【文章 Post】的結構很規範和限制,並不適合這類(天馬行空)的創意頁面,而且寬度一般不會使用 100% 寬度,勉強套用會出現跑版和格格不入的感覺。撰寫文章時,還是推薦逐個區塊套用比較合適和迎合部落格的風格。

提醒:可以匯入(一頁)的,不一定要(整套)

如果您十分喜歡 Starter Packs 範本裡的(其中一頁),Qubely 是允許單獨匯入,避免匯入多餘和無用途的頁面,因為當中可能包含圖片素材和相關頁面,保持網站簡潔和輕盈也是站長的責任之一喔。

推薦觀看 2 分鐘簡短介紹影片

如何【安裝】Qubely 外掛?

如何安裝 Qubely

步驟一

在您的 WordPress 網站後台,在【外掛】裡選擇【安裝外掛】。

步驟二

進入【安裝外掛】的介面,在右方的(搜尋欄位)輸入【Qubely】。

步驟三

稍等片刻,您會看到【Qubely】的外掛資訊出現,請確保是如圖中的那個外掛。

溫暖提醒:

就算您購買了付費版的【Qubely】的外掛,還是需要預先安裝免費版的【Qubely】的外掛,這兩個版本共存,才能發揮作用,請注意這點。

如何【啟用】Qubely 外掛?

如何【啟用】Qubely 外掛?

步驟一

在您的 WordPress 網站後台,在【外掛】裡選擇【已安裝外掛】。

步驟二

從外掛清單之中,找到免費版的【Qubely】的外掛,並按下【啟用】,這代表您希望使用 Qubely 作為您其中之一個區塊功能和工具包。

步驟三

如果有購買了付費版的【Qubely】的外掛的朋友,可以在啟用免費版之後,接著按下【啟用】。

溫暖提醒:

官方建議優先安裝免費版的【Qubely】的外掛,然後再安裝付費版,可以減少不必要的錯誤,請注意這點。

如何【刪除】Qubely 外掛?

如何【刪除】Qubely 外掛?

步驟一

在您的 WordPress 網站後台,在【外掛】裡選擇【已安裝的外掛】。

步驟二

從外掛清單之中,找到免費版的【Qubely】的外掛,並按下【刪除】,這代表您希望終止使用 Qubely 作為您其中之一個區塊功能和工具包。

步驟三

付費版的【Qubely】的外掛的刪除動作如上,但這不代表您不需要支付【續約的費用】,請上官方網站確認授權狀況和取消自動續約,才算完結了這工作。

【停用】或【刪除】Qubely 外掛會發生什麼?

如何【刪除】Qubely 套件?

由於 Qubely 是免費的外掛,您可以永久一直免費使用,但這裡需要提醒,如果曾經使用這工具建立的內容,您現在希望停用和移除外掛,會出現【外觀】無法顯示的問題,一般狀態 WordPress 會保留內容,您也可以輕鬆的按下【保留 HTML 程式碼】,或者轉換為其他區塊。

提醒的信息如下:
這個網站不包含對 [qubely/button] 區塊的支援,內容作者可選擇保有這個區塊的完整性、將它轉換成 [自訂 HTML] 區塊,或將其完全移除。

只要您重新安裝和啟用 Qubely 就能立即回復正常狀態,這個所有 WordPress 區塊都會出現的情況,新手一般不用擔心。


實用和推薦功能介紹

實用和推薦功能介紹

點擊下方功能,前往官方網站瀏覽功能效果

下方整理了完整的功能清單,您可以點擊預覽,也我們拉下去,看看我們的展示效果。

Qubely Free 免費版功能

  • Row(欄位)
  • Advanced text(進階文字段落)
  • Button(按鈕)
  • Icon(圖標)
  • Google Map(谷歌地圖)
  • Divider(分隔線)
  • Info Box(資訊區域)
  • Image(單張圖片)
  • Testimonial(證言)
  • Accordion(摺疊頁籤)
  • Heading(標題)
  • Video Popup(彈出式影片視窗)
  • Table of contents(文章目錄)
  • Gallery(圖庫 / 畫廊)
  • Progress Bar(進度條)
  • Counter(計數器)
  • Tabs(頁籤 / 分頁)
  • Social Icons(社交媒體圖標)
  • Contact Form(聯絡表單)
  • Button Group(按鈕群組)
  • Advanced List(進階列表)
  • Block Wrapper()
  • Team(團隊成員)
  • Pricing(價格表)
  • Timeline(時間軸)
  • Animated Headline(動畫標題)
  • Pie Progress(圓形進度條)

Qubely Pro 付費版功能

  • Form Builder(表格產生器)
  • Advanced Gallery(進階圖庫 / 畫廊)
  • Image Carousel(圖片跑馬燈)
  • Post Carousel(文章跑馬燈)
  • Post Grid(文章網格)
  • Price List(進階價格表)
  • Team Carousel(團隊成員跑馬燈)
  • Testimonial Carousel(證言跑馬燈)
  • Media Card(媒體卡片)
  • Vertical Tab(垂直頁籤)

Row(欄位)- 展示 Demo

這是【單欄位】,寬度佔 100%

我是【雙欄位之一】,寬度佔 50%

我是【雙欄位之一】,寬度佔 50%

我是
四欄位之一
寬度佔 25%

我是
四欄位之一
寬度佔 25%

我是
四欄位之一
寬度佔 25%

我是
四欄位之一
寬度佔 25%

評價:

欄位是非常常用的排版功能,雖然沒有什麼特別,但如果要整理獨特的版型,這功能不可或缺,還有不按比例的欄位選擇,千奇百趣。

Advanced text(進階文字段落)- 展示 Demo

(模擬標題)WordPress基金會

(模擬內文)WordPress 是一個以 PHP 和 MySQL 為平台的自由開源的部落格軟體和內容管理系統。WordPress 具有外掛程式架構和模板系統。截至 2018 年 4 月,排名前 1000 萬的網站中超過 30.6% 使用WordPress。WordPress是最受歡迎的網站內容管理系統。全球有大約 30% 的網站 ( 7 億 5000 個 ) 都是使用 WordPress 架設網站的。WordPress 是目前網際網路上最流行的部落格系統。WordPress在最著名的網路發布階段中脫穎而出。如今,它被使用在超過7000萬個站點上。2003 年 5 月 27 日,WordPress 從 b2/cafelog 分支,由馬特·查爾斯·穆倫維格(Matt Mullenweg)和 Mike Little 開發。到了 2011 年 12 月,3.0 版本已經被下載了超過 6500 萬次

評價:

相比傳統的【段落】功能,Qubely 的(進階文字段落)提供更進階的選擇,還允許載入動畫或互動功能,算是強化了官方原生的設定。這個文字區塊太簡單,官方並沒有 Demo 展示,就是強化版的段落功能而已。

Button(按鈕)與 Button Group(按鈕群組)

單一 Button(按鈕)- 展示 Demo


Button Group(按鈕群組)- 展示 Demo

評價:

按鈕功能非常重要,它是執行超連結和 CTA (Call To Action) 行動呼籲的關鍵,但 Qubely 提供非常多元化的外觀選項,配上 icon 和生動的動畫,吸引讀者的眼球。

Video Popup(彈出式影片視窗)- 展示 Demo

可以自訂的項目:

  • 內部影片或外部影片來源(Youtube etc …..)
  • 影片封面圖片和重疊色調
  • 播放按鈕 icon 的樣式
  • 影片的自適應尺寸

評價:

非常實用的功能,訪客不需要離開您的網站,就可以瀏覽第三方來源的影片,讓您的網站加入更多不同種類的媒體類型,載入速度快,播放時會啟用燈箱暗黑模式,活像看電影似般。

Google Map(谷歌地圖)- 展示 Demo

地址:微風南山 – 110台灣台北市信義區松智路17號

評價:

簡單易用的 Google Map 功能,只需要貼上【地址】即可,但更強化的功能,需要串接 Google Map 的 API,請與貴公司的網站管理員和工程師查詢技術問題。

Gallery(圖庫 / 畫廊)- 展示 Demo

評價:

如果您的圖片尺寸是相同和等比例,預設是整齊的排版,但如果不是,可以啟用隨機生成的排版,交由系統盡量排列得較整齊,還有一些外觀的樣式設定。

Pricing(價格表)- 展示 Demo

基礎主機計劃
$49
/ 月
  • 無限域名
  • 1 年技術支援
  • 使用全部外掛
  • 使用全部佈景主題
產品 A

產品 A

$20.00
精美明信片,適合送禮和致敬長輩。物輕情義重,還可以加印上祝福語句。
產品 B

產品 B

$30.00
精美明信片,適合送禮和致敬長輩。物輕情義重,還可以加印上祝福語句。
產品 C

產品 C

$40.00
精美明信片,適合送禮和致敬長輩。物輕情義重,還可以加印上祝福語句。
產品 D

產品 D

$50.00
精美明信片,適合送禮和致敬長輩。物輕情義重,還可以加印上祝福語句。

評價:

如果網站有提供產品價目表,這功能提供很多客制化的外觀,讓您創作獨一無異的價目表款式。

Countdown(計數器)- 展示 Demo

0
00

Days

00

Hours

00

Minutes

00

Seconds

00

Days

00

Hours

00

Minutes

00

Seconds

00

Days

00

Hours

00

Minutes

00

Seconds

評價:

每年的特殊節日,會看到很多電商網站的 Countdown(計數器),現在您只需要一鍵就能制作完成。

Qubely 優惠碼,適用任何 Qubely 產品和方案

常見問題 FAQ

Qubely 有提供免費版?

有,您可以透過網站後台搜尋得到,或者從官方網站下載外掛並上傳。

我可以使用 Qubely Pro 多長的時間?

如果您購買了終身計劃,只要產品在市場上存在,您就可以獲取支持和更新。其他計劃包含 1 年更新和支援。從您購買日起開始計算。

Themeum 的退款政策是什麼?

他們提供 30天退款政策,但是您不能要求退款的原因是您購買的主題或外掛並不包含該功能,請閱讀 Themeum 的退款政策

關聯文章推薦:什麼是 WordPress Block Editor(區塊編輯器)?

Block Editor(區塊編輯器)簡介:

這是時代交替必然發生的結果,在 WordPress 5.0 版本更新之後,經典的舊版編輯器已替換為全新的 Block Editor(區塊編輯器),並持續快速地改良和完善功能,差不多每個小版本的改動,其核心都是圍繞著【區塊 Block】,但新手們對這個轉變的基礎認知又有多少?也許有人說毋須了解這類基礎知識,也可以愉快地使用 WordPress 撰寫文章,但觀念的底子和基礎不穩,會為往後選擇各種方向時,做出錯誤決策的機率提高。最後,希望新手們養成喜歡閱讀技術文件和說明的重要性,祝大家閱讀愉快。

關於 Block Editor(區塊編輯器)的各類延伸有很多,我們這篇文章盡量保持簡單,但您可以從這篇文章了解 WordPress 開發核心的脈絡和路線圖。沒有任何東西是突然變出來的,新的編輯器在不停改良的過程中,也是會遇上失敗和不如人意的地方,也許讓我們持續觀察下去。

關聯文章推薦:什麼是 Classic Editor (傳統編輯器)?

解決 WordPress 5.0 之前的舊版兼容性問題

由於 WordPress 發展了近 10 年,大部分新手未必了解這當中的發展過程,當中不少的【變革】至今仍然影響著我們,包含這次介紹的【傳統編輯器】,這可能對新手來說,是沉悶的教學,但請讓我們回到數年前,大約是 2018 年,籌備已久的新型的 WordPress 5.0 版本橫空出世,夾帶著大量的改動和創新的舉動,打算震蕩一波業界。但事實是,使用者的反應不如 WordPress 官方的預期,最讓老用戶不適應的是,他們仍然鐘情那個舊舊的和復古的編輯器,就是今天我們論述的主角 – 傳統編輯器。

總結:

為了推動更多 WordPress 用家了解區塊編輯器,我會評測更多的 WordPress 區塊編輯器(Block Editor)的支援和擴充功能的工具包。直到現在,Qubely 讓我留下最深印象,功能非常完整和強大,現在大部分網站的頁面都交給它負責,速度飛快和高效率,而且免費版本已經非常足夠新手使用,誠意推薦。


參考資料和引用文獻

在〈什麼是 Qubely?強化區塊編輯器的功能〉中有 6 則留言

    • 您好,想瞭解更多關於「頁面編輯器 (Page Builder)」的議題,可以參考這篇完整教學。

      ✦✦ 一個網站請不要安裝多於一套 WordPress 頁面編輯器!
      這個是重點中的重點,首先不要計算區塊編輯器和傳統編輯器這兩套,因為他們屬於撰寫文章的文章編輯器。不要安裝多於一套 WordPress 頁面編輯器是泛指下方介紹的 Elementor、Brizy 這類龐大的工具,這會非常嚴重地拖慢網站的速度,請記得保留一套即可,在你測試完其他編輯器之後,如果不滿意就盡快移除。
      ———————————–
      ✦✦ 了解自己的需求更重要
      由於大部分 WordPress 頁面編輯器的功能都是「大同小異」,沒錯真的大同小異和差別性很低,所以本文聚焦較知名的 Elementor 會有比較多的報導,其他重複性高的內容就會省略掉。由於不少編輯器提供免費版,站長不妨親身下載試用和比較不同之處,相比觀看網上的教學文章,會更能親身體驗那個編輯器最適合自己,就像你去服裝店購買衣服,穿上看試過合身才是最明智的選擇。

      https://wp-valley.com/best-wordpress-page-builders

      回覆

發表您的留言

加入我們的 Facebook 學習社團免費的教學資源、交流和解決問題!

是否覺得孤軍作戰和學習很無趣味?
何不加入學習社團和其他
熱愛網站設計的朋友交流?
分享您建站的喜與樂
學習最新的知識和技術