【WordPress 外掛推薦】12 個免費 Gutenberg 古騰堡區塊外掛

你還在使用舊的 WordPress 編輯器嗎?或是你已經更換成新的古騰堡(Gutenberg)編輯器了呢?你喜歡這個新的編輯器嗎?如果你的答案是否定的,這篇文章當中所介紹的 12 個免費的古騰堡外掛也許會讓你改觀。

什麼是古騰堡外掛?為什麼我們需要它?

古騰堡(Gutenberg)編輯器是 WordPress 5.0 版本(2018)之後的預設編輯器。它最大的特色是採用了「區塊」(Block)編輯的概念。

「區塊」是現在 WordPress 建構網站頁面的基本元素,增加到網頁的每一個「段落」、「標題」、「圖片」、「清單」等等,都是一個「區塊」。所以我們可以使用多種不同的區塊搭配網頁的「佈局」(Layout)來製作網頁。

不管你喜不喜歡古騰堡,Classic Editor(傳統編輯器)外掛的官方支援即將於 2021年底到期。更多古騰堡的資訊可以在「WordPress 網站帶路姬」的「Gutenberg 古騰堡編輯器終極懶人包」文章中找到。

古騰堡除了剛推出時的穩定性問題之外,比較常讓人詬病的地方是區塊的功能不夠豐富和彈性不足,所以使用古騰堡外掛不但能補足這些缺點還能大幅提升古騰堡編輯器的功能、提供更多設計選擇、美化網頁並且節省大量製作網頁的時間。

以下是我推薦給各位讀者的免費 Gutenberg 古騰堡外掛:

免費 Gutenberg 古騰堡外掛推薦

Ultimate Addons for Gutenberg

啟用安裝數:[adv_stats_active_install plugin=’ultimate-addons-for-gutenberg’] +
|
[adv_stats_plugin_ratings_average_in_star plugin=’ultimate-addons-for-gutenberg’] [adv_stats_ratings_average plugin=’ultimate-addons-for-gutenberg’ outof=’5′]

Ultimate Addons for Gutenberg 是一款我很喜歡的古騰堡區塊外掛。 事實上,它目前擁有 200,000+ 的啟動安裝數,是所有古騰堡區塊外掛當中最多的。 這個紫色樣式有沒有讓你想起什麼? 沒有錯,它的開發團隊是 Brainstorm Force ,他們有另一個作品是以輕量而快速聞名的佈景主題「Astra」。

UG 是一款美麗而強大的古騰堡區塊增強外掛,他能讓使用者在幾分鐘之內設計出令人驚嘆的網站。你只需從 UG 中選擇你喜歡的區塊,即可通過簡單、直觀的設置來加速網站的設計過程。


CoBlocks

啟用安裝數:[adv_stats_active_install plugin=’coblocks’] +
|
[adv_stats_plugin_ratings_average_in_star plugin=’coblocks’] [adv_stats_ratings_average plugin=’coblocks’ outof=’5′]

CoBlocks 是一款強大卻輕巧的古騰堡區塊外掛,其最大的特色是可以自由調整大小的「行」、「列」區塊。

雖然某些功能和上面介紹的 Advanced Gutenberg Blocks 重疊了,但是我更喜歡 CoBlocks 這種簡單又靈敏的設計。

CoBlocks Responsive grid system

Kadence Blocks

啟用安裝數:[adv_stats_active_install plugin=’kadence-blocks’] +
|
[adv_stats_plugin_ratings_average_in_star plugin=’kadence-blocks’] [adv_stats_ratings_average plugin=’kadence-blocks’ outof=’5′]

透過 Kadence Blocks 您可以自由地創造出想要的網頁佈局和更具吸引力的網站內容。

精心製作區塊能使您的網站設計過程愉快而有趣,並且針對不同的螢幕尺寸所編寫的響應式區塊,能很好的適應各種移動裝置,包含行高、間距和字體大小等。

當您沒有靈感的時候,也可以快速地套用預先設計好的區塊庫(類似 AstraStarter Templates )來快速啟動您的網站,您只需要按照類別瀏覽或是搜尋找到要放入頁面的內容。接著調整內容文案、樣式就可以了,相當輕鬆方便。


Otter Blocks

啟用安裝數:[adv_stats_active_install plugin=’otter-blocks’] +
|
[adv_stats_plugin_ratings_average_in_star plugin=’otter-blocks’] [adv_stats_ratings_average plugin=’otter-blocks’ outof=’5′]

Otter Blocks 是由 Themeisle 所開發的 Gutenberg 外掛,透過輕巧的方法來增強 WordPress 網站的建構,而不會影響您網站的速度。

使用 Otter 區塊外掛您將能夠建立創新的佈局從而提高網頁的可讀性並增強視覺上的吸引力。您可以建立自己的佈局或是選擇 Otter 的佈局和模板。每種佈局均經過專業設計。您也可以利用響應式區塊的優勢來創造完美的手機、平板電腦或是桌上型電腦的視覺效果。


Stackable

啟用安裝數:[adv_stats_active_install plugin=’stackable-ultimate-gutenberg-blocks’] +
|
[adv_stats_plugin_ratings_average_in_star plugin=’stackable-ultimate-gutenberg-blocks’] [adv_stats_ratings_average plugin=’stackable-ultimate-gutenberg-blocks’ outof=’5′]

Stackable 是一個功能強大的外掛,也是擴展性最強,評分最高的 Gutenberg 外掛之一。

無論您是初學者、設計師、還是開發人員,都可以使用 Stackable 打造出色的網站。您可以使用現成的設計、大量的圖集和 UI 套件等來構建任何類型的網站。

Stackable 添加了多種新的區塊功能,讓我們能有更多種選擇來設計網頁。這些新的區塊有更多的設定選項可以客製化,讓你的網站看起來更美輪美奐。


Redux

啟用安裝數:[adv_stats_active_install plugin=’redux-framework’] +
|
[adv_stats_plugin_ratings_average_in_star plugin=’redux-framework’] [adv_stats_ratings_average plugin=’redux-framework’ outof=’5′]

Redux 號稱可以讓您用最快的速度使用 Gutenberg 來建立您的網站。它有一個超過 1,000 個模板的資料庫,讓您可以快速套用,讓設計網站的時間從幾天縮短為幾分鐘。Redux 可以兼容各種 WordPress 主題,並且不會拖慢您的網站速度。


Atomic Blocks

啟用安裝數:[adv_stats_active_install plugin=’atomic-blocks’] +
|
[adv_stats_plugin_ratings_average_in_star plugin=’atomic-blocks’] [adv_stats_ratings_average plugin=’atomic-blocks’ outof=’5′]

Atomic Blocks 是由 StudioPressWP Engine 所開發的外掛,設計也是走時尚極簡路線。

透過使用區塊編輯器及 Atomic Blocks 能讓使用者擁有更多的掌控權,並且能更快地建立任何類型的網站設計!

安裝 Atomic Block 外掛會添加一組漂亮的區塊,來幫助您設計網站頁面。Atommic Blocks 透過新的區塊和佈局提供了讓您可以從按鈕、圖像到所有網頁內容都可以設計出精美動人的網站。


Qubely

啟用安裝數:[adv_stats_active_install plugin=’qubely’] +
|
[adv_stats_plugin_ratings_average_in_star plugin=’qubely’] [adv_stats_ratings_average plugin=’qubely’ outof=’5′]

Qubely Blocks 是一款功能強大而且相當成熟的古騰堡外掛,它不像其他的古騰堡外掛推出的早,它不斷地進行測試和開發直到 2019 年的 6 月份才推出。

Qubely Blocks 擁有多款的區塊功能,雖然其中沒有特別突出的功能,但是比起其他的古騰堡外掛,它擁有更多的區塊編輯能力,幾乎所有的區塊功能都可以進行對齊位置、顏色、文字甚至特效的設定,這對於不懂得使用 CSS 的使用者來說有絕對的吸引力,而且使用起來相當順暢。

另外,如果你實在是沒有網頁設計的點子,也可以直接匯入已經設計好的區塊或是佈局可以增加製作網頁的效率。


Getwid

啟用安裝數:[adv_stats_active_install plugin=’getwid’] +
|
[adv_stats_plugin_ratings_average_in_star plugin=’getwid’] [adv_stats_ratings_average plugin=’getwid’ outof=’5′]

Getwid 擁有 40 多個全新的 Gutenberg 區塊,相當程度的擴展了內建的 WordPress 區塊數量,此外它還有 35 多個用於區塊編輯器的預製模板。除了多樣化的區塊,它還能保持優異的性能不會拖慢您的網站,並且與絕大多數的佈景主題相容。


Advanced Gutenberg

啟用安裝數:[adv_stats_active_install plugin=’advanced-gutenberg’] +
|
[adv_stats_plugin_ratings_average_in_star plugin=’advanced-gutenberg’] [adv_stats_ratings_average plugin=’advanced-gutenberg’ outof=’5′]

Advanced Gutenberg 添加了建構專業網站所需的 Gutenberg 區塊。透過 20 多個新的區塊和選項來全面升級您的 Gutenberg 編輯器。

它提供了包括幻燈片、按鈕、圖示、圖庫、地圖、輪播等各項增強的區塊。


Advanced Editor Tools

啟用安裝數:[adv_stats_active_install plugin=’tinymce-advanced’] +
|
[adv_stats_plugin_ratings_average_in_star plugin=’tinymce-advanced’] [adv_stats_ratings_average plugin=’tinymce-advanced’ outof=’5′]

如果你想更換成新的古騰堡區塊編輯器,但是還是很懷念舊的傳統編輯器,那你可以試試看這款由 Automattic 維護的傳統編輯器增強版,它把舊的傳統編輯器融合到古騰堡的區塊當中。


WooCommerce Blocks

啟用安裝數:[adv_stats_active_install plugin=’woo-gutenberg-products-block’] +
|
[adv_stats_plugin_ratings_average_in_star plugin=’woo-gutenberg-products-block’] [adv_stats_ratings_average plugin=’woo-gutenberg-products-block’ outof=’5′]

如果您正在使用 WooCommerce 架設電子商務網站,那您可以嘗試這款由 WooCommerce 官方所推出的 Gutenberg 外掛,除了在安裝 WooCommerce 外掛時就一起綁定的區塊之外,這款 WooCommerce Blocks 還有增加一些實驗性的新區塊給使用者。


如何使用古騰堡外掛製作網頁?

這邊我用幾張 GIF 解說如何使用古騰堡外掛製作網頁。

首先,添加 Stackable 的「Header」區塊,調整成「全幅寬度」並加入背景圖片。

再來,加入「Feature」區塊並修改內容文字以及加上圖片。

添加「Container」區塊,設定成「全幅寬度」,並加入「Feature Grid」區塊。

添加「Post」區塊,把部落格文章也加到頁面來。

其他的設計也依此類推,想要什麼設計就加什麼區塊,如果有不清楚的功能就加上去玩玩看,大部分都很容易理解。

結論

Gutenberg 古騰堡編輯器目前雖然並不完美,還有需多改良空間,但是做為 WordPress 的內建編輯器,它的未來潛力絕對是指日可待。

加上上面所介紹的古騰堡區塊外掛,有如雨後春筍般的釋出,未來一定還會有更多新奇好玩的區塊誕生,讓我們繼續看下去囉。

如果你喜歡這篇文章,請記得分享給你的好友,或是用電子郵件訂閱本網站,有新文章發佈時,我會在第一時間通知你,也別忘了到我的粉絲專頁幫我按個讚。

如果你對本篇文章有任何問題,歡迎你在下方留言,我會盡快回覆你。

精選文章:

Last Updated on:

Subscribe.

讓最新文章的通知直接送達你的郵件信箱

學習更多有關 WordPress 的技巧以及佈景主題和外掛的最新折扣優惠通知

在〈【WordPress 外掛推薦】12 個免費 Gutenberg 古騰堡區塊外掛〉中有 15 則留言

    1. net·work·er

      Hello John
      首先先謝謝你 你是本網站的第一個留言!

      我在寫這篇文章的時候
      盡量想把所有我找到的 我認為好的 古騰堡外掛都放進來
      目的是讓大家有更多的選擇

      尤其是區塊的部分
      我需要的區塊 別人不一定需要
      我不需要的 也許某些人用得上

      一次介紹多個外掛
      或是只推薦一個
      我有時候也蠻困惑的

      回來回覆你的問題
      這些外掛 不用全部都安裝
      因為有部分外掛的功能是重複的
      只需要安裝你需要的就好了

      如果你需要的功能剛好都在不同的外掛上
      那也許只能等某個開發商
      把增強區塊都統合、補滿了

      或是未來如果古騰堡有把部分功能內建
      也許就能讓我們省點力氣

      不知道這樣的回答有沒有幫助到你?
      如果有其他問題
      也請不吝指教

  1. 以上這些都是可以在網站中一起使用的嗎?
    或者擇一使用為佳?

    1. 由於有很多區塊的功能都會重複
      我建議挑選其中一個使用即可
      除非你有特別需要的區塊在分別不同的外掛裏頭

  2. 我剛開始接觸wordpress,正嘗試寫幾篇文章就遇到預設的編輯器有許多內容無法調整的問題。Elementor 編輯器對我來說不太順手,會把注意力都放在調整上。感覺比較像是設計頁面用比較好用。
    上網搜尋如何進一步操作預設的古騰堡編輯器就找到這裡來,希望這些外掛有所幫助。非常感謝!
    可以順便請教一個問題嗎?文章預設的字體大小跟顏色是編輯器控制的還是主題呢?我找了好久都沒看到哪裡可以更改……目前是每一個段落都手動設定一次 XD

    1. 文章預設的字體大小跟顏色通常可以由主題控制
      選擇「自訂」->「Typography」
      但是不一定所有的主題都有這個選項

      你也可以用自訂的 CSS 語法更改字體的樣式
      如果你不清楚 CSS
      最簡單的方式是使用外掛
      你可以參考這篇文章裏頭提到的 Easy Google Fonts 外掛
      https://networker.tw/google-web-font-optimization/

  3. 您好!您的文章寫得很用心,十分詳盡清楚!我架網很迷茫時都是來這裡求賜教的,感謝您的分享!
    我用Elementor寫了幾篇文章,可是聽說原來它是頁面編輯器,要寫文章的話還是用Gutenberg,不然將來網頁會給拖慢或是可能不相容之類的,請問這是有可能的嗎?
    因為Elementor的Inner Section比例較Ultimate Addons for Gutenberg合用,排版會更好……
    我就只為了這個原因才用Elementor……我最初是用Ultimate的Section可是文字會走位……
    請問︰
    1. 用Elementor寫文章是不是一個錯誤的做法呢?
    2. 您最推薦哪一款Gutenberg?
    感謝您抽空賜教,感激不盡!

    1. Elementor 是功能強大的頁面編輯器
      只用 Elementor 來寫文章有點大材小用
      但是也沒有什麼壞處
      至於你提到的那些疑慮
      我覺得只要 Elementor 有持續更新
      問題應該不大

      我沒有最推薦的
      因為每個人的需求都不一樣
      我自己用的是 CoBlocks
      但是因為只是寫文章
      用到的機會也不是很多

  4. CoBlocks 這真的很好用,

    以前找不到方法將兩到四張照片並列,
    原來這這麼簡單。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *