Gutenberg 與 Elementor頁面構(gòu)建器之間的主要區(qū)別

古騰堡 vs Elementor：有正確的選擇嗎？也許。但這取決于您想要 WordPress 頁面構(gòu)建器提供哪些功能。

我們將解釋 Gutenberg 和 Elementor 的基礎(chǔ)知識(shí)，然后對(duì)兩者進(jìn)行直接比較。

什么是古騰堡？

Gutenberg 是默認(rèn)的 WordPress 頁面構(gòu)建器。它于 2018 年推出，取代了現(xiàn)在所謂的“經(jīng)典”WordPress 編輯器，后者是原始的富文本/HTML 內(nèi)容編輯器，沒有任何拖放功能。

Gutenberg 實(shí)際上是對(duì)第三方頁面構(gòu)建器插件浪潮的回應(yīng)，包括 Elementor、Divi 和 Visual Composer，這些插件的出現(xiàn)都是為了取代經(jīng)典編輯器。

從功能的角度來看，古騰堡提供了一個(gè)易于訪問的“塊”庫，用于將內(nèi)容元素拖動(dòng)到頁面和帖子上。

古騰堡附帶了近 100 個(gè)內(nèi)容塊，其中一些內(nèi)容允許集成和嵌入 Twitter、Reddit 和 Amazon Kindle 等第三方服務(wù)。還可以創(chuàng)建動(dòng)態(tài)塊來自動(dòng)更新塊內(nèi)容。一些古騰堡塊示例包括：

• Paragraph?段落

• Heading?標(biāo)題

• Table?桌子

• Image?圖像

• Gallery?畫廊

• Video?視頻

• Buttons?紐扣

• Calendar?日歷

• Custom HTML?自定義 HTML

• Latest Posts?最新帖子

大多數(shù) WordPress 主題都可以與 Gutenberg 配合良好（現(xiàn)在基本上需要它們）。

古騰堡界面在其中心顯示頁面或帖子內(nèi)容，并盡可能提供渲染內(nèi)容（例如顯示表單或按鈕）。這是經(jīng)典編輯器的重大升級(jí)，因?yàn)楣膨v堡支持快速 Markdown 編輯以及可視化用戶體驗(yàn)。如果需要，可以直接訪問 CSS 和 HTML 的自定義編碼部分。

每個(gè)塊都提供自己的長設(shè)置列表，古騰堡具有快速面板，可以對(duì)文檔和塊設(shè)置進(jìn)行強(qiáng)大的控制，例如 alt 標(biāo)簽、背景顏色和評(píng)論審核。

什么是Elementor?

Elementor 是一個(gè)頁面構(gòu)建器，很像古騰堡。然而，Elementor 早于 Gutenberg 成為第三方頁面構(gòu)建器應(yīng)用程序之一，最終導(dǎo)致了默認(rèn) WordPress 頁面構(gòu)建器的創(chuàng)建。

Elementor 于 2016 年推出，憑借其完全可視化的網(wǎng)頁設(shè)計(jì)界面、時(shí)尚的入門模板（可導(dǎo)入）和拖放內(nèi)容模塊，一直受到 WordPress 設(shè)計(jì)師的喜愛。

Elementor 和 Gutenberg 之間最明顯的區(qū)別之一是 Elementor 沒有內(nèi)置于 WordPress 中。它是由另一家公司制作的，因此您必須安裝其免費(fèi)插件（也提供高級(jí)版本）。

您還會(huì)注意到 Elementor 的功能具有獨(dú)特的名稱。他們?cè)诠膨v堡中所謂的“塊”在 Elementor 中被稱為“小部件”。說到這里，Elementor 擁有超過 100 個(gè)這樣的內(nèi)容小部件。

Examples of Elementor content widgets:Elementor 內(nèi)容小部件示例：

• Post?郵政

• Text Editor?文本編輯器

• Heading?標(biāo)題

• Image?圖像

• Text?文本

• Testimonial?感言

• Toggle?切換

• Progress Bar?進(jìn)度條

許多小部件在 WordPress 網(wǎng)站和第三方應(yīng)用程序（例如 Stripe、Facebook 和 Sound Cloud）之間創(chuàng)建集成。

總體而言，Elementor 是頂級(jí) WordPress 頁面構(gòu)建器之一，擁有充滿活力的開發(fā)人員和用戶社區(qū)。可視化的拖放界面無與倫比，您會(huì)收到數(shù)百個(gè)設(shè)計(jì)模板，并且所有編輯都是實(shí)時(shí)完成的。

除了專門的 WooCommerce 小部件以及用于登陸頁面和表單的營銷工具之外，Elementor 仍然是網(wǎng)站構(gòu)建領(lǐng)域的龐然大物，在比較 Gutenberg 與 Elementor 時(shí)這一點(diǎn)很明顯。

古騰堡和 Elementor 比較

我們將在功能、用戶界面、定價(jià)等方面比較 Gutenberg 與 Elementor。經(jīng)過我們的審核后，您將更深入地了解哪種頁面構(gòu)建器適合您的需求。

Key Features?主要特征

在本節(jié)中，我們挑選了我們認(rèn)為頁面構(gòu)建器的“關(guān)鍵”功能，然后我們將在每個(gè)類別中比較 Gutenberg 與 Elementor。

拖拽功能和編碼：Gutenberg 與 Elementor頁面構(gòu)建器的問題在于，它們經(jīng)常用可視化創(chuàng)建工具填充界面，并將代碼編輯等更高級(jí)的功能推到視圖之外。

我們更喜歡看到兩者的混合，初學(xué)者有一個(gè)易于訪問的時(shí)尚拖放界面，而高級(jí)用戶可以使用 CSS，而無需四處尋找正確的領(lǐng)域。

古騰堡的拖放功能非常簡單且沒有延遲。只需一點(diǎn)時(shí)間即可搜索內(nèi)容塊并將其拖動(dòng)（或單擊并插入）到內(nèi)容中。然后，將出現(xiàn)塊設(shè)置以供自定義。

一個(gè)缺點(diǎn)是拖動(dòng)當(dāng)前放置的塊會(huì)迫使您首先選擇一個(gè)塊，然后單擊并按住一個(gè)小拖動(dòng)圖標(biāo)。這需要點(diǎn)擊時(shí)的精確性，而這對(duì)于其他頁面構(gòu)建器來說是不需要的。

當(dāng)談到編碼時(shí)，古騰堡使其代碼編輯器很容易找到。

用戶發(fā)現(xiàn)塊會(huì)弄亂他們的代碼，并且預(yù)制塊也存在困難，因此需要開發(fā)人員生成數(shù)十個(gè)自定義塊。

盡管有抱怨，但頁面構(gòu)建器已經(jīng)為編碼人員進(jìn)行了改進(jìn)，并且工具確實(shí)存在，但學(xué)習(xí)曲線可能比經(jīng)典編輯器中的工具更陡峭。

您甚至可以直接從古騰堡的“塊”選項(xiàng)卡添加 HTML 錨點(diǎn)和其他 CSS 類，而以前這需要在經(jīng)典編輯器中的 HTML 選項(xiàng)卡中進(jìn)行繁瑣的跋涉。

Elementor 還提供拖放功能。它適用于大多數(shù) WordPress 主題，并提供一個(gè)可以快速插入到任何頁面的塊庫。

由于 Elementor 使用半自動(dòng)生成的網(wǎng)格系統(tǒng)，因此可以將小部件放置在頁面的大部分區(qū)域。

使用 Elementor 移動(dòng)先前放置的內(nèi)容塊比在古騰堡中更容易。您只需單擊并按住塊上的任意位置即可移動(dòng)它。

插入或選擇內(nèi)容小部件會(huì)顯示該小部件的內(nèi)容、樣式和高級(jí)設(shè)置。至于編碼，它通過許多塊設(shè)置進(jìn)行了簡化。就像如何在小部件或頁面設(shè)置中添加 HTML 錨點(diǎn)、屬性和自定義 CSS 一樣。

Elementor 還提供 HTML 代碼小部件，用于通過網(wǎng)頁插入您想要的任何自定義編碼。

總體而言，Elementor 的拖放功能比 Gutenberg 強(qiáng)。然而，自定義編碼選項(xiàng)在兩個(gè)頁面構(gòu)建器中似乎同樣可以訪問。

模板（用于網(wǎng)站、塊、頁面、彈出窗口等）：Gutenberg 與 Element頁面構(gòu)建器模板允許開發(fā)人員以驚人的速度構(gòu)建網(wǎng)站。模板允許您從專業(yè)的網(wǎng)站或頁面設(shè)計(jì)開始，而不是從頭開始構(gòu)建。

許多頁面構(gòu)建器提供預(yù)制模板，用于：

• Full websites?完整網(wǎng)站

• Pages?頁面?

• Blog posts?博客文章

• Page sections?頁面部分

• Content blocks?內(nèi)容塊

• Headers?頁眉??

• Footers?頁腳

• Landing pages?著陸頁

古騰堡嚴(yán)重缺乏預(yù)制模板。 “模式”選項(xiàng)卡提供了有用的部分模板，但僅此而已。

但是，可以安裝帶有頁面和完整網(wǎng)站的入門模板的第三方插件。 Gutentor、Twentig 和 Otter Blocks 等插件都符合要求。

另一方面，Elementor 的主題生成器中有數(shù)百個(gè)入門模板。

Elementor 的模板包括：

• Headers?標(biāo)頭

• Footers?頁腳

• Single pages?單頁

• Single posts?單個(gè)帖子

• Archives?檔案

• Search results pages?搜索結(jié)果頁面

• Product pages?產(chǎn)品頁面

• Product archives?產(chǎn)品檔案

• 404 pages?404頁

Elementor 中的幾乎所有模板都需要高級(jí)訂閱，但這比古騰堡 (Gutenberg) 提供的模板更實(shí)惠且更好。

風(fēng)格：Gutenberg 與 Elementor

古騰堡中的樣式功能允許在選擇要編輯的任何塊后在右側(cè)塊面板上進(jìn)行快速自定義。

與 Elementor 中的樣式設(shè)置相比，樣式設(shè)置相當(dāng)基本，但基本要素幾乎總是存在，例如更改圖像邊框和尺寸的選項(xiàng)，或段落塊的顏色、版式和邊距設(shè)置。

除了所有塊的自定義 CSS 之外，單擊塊時(shí)您還會(huì)發(fā)現(xiàn)一個(gè)懸停工具欄。本節(jié)提供文本樣式、使用 HTML 進(jìn)行編輯、復(fù)制該樣式以及復(fù)制。

選擇小部件時(shí)，Elementor 中的樣式設(shè)置包含在三個(gè)選項(xiàng)卡中。調(diào)整圖像和文本大小的內(nèi)容設(shè)置，然后跳轉(zhuǎn)到高級(jí)區(qū)域，包括從懸停動(dòng)畫到 CSS 過濾器和遮罩到變換效果的所有內(nèi)容。