如何在 WordPress 中使用塊編輯器創建登錄頁面

[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 等一些流行平台使用這種設計。

z 模式

只要遵循良好的基本網頁設計原則,您就可以隨意為您的目標網頁使用任何設計類型。

第 3 步:使用塊向著陸頁添加元素

現在您已經掌握了重要信息,您就可以開始構建您的頁面了。 通常,從頁面頂部開始構建並向下移動是最簡單的。

對於我們的示例,我將從主標題和副標題開始。

標題、副標題和背景圖片

選擇封面

封面塊是頁面頂部的不錯選擇,因為它允許您包含大圖像以及該圖像頂部的文本。

我將使用它在帶有橙色覆蓋的背景圖像頂部包含標題和副標題。

添加塊

添加封面塊後,為您的登錄頁面上傳精美的圖片。 為了使您的文本更明顯,您可以使用右側邊欄添加疊加顏色和背景不透明度。

要添加文本,您只需單擊並鍵入。

主要號召性用語 (CTA)

完成 Cover 塊後,您可以使用 Button 塊在下面添加主要 CTA。 您可以使用右側邊欄自定義按鈕的顏色。 您可以看到我在封面下方添加了一個「開始」按鈕:

覆蓋結構

以下是迄今為止所有內容在實時預覽中的組合方式:

封面預覽

產品詳情/概覽框

要添加好看的產品詳細信息框,您可以使用媒體和文本框。 顧名思義,這個塊創建了一個兩列布局,一側是圖像,另一側是任何類型的文本。 我決定使用文本列表。 你可以在下面看到它:

重新調整

要改進布局,您可以通過添加 Spacer 塊在上一節和本節之間添加空間。 您可以通過間隔塊上的藍點調整兩個塊之間的距離。

下一個區塊

在媒體和文本塊中添加內容和圖像後。 它看起來像這樣:

媒體和文字

最終號召性用語 (CTA)

要在著陸頁末尾添加最終 CTA,您可以使用另一個 Button 塊。 或者,如果您更喜歡使用表單,WPForms 插件包含自己的 WPForms 塊,您可以使用它嵌入任何類型的表單。

把它們放在一起

在使用所有這些塊通過塊編輯器創建登錄頁面之後,再來看看最終的登錄頁面設計:

使用 WordPress 中的新塊編輯器的最終登陸頁面

雖然您在塊編輯器中工作時無法看到它,但 Neve 的無邊欄模板為您的最終設計在前端提供了充足的空白空間。 這就是它的全部!

新的塊編輯器並不完全是一個頁面構建器——當前的自定義選項在布局和樣式方面無法與頁面構建器競爭。 但是,隨著開發人員在 2019 年對新編輯器更加熟悉,我們將看到一些出色的附加組件逐漸發布,這應該會縮小差距,讓使用塊編輯器創建登錄頁面變得更加容易。

如果您想了解新的塊編輯器與此用例的其他頁面構建器相比如何,我們還有關於如何構建登錄頁面的教程:

相關文章