fbpx
黑色星期五 (Black Friday) 優惠開始

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 區塊,方便混合應用

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

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

提醒:區塊 (Block) 適合用於撰寫文章 (Post)

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

提醒:從 Starter Packs 匯入的區塊 (Block) 的差異

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

提供 41+ 個網站範本 (Template),一鍵套用

提供 41+ 個網站範本 (Template),一鍵套用
提供 41+ 個網站範本 (Template),一鍵套用

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

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

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

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

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

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

如何 [安裝] Qubely 外掛?

如何 [安裝] Qubely 外掛?
如何 [安裝] Qubely 外掛?

步驟一:

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

步驟二:

進入 [安裝外掛] 的介面,在右方的搜尋欄位輸入 [Qubely]。

步驟三:

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

溫暖提醒:

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

如何 [啟用] Qubely 外掛?

如何 [啟用] Qubely 外掛?
如何 [啟用] Qubely 外掛?

步驟一:

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

步驟二:

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

步驟三:

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

溫暖提醒:

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

如何 [刪除] Qubely 外掛?

如何 [刪除] Qubely 外掛?
如何 [刪除] Qubely 外掛?

步驟一:

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

步驟二:

從外掛清單之中,找到免費版的 [Qubely] 的外掛,並按下 [刪除],這代表您希望終止使用 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
精美明信片,適合送禮和致敬長輩。物輕情義重,還可以加印上祝福語句。

評價:

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

計數器 (Countdow) | 展示 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 讓我留下最深印象,功能非常完整和強大,現在大部分網站的頁面都交給它負責,速度飛快和高效率,而且免費版本已經非常足夠新手使用,誠意推薦。

參考資料和引用文獻

我們提供市場上最新的網站架設新聞、教學和相關知識,我們不會向用戶發送垃圾和推廣內容,而你可以隨時「取消訂閱」。

學員人數:7,800+ 人 (持續增加之中)

中文語系的 WordPress - Facebook 社團列表

在〈Qubely 是什麼?強化區塊編輯器的功能 [完整教學系列]〉中有 10 則留言

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

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

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

      回覆
  1. 最近看了版大的文也在摸索Qubely,想請問一下qubely可以儲存自己設定的區塊供下次寫文章使用嗎? 我只知道elementor有這樣的功能

    回覆
    • Henry 您好,Qubely 是建基於 WordPress 官方的「區塊編輯器 Block Editor」之下的生態。如果您有需要像 Elementor 般的「範本 / 模版 / Template」等的需求,希望建立的網站元素和物件可以留待往後「重複使用」,可以參考以下教學,是 WordPress 預設的功能,不需要額外安裝外掛,希望解答到你的疑難 ^___< 參考教學:什麼是 WordPress 可重複使用區塊?合適使用情景與常見問題 https://wp-valley.com/wordpress-reusable-block

      回覆
  2. 哇 感謝 又學到一個新東西 謝謝你,在這裡想再請教Mack一個問題
    我昨天開始使用Qbely,今天寫文章發現圖片不能分開調整,就是我電腦調整完的高度手機版會跑掉
    雖然他旁邊也有三個小圖示可以選,分別是電腦、平板、手機,但我按手機調完我想要的高度,轉回來編輯電腦的圖還是會更動到
    不知道是怎麼回事? 想問有沒有好的解決辦法,先謝謝Mack大了

    回覆
    • 您好喔,很高興再見面,不過由於你這個問題如果沒有「圖片」去解釋,別人很難理解,建議把這個問題,複制貼上去以下 WordPress 社團,更方便大家交流和解決這個問題,不竟這邊無法上傳圖片。

      題外話:如果操作 WordPress 去製作內容時,無論是 [新增]、[編輯] 或 [刪除] 內容等動作,都是看到「未更新」或「舊內容」,請優先考慮是網站各種「快取 Cache」的問題,請畫量清除一次,或使用網頁瀏覽器的「無痕模式」或使用其他裝置試試看。

      WordPress 交流討論區 / 社團
      https://www.facebook.com/groups/wp.valley

      回覆
  3. 您好,在您文中有看到免費版的Qubely有Gallery(圖庫 / 畫廊)的功能,我也有安裝Qubely,但在工具裡都沒看見這個選項,想請問有可能是哪裡有問題嗎?

    回覆

發表您的留言