使用 Gutenberg 塊編輯器創建定價表

已發表: 2020-03-10

在一年多的時間裡，我們見證了 Gutenberg 區塊編輯器的巨大發展。與經典的 WordPress 編輯器相比，我們現在可以在帖子和頁面中設計以前只能通過編碼完成的元素。

例如，使用經典編輯器，在帖子中顯示表格的最簡單方法是在電子表格中創建所述表格，將其導出為圖像，然後將其插入到要顯示的帖子中。但是我們現在在新的 WordPress 編輯器中找到的塊之一是表格塊。讓我們看看我們如何使用 Gutenberg 創建一個表，以及我們可以在多大程度上使用同一個塊創建一個價格表。

表塊

創建表格就像添加一個新的表格塊一樣簡單，我們在其中指出我們想要的行數和列數以及它們的對齊方式。

在 Table 塊中，我們可以自定義以下屬性：

我們還可以在每個單元格中指示文本的對齊方式以及字體是粗體還是斜體，並添加鏈接。此外，我們可以隨時通過添加或刪除行和/或列來修改表。

這樣，我們看到我們可以很容易地創建下表：

	Nelio A/B 測試計劃
基本的	專業的	企業
適用於自由職業者和個人網站	對於小企業家	對於專注於優化的團隊
29 歐元/月	89 歐元/月	259 歐元/月
1 個站點	5 個站點	? 10 個站點
5,000 次訪問測試頁面	35,000 次訪問測試頁面	200,000 次訪問測試頁面
訂閱	訂閱	訂閱

這比我們用經典編輯器做的更簡單、更快捷。並且得到的結果肯定可以用來顯示一個數據表。

表塊限制

雖然創建之前的表對我們來說非常容易，但我們遇到了很多限制。一方面，您使用 Gutenberg 中的表格類型塊設計的表格沒有響應。也就是說，表格不會中斷，而是會變小，而無法按列顯示表格的不同元素：

完全適應設備的表格通過將表格分成列來顯示表格的元素，以便更好地顯示所有單元格。

除了適應設備的（不）能力之外，您可能已經註意到，在表格塊中，我們無法輕鬆更改每個單元格中的字體類型和大小、顏色等。也就是說，由於其所有限制，Gutenberg 表格塊對於為您的產品創建有吸引力的價格表沒有用處。

我們如何創建這些響應式表格？

備擇方案

列塊

另一種方法是嘗試使用列塊佈置表格：

基本的

適用於自由職業者和個人網站

29 歐元/月

1 個站點

5,000 次訪問測試頁面

專業的

對於小企業家

89 歐元/月

5 個站點

35,000 次訪問測試頁面

企業

對於專注於優化的團隊

259 歐元/月

? 10 個站點

200,000 次訪問測試頁面

與表格塊相比，列塊的優勢在於它是完全響應的，並且在移動屏幕上我們會看到每個計劃都顯示在另一個之後。

我們看到這些列是完全響應的。當然，為了顯示很少的信息並且沒有太多複雜性，這些列是可以考慮的替代方案。

價格表塊插件

如果您必須創建有吸引力的價格表，我的建議是您安裝一些包含此塊的插件。它們可能不允許您在不接觸代碼的情況下進行任何類型的自定義，但在許多情況下，您可以獲得非常優雅的結果。讓我們看一些與 Gutenberg 塊編輯器完全集成的示例。

共塊

Coblocks 是一個插件，包含一整套完全適應古騰堡的塊。其中之一是價格表塊。

它非常簡單易用，無需編碼，您可以自定義列數和與排版相關的某些方面，以及列和文本的顏色。您很快就有了一個完全響應的價格表，如下圖所示。

格威德

同樣，Getwid 插件還包括一整套與 Gutenberg 編輯器完全兼容的塊。很快，您可以輕鬆地構建一個完全響應的價格表，如下所示：

在這種情況下，您可以自定義字體以及背景和文本顏色。

古騰堡高級積木

The Premium Blocs for Gutenberg 插件還包括塊，您可以使用這些塊創建非常有吸引力的價格表。下面我向您展示了我使用在列中插入的定價表塊創建的價格表圖像。

此塊允許您自定義顏色、字體、按鈕類型、是否要包含圖標、如何顯示價格的屬性、功能和描述等。如您所見，它允許您非常完整的自定義。

帶有內置編輯器的插件

或者，您會找到其他類型的插件，其中包括一個內置的定價表編輯器，該編輯器集成到您的 WordPress 儀表板中，您可以使用它創建非常完整和自定義的表。構建所需的表格後，可以使用簡碼將此表格包含在任何頁面或帖子中。讓我們看一些例子：

響應式定價表

響應式定價表是一個插件，它為您的 WordPress 添加了一個新的編輯器，以便您可以創建價格表。您可以添加大量計劃並自定義每個計劃。

對於每個計劃，您可以添加名稱、副標題、描述和價格。您還可以添加功能列表、自定義購買按鈕和更改計劃的配色方案。

創建計劃後，您只需在定價頁面上使用簡碼添加它。

Supsystic 的定價表

Supsystic 定價表插件向您的 WordPress 儀表板添加了一個拖放編輯器，您可以使用它來構建表格。它為您提供了許多響應式表格設計。在免費版本中，您最多可以使用 7 種設計。

選擇所需的表格設計後，您將擁有一個編輯器，可讓您修改列數並自定義顯示的每個計劃的許多功能。您還可以隨時更改佈局。最後，和以前一樣，該表格可以包含在任何頁面或帶有簡碼的帖子中。

其他集成價格表編輯器的免費插件有：

ARprice的定價表
定價表 WordPress 插件 – Fatcat Apps 的簡單定價表
響應式定價表生成器 – wpPricing Builder
WRC 定價表
定價表生成器 – AP 定價表 Lite
TC 定價表（按主題代碼）
定價表 – bh A WP Life

結論

如您所見，在 WordPress 中，您可以使用多種替代方法來構建價格表，無需額外成本，也無需直接編寫代碼。因此，只需選擇最適合您需求的選項即可。

請記住，顯示產品價格的頁面最終對吸引客戶至關重要。所以，你花在讓它有吸引力上的時間不會白費。為了激發您的靈感，您可以查看我們的 Nelio A/B 測試產品的價格表設計，該產品是本文的特色圖片？