使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

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模板。

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

我們現(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)擊前端編輯器按鈕。

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

我們將在著陸頁中廣泛使用 Row 元素。這樣做可以確保頁面既模塊化又響應(yīng)靈敏。我們的第一行將作為英雄部分的容器。現(xiàn)在通過添加元素>行來創(chuàng)建它。

行設(shè)置對話框中,切換到設(shè)計(jì)選項(xiàng)標(biāo)簽,并為該行提供大約16像素的頂部內(nèi)邊距

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

接下來,打開行布局對話框并選擇第二個,將該行拆分為兩列布局選項(xiàng)。

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

我們將在該行的第一列中顯示封面圖像。因此,點(diǎn)擊其中顯示的加號,然后選擇單個圖像選項(xiàng)。在彈出的對話框中,上傳封面圖片并按設(shè)置圖片按鈕。

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

此時(shí),我建議您使用單張圖像設(shè)置對話框來設(shè)置 >圖像尺寸設(shè)為圖像對齊方式設(shè)為居中。如果您對圖像的尺寸仍然不滿意,請隨時(shí)直接指定所需的尺寸(以像素為單位)。

該行的第二列將包含標(biāo)題、說明和按鈕。對于標(biāo)題,我們將使用自定義標(biāo)題元素。與常規(guī)的文本塊元素不同,此元素允許我們在設(shè)置文本樣式時(shí)使用 Google 字體。

彈出自定義標(biāo)題設(shè)置對話框后,在文本字段中輸入圖書的標(biāo)題,然后使用字體系列下拉列表選擇您想要的 Google 字體系列。

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

如果您認(rèn)為字體太小,可以使用字體大小來更改>?字段或使用元素標(biāo)記字段選擇較大的標(biāo)題樣式,例如h1

對于說明,請繼續(xù)向同一列添加文本塊。使用彈出的富文本編輯器,您不僅可以輸入所有文本,還可以對其應(yīng)用簡單的樣式。

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

添加 Button 元素作為該列的最后一個元素。在其配置對話框中,為按鈕添加標(biāo)簽并指定您希望其打開的頁面的 URL。目前,您可以使用任何虛擬 URL。

要使按鈕看起來更精致,請將其樣式設(shè)置為現(xiàn)代,將形狀設(shè)置為圓形,并將其尺寸設(shè)置為。默認(rèn)情況下,該按鈕具有微妙的灰色背景。將其顏色更改為經(jīng)典綠色可以使其更加引人注目。

當(dāng)然,您可以自由嘗試 WPBakery Page Builder 提供的所有其他樣式和形狀。

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

值得注意的是,如果您希望按鈕與列一樣寬,您還必須設(shè)置將對齊屬性設(shè)置為居中,然后選中設(shè)置全寬按鈕?選項(xiàng)。

WPBakery 頁面生成器允許您輕松地將多個不同圖標(biāo)庫中的圖標(biāo)添加到您的按鈕。要向按鈕添加圖標(biāo),您必須首先選中添加圖標(biāo)屬性。然后您就可以選擇所需的圖標(biāo)庫和圖標(biāo)。

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

我們的簡單英雄部分已準(zhǔn)備就緒。它應(yīng)該看起來像這樣:

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

3.創(chuàng)建評論部分

評論或推薦是大多數(shù)著陸頁的重要組成部分。一些良好且真實(shí)的評論通常足以贏得訪問者的信任。現(xiàn)在,我們向頁面添加三個評論。

我們將使用另一個Row元素作為所有評論的容器。將其添加到英雄部分行的正下方,并使用其行布局對話框?qū)⑵浞殖扇小?/p>

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

要使評論部分與英雄部分區(qū)分開來,請切換到設(shè)計(jì)選項(xiàng)標(biāo)簽并將其背景顏色更改為淺灰色。

我們可以使用文本塊元素來顯示評論。不過,要嘗試不同的方法,我們可以使用消息框元素。兩者之間的主要區(qū)別在于消息框可以在其文本旁邊顯示一個大圖標(biāo)。此外,消息框還帶有更多預(yù)定義的樣式和顏色。

在第一列內(nèi)添加第一個消息框。在消息框設(shè)置對話框中,將樣式設(shè)置為3D,然后選擇要顯示的圖標(biāo)。然后像往常一樣使用文本編輯器輸入評論文本。

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

對于其他兩條評論,您不必從頭開始創(chuàng)建消息框。相反,請使用復(fù)制按鈕創(chuàng)建第一個消息框的兩個副本。更改其文本內(nèi)容后,您只需將它們拖放到第二列和第三列即可。

評論部分現(xiàn)在應(yīng)如下所示:

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

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,然后按立即安裝按鈕開始安裝。

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

安裝完成后,按激活按鈕開始使用該插件。

為了簡單起見,我們創(chuàng)建一個僅接受訪問者姓名和電子郵件地址的表單。因此,請轉(zhuǎn)到WPForms > 添加新內(nèi)容。在表單創(chuàng)建向?qū)е校瑸楸韱蚊⑦x擇空白表單模板。

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

在下一個屏幕中,拖放名稱字段和電子郵件?將字段添加到表單上。

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

表單已準(zhǔn)備就緒,因此請保存并返回表單概覽頁面以獲取其獨(dú)特的短代碼。

您現(xiàn)在需要做的就是將表單嵌入到登錄頁面中。為此,請返回 WPBakery Page Builder 的前端編輯器,并在頁面底部添加第三個 Row 元素。在其中添加一個文本塊元素。

文本塊設(shè)置對話框中,首先添加一些文本,向訪問者解釋為什么他們應(yīng)該填寫表單,然后輸入表單的短代碼。按保存更改按鈕后,您應(yīng)該能夠看到全新的表單:

使用 WPBakery(視覺作曲家)設(shè)計(jì)適合移動設(shè)備的登陸頁面

結(jié)論

在本教程中,您學(xué)習(xí)了如何使用 WPBakery Page Builder 提供的多種不同元素來創(chuàng)建簡單的登錄頁面。您還學(xué)習(xí)了如何使用短代碼與第三方插件交互。

CodeCanyon 充滿了 WPBakery Page Builder 的高級插件。通過使用它們,您可以更快地向頁面添加復(fù)雜的功能。以下文章向您介紹了我們發(fā)現(xiàn)的最有趣的 WPBakery 插件:

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點(diǎn)贊14 分享