fbpx
2024 年最佳 WordPress 佈景主題
了解更多
什麼是 Qubely？強化區塊編輯器的功能

Qubely 是什麼？強化區塊編輯器的功能 [完整教學系列]

這篇文章最後更新日期：2023 年 4 月 3 日 | 作者： Mack Chan

預計在 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中提供的即用型樣式選項。創建出色的網頁以及針對移動設備進行了優化的網頁。

了解更多 Qubely

什麼是區塊編輯器？

認識 WordPress 的基本觀念

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

如何使用 WordPress 建立一篇文章（Post）

官方網站

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

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

Themeum 官方網站

外掛目錄資料

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

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

Qubely 外掛目錄資料

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

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

直到現在為止，可以使用的區塊 (Block) 已經高達 161 個，而非初期影片的 120 個，更新和成長的速度非常快，在下方我們會盡量逐一介紹和示範，當然大家也可以上官方網站瀏覽是最更新 (Update)，如果您本身有使用主流的頁面編輯器如 Elementor、Beaver 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

按鈕 A
按鈕 B + 沒有背景色
 按鈕 + 車輪 = 按鈕車車 
點點邊框按鈕

評價：

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

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

可以自訂的項目：

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

評價：

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

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

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

評價：

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

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

MyThemeShop 為協助應對疫情，【限時免費】釋出 36 個原本付費的 WordPress 佈景主題
【WordPress 教學】Hello Dolly 外掛有什麼作用？應該保留還是刪除？
WPWebHost 建立部落格完整流程 - 從 Logo 設計到 SEO 優化
Big Domain - 網域 Domain 供應商清單
10Web - WordPress 的主機推薦
Creative Market - 適合新手的免費和付費設計素材

評價：

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

價格表 (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 開發核心的脈絡和路線圖。沒有任何東西是突然變出來的，新的編輯器在不停改良的過程中，也是會遇上失敗和不如人意的地方，也許讓我們持續觀察下去。

了解更多 區塊編輯器 (Block Editor)

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

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

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

了解更多傳統編輯器 (Classic Editor)

總結：

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

參考資料和引用文獻

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

WordPress 學員人數
12,000+ 人 (持續增加之中)

前往免費的學習社團
中文語系的 WordPress - Facebook 社團列表

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

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

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

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

      回覆

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

    回覆

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

      回覆

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

    回覆

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

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

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

      回覆

  5. 您好，在您文中有看到免費版的Qubely有Gallery（圖庫 / 畫廊）的功能，我也有安裝Qubely，但在工具裡都沒看見這個選項，想請問有可能是哪裡有問題嗎？

    回覆

發表您的留言