如何在古騰堡中創建具有總主題的英雄網站部分
已發表: 2020-07-24Total WordPress 主題帶有商業網站可能需要的一整套工具。
該主題通過 WordPress Customizer 為您提供可視化編輯和快速演示數據導入，這對於構建出色的首頁特別有用。
如您所見，Total 的免費版本不會使用任何額外的 WordPress 頁面構建器來鎖定您，而是提供了一種 WordPress 原生的方式來設計您的網站。
隨著基於塊的 WordPress 編輯器 Gutenberg 的到來，任何 WordPress 主題，包括 Total，都可以進一步定制。 內容元素（塊）的選擇為我們提供了我們在 WordPress 核心中從未見過的自定義自由，這很難否認。
然而，一些塊樣式設置在默認編輯器中仍然非常有限。 因此，如果您正在使用新的 Gutenberg 編輯器和 Total ，希望構建和設計更好的內容，您會在本教程中找到一些有用的提示。
更準確地說，在這篇文章中，我們想展示一些示例，說明如何在 Gutenberg 中構建和自定義諸如 hero、subhero 和號召性用語部分等關鍵網站元素。 通常幫助企業的人：
- 創建介紹/歡迎網站部分
- 宣傳重點產品或活動
- 專注於特定的投資組合項目或服務等。
為了增強 Gutenberg 的定制可能性，我們將使用我們推薦給 Total 主題用戶的 Getwid WordPress Blocks 插件。 我們確信一些 Total 用戶已經嘗試過 Getwid。
但是對於那些想知道 Getwid 是什麼的人，以下是簡要說明。
簡而言之，它是一個免費的古騰堡原生插件，帶有迄今為止最大的類似高級塊的庫和一系列為古騰堡定制的挑选和粘貼設計。 這不是我們推薦它的唯一原因。
我們特別喜歡這個插件，因為它與默認的 Total 樣式很好地融合在一起，允許您關閉不需要的任何塊，並且功能非常豐富。
當您激活 Total 時，該插件會作為推薦插件彈出 - 這是一個臨時解決方案，看看它是否適合我們的客戶。
但是，您需要自己嘗試一下，看看它是否是您的解決方案。 同時，讓我們看一下我們設法創建的示例。
使用 Getwid 創建的英雄和號召性用語部分示例總計
我們在 Total 主題的免費版本中進行了這些測試，可以肯定地說幾乎沒有任何限制。
但是，總網站容器寬度選項是有限的，因此如果您正在尋找全屏沉浸式佈局，您可能需要考慮 Total Plus。
首先，您幾乎總是需要使用 Getwid WordPress 塊的 Section塊。 它是一個可以處理任意數量的任何其他塊的容器。 因此，您的英雄部分可以顯示任何類型的內容。
Section 容器的另一個突出之處是它為您提供了許多背景類型：圖像、顏色、視頻（來自您的 WP 媒體庫或 YouTube）、多色漸變等等。
因此，在使用 Section 塊設計網站區域時，您的主要任務是：
- 選擇並自定義背景類型，使其上的內容保持可讀和清晰。
- 按首選順序插入所需的塊。
- 調整間距（有可拖動的角度，就像在視覺構建器中設置內部和外部空間一樣）。
- 可選：添加動畫、形狀分隔線和其他裝飾元素。
現在讓我們舉個例子。
示例 1. 產品展示
此示例中的所有塊都放置在 Section 塊中：
- 高級標題
- 高級標題
- 高級標題
- 按鈕組
- 部分背景：圖像（定位 > 右上角；大小 > 自動）
標題塊允許您使用任何 Google 字體、文本大小、字體粗細等。按鈕也有多種樣式（填充或輪廓）。
可能發生的最大挑戰是找到正確的背景圖像並選擇正確的圖像位置，因為它會根據視口自動調整大小。
示例 2. 投資組合提取物
所有的塊都放在 Section 塊內：
- 高級標題
- 高級標題
- 三列（段落、圖像、圖像、圖像）
- 部分背景：漸變
您還可以放置一個號召性用語按鈕以鏈接到完整的投資組合頁面。
示例 3. 功能或事件卡
在這樣的英雄部分中，您可以展示產品、事件、服務、事物、人等。
高級標題塊允許您選擇任何字體：
在此示例中，我們使用了漸變背景和背景底部形狀分隔線（Waves Multilayered）。
- 兩個高級標題
- 段落
- 按鈕
- 圖片
- 部分背景：漸變+形狀分隔線
示例 4. 號召性用語部分
同樣，您需要從 Section 塊開始。 要像下面的示例那樣放置標題，您可以使用 Getwid 模板庫中的模板或從頭開始創建模式。
這是一個非常簡單的部分，帶有背景圖像、幾個標題和一個集中的按鈕。
- 三個高級標題塊
- 按鈕塊
- 部分背景：不透明的圖像（大小>封面）
您還將享受使用可拖動角度調整內容對齊的容易程度：
通過將標題放在圖像上來創建偏移佈局也是一種趨勢：
在 Getwid 中，您可以通過為文本行設置適當的背景圖像和一些空白來實現這一點。
示例 5. 次要英雄部分
很多時候，子英雄部分會提供有關項目或個人的更多信息。 它適合展示您的簡歷、故事或主要目標。
作為視覺元素，我們使用了 Getwid 的 Image Stack Gallery 塊，它帶有多種樣式。 但是，您可以將其替換為圖像、視頻或任何其他內容元素。
- 兩個高級標題
- 段落
- 按鈕
- 圖像堆棧庫塊
- 部分背景：純色
示例 6. 視覺重音
圖像庫、滑塊和視頻是用於創建引人注目的部分的非常常見的視覺工具。
例如，您可以使用 Getwid 的 Media & Text Slider 塊來構建帶有可選文本內容的幻燈片：
- 媒體和文本滑塊
- 部分背景：漸變+具有自定義高度的頂部和底部分隔線
還有許多基於帖子的 Getwid 塊可以顯示在滑塊中（它們將自動從您的網站內容中獲取）。 想要以滑塊或網格/列表格式呈現一些最新或手動選擇的帖子？ 它有一個塊。
示例 7. 橫幅
Getwid 帶有一個方便的橫幅塊，它提供圖像和文本默認容器。 它還可以選擇動畫效果，使您可以使帶有橫幅的部分更加動態。
該街區是臨時銷售和持續亮點的完美搭配。
- 橫幅
- 部分背景：單色漸變
示例 8. 信息部分
如果您想以結構化和緊湊的方式顯示更多信息，Getwid 為此提供了三個專用塊：Tabs、Accordion 和 Toggle。
這是一個包含 Accordion 塊和旁邊的圖像的兩列佈局：
這些塊的獨特之處在於能夠在選項卡式小部件中包含任何塊。 這意味著，除了文本之外，您還可以將圖像、列表、視頻、畫廊、滑塊添加到選項卡中。
還有更多塊可以為您的營銷部分添加獨特的功能，例如用於構建信息圖像部分的圖像熱點、用於服務的圖標框、實時 Instagram 畫廊提要等等。
您可以從空白的古騰堡頁面構建和設計類似的部分，在總頁面設置中選擇所需的頁面佈局。
總結
您知道在免費的 Total 主題中使用 Gutenberg 和 Getwid 組合的最佳之處是什麼嗎？ 不，重要的不僅僅是塊的數量。
更重要的是，您不需要擁有設計師的眼光（或開發人員的技能）來創建好看的內容。 有很多預製的皮膚、塊狀圖案和現成的設計可以幫助您。 Getwid WordPress Blocks 對於那些使用免費版 Total 的人來說也是頁面構建器的一個很好的替代品。
在塊編輯器不夠成熟之前，一個額外的古騰堡原生插件可能是一個很好的起點。
你試過古騰堡或Getwid嗎？ 讓我們在評論中知道。