最佳原創 WordPress 塊 [快速概述]

我們為您帶來有關如何使用 Gutenberg WordPress 編輯器和塊的指南。請閱讀有關下一個 5.4 版本中即將推出的區塊更改的新聞。我們選擇了所有最常用的塊，這些塊必須在任何網站上使用。一旦發布，我們將發布有關所有功能的更多詳細信息。

當 WordPress 在 2018 年宣布推出新的古騰堡編輯器時，我們感到非常興奮。現在幾年後我們看到了巨大的進步。 Gutenberg WordPress 編輯器是創建網站的絕佳工具。

古騰堡編輯器的所有標準 WordPress 塊在我們的最新項目中均具有完整功能 自由的 Citadela WordPress 主題。您可以在任何網站上使用它，請 創建一個帳戶 並免費下載。

和 AitThemes Citadela 插件，您可以為公司、企業、博客或非營利網站演示創建特定內容。或者甚至開始一項新的在線業務。網站速度和編輯網站的便捷性是最重要的因素。

什麼是塊？

古騰堡 WordPress 塊是網站的構建單元。他們每個人都有自己特殊的位置和目的。對於特定類型的內容使用正確的 WordPress 塊非常重要。

但是如何找到最適合您意圖的塊呢？

為了幫助您更好地了解 WordPress 塊，我們準備了最流行的塊的概述。

文本內容塊

您可以使用多個塊在網站上插入文本內容。您可以使用多個塊。從 WordPress 5.4 開始，有一個新設置，您可以更改文本顏色。

• 段落
• 標題
• 引用
• 列表
• 引述
• 桌子
• 詩
• 預格式化

除此之外，您可以使用經典塊，這對於長段落來說會更方便。

按鈕塊

使用按鈕塊在 WordPress 中創建引人注目的 CTA 按鈕變得非常容易。您無需輸入自定義 CSS 或了解 HTML。您可以（但不必）輸入您喜歡的顏色的十六進制代碼，以使按鈕看起來漂亮且引人注目。

哪裡可以使用按鈕塊？

一旦網絡訪問者訪問您的網站，您希望鼓勵他們採取行動。這就是 CTA 按鈕的用途。

一般來說，有 3 個地方應該使用 WordPress Button 塊：

• 主頁 – 完成可實現您目標的操作，例如註冊時事通訊、發現特別優惠或註冊免費試用。
• 產品頁面 – 根據您的產品頁面的引導方式，可能有 1 個 CTA 按鈕（購買）或更多按鈕，例如產品詳細信息、購買、添加到願望清單等。
• 博客 – CTA 按鈕可以引用另一篇有用的文章或購買您的產品/服務。

按鈕塊設置

在檢查器的右側，您可以輕鬆管理按鈕的設置：

• 風格
• 背景顏色
• 字體顏色
• 邊界

CTA 按鈕中寫入的文本應該簡短明了，鼓勵您希望網絡訪問者採取的行動。

下一個 WordPress 5.4 版本（2020 年 3 月 31 日發布）中即將發布的消息

按鈕塊將被新按鈕替換s 堵塞。
您可以從新名稱中假設，您將能夠在一個塊容器中一一創建更多按鈕。通常需要一次創建兩個 CTA，例如：立即購買和閱讀更多。此外，一些新的樣式和顏色設置也即將推出。選擇填充或輪廓樣式，然後選擇背景顏色。您可以選擇純色或漸變背景。一些預設作為起點將可用於更輕鬆的微調。好消息是所有現有的按鈕塊都將正常工作，無需遷移它們。

柱塊

Columns 塊是一個令人驚嘆的 WordPress 塊，它為新佈局打開了大門。它為您提供了更多頁面元素排列選項，從而產生更多設計選擇。

使用 Columns 塊很簡單：

• 無需安裝額外的插件。
• 無需編碼。
• 您所需要的只是一點對簡潔設計的理解。

與之前 WordPress 塊編輯器發布之前必須經歷的麻煩相比，使用 Columns WordPress 塊非常簡單。

如何使用列塊？

如上所述，可以通過 2 種方式使用列塊：

• 組織文本的流程（在博客文章或常規頁面上）。
• 將其他塊排列成列。

當將文本組織成列時，例如在博客文章中，您可以提高可讀性並使您的網站更加透明和用戶友好。

但是，當您使用列塊嵌套其他塊（例如圖像、文本和按鈕）時，您將更改所選頁面的整個佈局並創建新的設計。

列塊設置

將列塊插入頁面後，選擇所需的列數。它可以是 2 到 6 列之間的任意數量。然後您可以開始輸入文本或在每列中添加塊。

可以為整個塊以及各個列單獨設置列塊內容的對齊方式。您甚至可以選擇列寬的比例。這樣，一列就可以比另一列寬。

蓋塊

我們來談談您網站的標題。該部分定義了某人訪問您的主頁時的第一印象。有點重要，不是嗎？您是否知道封面塊可以用作任何頁面上的標題？

封面是 WordPress 的核心塊，可幫助您給網絡訪問者留下深刻的印象。尤其是當它被正確使用時，或者更好地說，當它巧妙地集成到您的網頁設計中時。

蓋塊在哪裡使用？

如上所述，封面塊可以用在您的任何頁面上。此外，它可以添加到頁面上的任何位置，與固定在網站頂部的網站標題不同。

蓋塊可用作：

• 任何頁面的標題，包括主頁。
• 圖像或視頻被產品頁面上使用的文本覆蓋。
• 博客文章中的內容分隔符。

蓋塊設置

設置 Cover 塊非常簡單。首先，選擇圖像或視頻作為背景。您也可以使用單一顏色。設置背景後，添加標題和副標題。 

您可以選擇塊的對齊方式，當然也可以選擇其中文本的對齊方式。

蓋塊對齊提供以下選項：

• 左對齊
• 居中對齊
• 右對齊
• 寬幅
• 全屏寬度

我個人最喜歡的是檢查器中可用的顏色疊加 - 封面塊背景圖像可以調色為您想要的任何顏色。結合定制的字體大小和顏色，您可以創建美麗的對比，封面塊的最終外觀將令人驚嘆。

從 WordPress 5.4 開始，您可以選擇漸變背景而不是純色背景。

畫廊塊

使用圖庫塊在您的網站上展示圖像。這個標準的 WordPress 塊旨在保存您的圖像並在您網站的任何頁面上很好地顯示它們。與其他 WordPress 塊類似，圖庫塊可以放置在網站上或博客文章中的任何位置。

可以通過從媒體庫、計算機中選擇文件或使用拖放功能來上傳圖像。

在哪裡使用畫廊塊？

根據網站的類型，您可能想要創建複雜的照片庫或簡單的圖像演示。您可以在以下位置使用圖庫塊：

• 您的主頁
• 創建為照片庫相冊的單獨子頁面
• 產品頁面
• 博客文章

畫廊塊設置

除了畫廊塊本身的各種對齊選項之外，該塊內還有一些有趣的選項，例如：

• 圖像排列的列數。
• 圖像裁剪以匹配相同的尺寸（最小圖像）。
• 超鏈接讓您可以選擇鏈接到另一個頁面或媒體文件。

圖像塊

圖像塊只不過是在您的網站上顯示圖像的塊。

這是正確的。如果您只想將圖像添加到任何頁面，則應該使用 Image WordPress 塊。它可能與其他呈現的塊相似，但存在顯著差異，使其非常適合單個圖像。

什麼時候使用圖像塊？

特別是當圖像上顯示的對像對您的網絡訪問者特別重要時，應使用圖像塊，您希望：

• 用特定的圖像吸引網絡訪問者的注意力。
• 顯示帶有標題的圖像。
• 顯示信息圖表，幫助訪問者更好地理解所討論的問題。

圖像塊設置

WordPress 圖像塊的最大優勢之一是它的圖像大小選項。您可以通過拉動圖像的角來輕鬆調整圖像大小，選擇固定的像素大小，或定義百分比大小。

另一個重要的選項是替代文本、標題和鏈接的輸入字段。我強烈建議使用這些字段，因為它們在頁面搜索引擎優化中發揮著重要作用。

媒體和文本塊

讓我們繼續討論可以使用媒體和文本塊創建的更高級的頁面佈局。這個核心 WordPress 塊允許您以美觀和上下文的方式並排組合媒體和文本。

在哪裡使用媒體和文本塊？

儘管媒體和文本塊最適合在博客文章中使用，但只要發揮一點想像力，您也可以在其他地方使用它。例如，您可以使用彼此相鄰的圖像和文本來創建精美的產品或服務概述。

如果用作產品/服務概述，請不要忘記將按鈕塊添加到媒體和文本塊的文本部分。這樣您就可以在任何頁面上設計漂亮的 CTA 部分。

媒體和文本塊的優點

• 將上下文相互契合的圖像和文本結合在一起。
• 避免博客文章中的圖像錯位。
• 幫助提高網站的響應能力（使用“Stack on mobile”功能）。

媒體和文本塊設置

當查看媒體和文本塊的設置時，您會注意到相當多的對齊選項，其中一些與大多數其他塊相比是獨特的。

該塊有趣且有用的設置是背景顏色。通過對圖像和文本周圍相配的區域進行著色，您可以在視覺上突出顯示它們的聯繫。

插入 WordPress 版本 5.4 (31.3.2020) 的鏈接。您可以從鏈接、媒體文件或附件頁面中進行選擇。

工作台塊

表塊是 WordPress 在 5.0 及更高版本中引入 WordPress 塊編輯器後如何改進的示例之一。之前您需要插件將表格插入 WordPress 網站，現在您可以簡單地使用表格塊。

在哪裡使用表塊？

表格在以井然有序且透明的方式提供有用內容方面發揮著巨大作用。當然，大多數網站都使用了表格。以下是在不同網站上使用表格的幾個示例：

• 數據對比
• 定價表
• 產品技術細節
• 食譜
• 會員套餐概覽

將 Table 塊作為免費 WordPress 核心的一部分真是太棒了。

表塊設置

當您將表格塊插入頁面時，您需要定義表格的許多列和行。別擔心，這個數字不是固定的。您可以隨時添加更多行和列（或刪除它們）。

然後，選擇表格的樣式：默認或條紋。繼續進行對齊和字體樣式，最後填寫表格，然後再進行最後的修飾。

更多選項包括：

• 背景顏色
• 固定寬度單元格
• 標頭
• 頁腳
• 鏈接（表格中的文本條目可以鏈接到其他頁面）

接下來您想看哪個街區？

希望您喜歡閱讀我們精選的非常有用的 WordPress 核心塊 - 每個人都可以免費使用。請告訴我們您接下來想閱讀哪些內容，或者您發現 WordPress 核心中仍然缺少哪些功能。謝謝閱讀！