.jpg)
wpbakery page builder（以前稱為 visual composer）是一個 wordpress 插件，允許您為 wordpress 網(wǎng)站創(chuàng)建自定義頁面，而無需編寫任何 html 或 css 代碼。其直觀的編輯器非常適合非編碼設(shè)計(jì)師，他們希望將其設(shè)計(jì)快速轉(zhuǎn)換為功能齊全的 wordpress 頁面。然而，經(jīng)驗(yàn)豐富的 web 開發(fā)人員也可以通過將其添加到他們的開發(fā)工作流程中來節(jié)省大量時(shí)間和精力。
在之前的教程中，我向您介紹了 WPBakery Page Builder 的用戶界面。今天，我將向您展示如何使用它來創(chuàng)建一個簡單的響應(yīng)式登陸頁面。
先決條件
要繼續(xù)操作，請確保您已：
- WordPress 5.0 或更高版本
- 最新版本的WPBakery Page Builder
如果您需要設(shè)置插件的幫助，請參閱以下教程：
1.創(chuàng)建一個新頁面
著陸頁通常是為了將營銷活動產(chǎn)生的流量轉(zhuǎn)化為潛在客戶或銷售而構(gòu)建的頁面。為了使其有效，必須有明確的目標(biāo)。在本教程中，為了提供一個實(shí)際的示例，我們將創(chuàng)建一個登陸頁面來說服訪問者購買電子書。
首先打開 WordPress 實(shí)例的管理儀表板并導(dǎo)航至頁面標(biāo)簽。然后按添加新按鈕創(chuàng)建一個空白頁面。
由于如今人們的注意力持續(xù)時(shí)間很短，因此經(jīng)過充分優(yōu)化的著陸頁應(yīng)該很少有干擾，并且具有非常明顯的號召性用語。然而，大多數(shù) WordPress 主題會自動將頁眉、側(cè)邊欄、頁腳和導(dǎo)航欄等元素添加到新創(chuàng)建的頁面中。這些元素可能會分散訪問者的注意力，因此通常最好刪除它們。
最簡單的方法是使用頁面屬性部分將空白的單列模板應(yīng)用到頁面。但是，模板的確切名稱將取決于您當(dāng)前的主題。例如，如果您使用免費(fèi)且開源的 WP Bootstrap Starter 主題，則可以選擇Blank with Container模板。
我們現(xiàn)在準(zhǔn)備開始向頁面添加內(nèi)容。
2.創(chuàng)建英雄部分
我們頁面的第一個也是最突出的部分將是英雄部分。它將包含電子書的標(biāo)題、封面圖片、有關(guān)該書的一些詳細(xì)信息以及購買按鈕。隨意使用任何照片作為封面圖片。或者，您可以使用 Canva 快速創(chuàng)建一個。
我們將使用 WPBakery Page Builder 提供的 WYSIWYG 前端編輯器來創(chuàng)建我們的頁面。要激活它，請點(diǎn)擊前端編輯器按鈕。
我們將在著陸頁中廣泛使用 Row 元素。這樣做可以確保頁面既模塊化又響應(yīng)靈敏。我們的第一行將作為英雄部分的容器。現(xiàn)在通過添加元素>行來創(chuàng)建它。
在行設(shè)置對話框中，切換到設(shè)計(jì)選項(xiàng)標(biāo)簽，并為該行提供大約16像素的頂部內(nèi)邊距。
接下來，打開行布局對話框并選擇第二個，將該行拆分為兩列布局選項(xiàng)。
我們將在該行的第一列中顯示封面圖像。因此，點(diǎn)擊其中顯示的加號，然后選擇單個圖像選項(xiàng)。在彈出的對話框中，上傳封面圖片并按設(shè)置圖片按鈕。
此時(shí)，我建議您使用單張圖像設(shè)置對話框來設(shè)置 >圖像尺寸設(shè)為中，圖像對齊方式設(shè)為居中。如果您對圖像的尺寸仍然不滿意，請隨時(shí)直接指定所需的尺寸（以像素為單位）。
該行的第二列將包含標(biāo)題、說明和按鈕。對于標(biāo)題，我們將使用自定義標(biāo)題元素。與常規(guī)的文本塊元素不同，此元素允許我們在設(shè)置文本樣式時(shí)使用 Google 字體。
彈出自定義標(biāo)題設(shè)置對話框后，在文本字段中輸入圖書的標(biāo)題，然后使用字體系列下拉列表選擇您想要的 Google 字體系列。
如果您認(rèn)為字體太小，可以使用字體大小來更改>?字段或使用元素標(biāo)記字段選擇較大的標(biāo)題樣式，例如h1。
對于說明，請繼續(xù)向同一列添加文本塊。使用彈出的富文本編輯器，您不僅可以輸入所有文本，還可以對其應(yīng)用簡單的樣式。
添加 Button 元素作為該列的最后一個元素。在其配置對話框中，為按鈕添加標(biāo)簽并指定您希望其打開的頁面的 URL。目前，您可以使用任何虛擬 URL。
要使按鈕看起來更精致，請將其樣式設(shè)置為現(xiàn)代，將形狀設(shè)置為圓形，并將其尺寸設(shè)置為大。默認(rèn)情況下，該按鈕具有微妙的灰色背景。將其顏色更改為經(jīng)典綠色可以使其更加引人注目。
當(dāng)然，您可以自由嘗試 WPBakery Page Builder 提供的所有其他樣式和形狀。
值得注意的是，如果您希望按鈕與列一樣寬，您還必須設(shè)置將對齊屬性設(shè)置為居中，然后選中設(shè)置全寬按鈕？選項(xiàng)。
WPBakery 頁面生成器允許您輕松地將多個不同圖標(biāo)庫中的圖標(biāo)添加到您的按鈕。要向按鈕添加圖標(biāo)，您必須首先選中添加圖標(biāo)屬性。然后您就可以選擇所需的圖標(biāo)庫和圖標(biāo)。
我們的簡單英雄部分已準(zhǔn)備就緒。它應(yīng)該看起來像這樣：
3.創(chuàng)建評論部分
評論或推薦是大多數(shù)著陸頁的重要組成部分。一些良好且真實(shí)的評論通常足以贏得訪問者的信任。現(xiàn)在，我們向頁面添加三個評論。
我們將使用另一個Row元素作為所有評論的容器。將其添加到英雄部分行的正下方，并使用其行布局對話框?qū)⑵浞殖扇小?/p>
要使評論部分與英雄部分區(qū)分開來，請切換到設(shè)計(jì)選項(xiàng)標(biāo)簽并將其背景顏色更改為淺灰色。
我們可以使用文本塊元素來顯示評論。不過，要嘗試不同的方法，我們可以使用消息框元素。兩者之間的主要區(qū)別在于消息框可以在其文本旁邊顯示一個大圖標(biāo)。此外，消息框還帶有更多預(yù)定義的樣式和顏色。
在第一列內(nèi)添加第一個消息框。在消息框設(shè)置對話框中，將樣式設(shè)置為3D，然后選擇要顯示的圖標(biāo)。然后像往常一樣使用文本編輯器輸入評論文本。
對于其他兩條評論，您不必從頭開始創(chuàng)建消息框。相反，請使用復(fù)制按鈕創(chuàng)建第一個消息框的兩個副本。更改其文本內(nèi)容后，您只需將它們拖放到第二列和第三列即可。
評論部分現(xiàn)在應(yīng)如下所示：
4.創(chuàng)建表單
一些訪問者可能仍然不確定是否要購買。為了說服他們，您可以采取幾種不同的方法。例如，您可以嘗試免費(fèi)將本書的第一章作為電子郵件發(fā)送給他們。或者您可以邀請他們訂閱您的時(shí)事通訊，并給他們一個贏得這本書的機(jī)會。無論您選擇哪種方法，您都需要一個表格來獲取訪問者的聯(lián)系信息。
WPBakery 頁面生成器與大多數(shù)現(xiàn)代表單生成器插件兼容。在本教程中，我們將使用免費(fèi)的 WPForms 插件（該插件擁有超過 200 萬活躍用戶）來創(chuàng)建表單。要安裝它，請轉(zhuǎn)到管理儀表板并導(dǎo)航至插件 > 添加新。在那里搜索 wpforms，然后按立即安裝按鈕開始安裝。
安裝完成后，按激活按鈕開始使用該插件。
為了簡單起見，我們創(chuàng)建一個僅接受訪問者姓名和電子郵件地址的表單。因此，請轉(zhuǎn)到WPForms > 添加新內(nèi)容。在表單創(chuàng)建向?qū)е校瑸楸韱蚊⑦x擇空白表單模板。
在下一個屏幕中，拖放名稱字段和電子郵件?將字段添加到表單上。
表單已準(zhǔn)備就緒，因此請保存并返回表單概覽頁面以獲取其獨(dú)特的短代碼。
您現(xiàn)在需要做的就是將表單嵌入到登錄頁面中。為此，請返回 WPBakery Page Builder 的前端編輯器，并在頁面底部添加第三個 Row 元素。在其中添加一個文本塊元素。
在文本塊設(shè)置對話框中，首先添加一些文本，向訪問者解釋為什么他們應(yīng)該填寫表單，然后輸入表單的短代碼。按保存更改按鈕后，您應(yīng)該能夠看到全新的表單：
結(jié)論
在本教程中，您學(xué)習(xí)了如何使用 WPBakery Page Builder 提供的多種不同元素來創(chuàng)建簡單的登錄頁面。您還學(xué)習(xí)了如何使用短代碼與第三方插件交互。
CodeCanyon 充滿了 WPBakery Page Builder 的高級插件。通過使用它們，您可以更快地向頁面添加復(fù)雜的功能。以下文章向您介紹了我們發(fā)現(xiàn)的最有趣的 WPBakery 插件：
.png)
