[ad_1]
想知道是否可以使用作為 WordPress 5.0 的一部分發布的塊編輯器創建登錄頁面? 確實如此,這篇文章將告訴你如何做。
多虧了新的「阻止」方法,您現在可以設置英雄部分、號召性用語 (CTA) 和著陸頁的其他重要元素。
WordPress 中的新塊編輯器是什麼?
塊編輯器是一個全新的內容編輯器,它已成為 WordPress 5.0 的默認編輯器。 在開發過程中,新編輯器被稱為「Gutenberg」。 但是,由於它已成為核心的一部分,因此如果您想更具體一些,它現在只是「WordPress 編輯器」或「塊編輯器」。
如果您不確定我在說什麼,我們已經在新編輯器上寫了一些帖子。 您可以在此處獲得基本介紹,並在此處獲得更一般的教程。
或者,如果您已經熟悉新編輯器,請繼續閱讀以了解如何使用它來創建登錄頁面……
塊編輯器界面快速瀏覽
現在,在我們開始構建過程之前,這裡有一個以塊編輯器的用戶界面為特色的快速瀏覽。
要添加新塊,您將在左側的彈出窗口中工作。 添加塊後,您將能夠在右側的側邊欄中自定義重要信息,例如顏色:
有五個獨特的部分可以劃分您可以使用的塊:
- 通用塊——包含所有通用元素,如段落、標題、列表、引用和其他基本內容元素。
- 格式化——適用於添加自定義代碼、使用 WP 編輯器(經典)編輯塊或添加表格。
- 布局元素——具有改善整體布局的元素,如列。
- 小部件——讓您可以將常規的 WordPress 小部件添加到您的設計中。
- 嵌入 – 幫助您嵌入來自外部平台的內容,如 YouTube、Twitter 等。
您還可以通過第三方插件添加新的塊和功能。 例如,使用 Otter Blocks 插件,您可以獲得價格表、推薦、谷歌地圖等新塊。
如何在 WordPress 中使用塊編輯器創建登錄頁面
我選擇了 Themeisle 的免費 Neve 主題來創建帶有塊編輯器的登錄頁面。 除了免費和輕量級之外,Neve 還可以很好地與新的塊編輯器配合使用,並為您提供許多布局選項,以便您可以創建真正的登錄頁面。
設置好網站後,您需要做的就是轉到 Pages → Add New 並開始您的工作。
第 1 步:選擇頁面布局
為了給著陸頁足夠的空間,您需要選擇沒有側邊欄的布局。 使用 Neve 主題的另一個好處是你可以很容易地做到這一點。
您可以從文檔部分下的右側選擇布局。 使用沒有側邊欄的任何一種布局都是不錯的選擇。 對於測試設計,我沒有選擇內容居中(而不是全形)的側邊欄。
第 2 步:規劃您的基本目標網頁設計
接下來,您要為著陸頁的總體設計制定計劃,以便了解需要包含哪些元素。
例如,如果您嘗試銷售一項服務,那麼您的目標網頁必須有一個定價表(如果是這樣,Otter Blocks 插件會為此提供一個塊)。 或者,如果您想增加您的電子郵件列表,您可能需要一個電子郵件選擇加入表單的前端和中心。
對於本教程,我將使用一個簡單的網路研討會登錄頁面示例。
除了考慮需要哪些元素之外,還要考慮如何安排這些元素。
一種常見的方法是使用 Z 模式。 這種模式適用於內容最少的頁面。
Z 規則基於這樣一個事實:用戶開始在菜單欄上從左到右查看頁面,然後轉到左下角,然後再次轉到右側(前提是該頁面不是內容重的)。 Shopify、Facebook 等一些流行平台使用這種設計。
只要遵循良好的基本網頁設計原則,您就可以隨意為您的目標網頁使用任何設計類型。
第 3 步:使用塊向著陸頁添加元素
現在您已經掌握了重要信息,您就可以開始構建您的頁面了。 通常,從頁面頂部開始構建並向下移動是最簡單的。
對於我們的示例,我將從主標題和副標題開始。
標題、副標題和背景圖片
封面塊是頁面頂部的不錯選擇,因為它允許您包含大圖像以及該圖像頂部的文本。
我將使用它在帶有橙色覆蓋的背景圖像頂部包含標題和副標題。
添加封面塊後,為您的登錄頁面上傳精美的圖片。 為了使您的文本更明顯,您可以使用右側邊欄添加疊加顏色和背景不透明度。
要添加文本,您只需單擊並鍵入。
主要號召性用語 (CTA)
完成 Cover 塊後,您可以使用 Button 塊在下面添加主要 CTA。 您可以使用右側邊欄自定義按鈕的顏色。 您可以看到我在封面下方添加了一個「開始」按鈕:
以下是迄今為止所有內容在實時預覽中的組合方式:
產品詳情/概覽框
要添加好看的產品詳細信息框,您可以使用媒體和文本框。 顧名思義,這個塊創建了一個兩列布局,一側是圖像,另一側是任何類型的文本。 我決定使用文本列表。 你可以在下面看到它:
要改進布局,您可以通過添加 Spacer 塊在上一節和本節之間添加空間。 您可以通過間隔塊上的藍點調整兩個塊之間的距離。
在媒體和文本塊中添加內容和圖像後。 它看起來像這樣:
最終號召性用語 (CTA)
要在著陸頁末尾添加最終 CTA,您可以使用另一個 Button 塊。 或者,如果您更喜歡使用表單,WPForms 插件包含自己的 WPForms 塊,您可以使用它嵌入任何類型的表單。
把它們放在一起
在使用所有這些塊通過塊編輯器創建登錄頁面之後,再來看看最終的登錄頁面設計:
雖然您在塊編輯器中工作時無法看到它,但 Neve 的無邊欄模板為您的最終設計在前端提供了充足的空白空間。 這就是它的全部!
新的塊編輯器並不完全是一個頁面構建器——當前的自定義選項在布局和樣式方面無法與頁面構建器競爭。 但是,隨著開發人員在 2019 年對新編輯器更加熟悉,我們將看到一些出色的附加組件逐漸發布,這應該會縮小差距,讓使用塊編輯器創建登錄頁面變得更加容易。
如果您想了解新的塊編輯器與此用例的其他頁面構建器相比如何,我們還有關於如何構建登錄頁面的教程: