使用WP bakery（Visual Composer）设计适用于移动设备的登录页面。

Wpbakery page builder（以前称为visual composer）是一个wordpress插件，允许您为wordpress网站创建自定义页面，而无需编写任何html或css代码。其直观的编辑器非常适合希望将其设计快速转换为功能齐全的wordpress页面的非编码设计人员。然而，有经验的web开发人员也可以通过将其添加到他们的开发工作流程中来节省大量时间和精力。

在上一个教程中，我向您介绍了WPBakery页面生成器的用户界面。今天，我将向您展示如何使用它来创建一个简单的响应式登录页面。

继续的先决条件，请确保您具备:

WordPress 5.0或更高版本WPBakery Page Builder的最新版本如果您需要设置插件的帮助，请参考以下教程:

1.创建新页面登录页面通常是为了将营销活动产生的流量转化为潜在客户或销售而构建的页面。为了使其有效，必须有明确的目标。在本教程中，为了提供一个实用的示例，我们将创建一个登录页面来说服访问者购买电子书。

首先，打开WordPress实例的管理仪表板并导航到页面选项卡。然后按“添加新项”按钮创建一个空白页。

因为现在人们的注意力持续时间很短，完全优化的登陆页面应该几乎没有干扰和非常明显的调用语言。然而，大多数WordPress主题会自动在新创建的页面中添加页眉、侧栏、页脚和导航栏等元素。这些元素可能会分散访问者的注意力，因此通常最好删除它们。

最简单的方法是使用页面属性部分将空白单列模板应用于页面。然而，模板的确切名称将取决于您当前的主题。例如，如果您使用免费和开源的WP Bootstrap Starter主题，则可以选择带容器的空白模板。

我们现在准备开始向页面添加内容。

2.创建英雄部分我们页面的第一个也是最突出的部分将是英雄部分。它将包含电子书的标题，封面图片，有关该书的一些详细信息和购买按钮。随意使用任何照片作为封面图片。或者，您可以使用Canva快速创建一个。

我们将使用WPBakery页面生成器提供的所见即所得前端编辑器来创建我们的页面。要激活它，请单击前端编辑器按钮。

我们将在登录页面中广泛使用Row元素。这样做可以确保页面既模块化又响应迅速。我们的第一行将作为英雄部分的容器。现在通过添加一个元素》行来创建它。

在“行设置”对话框中，切换到“设计选项”选项卡，并为该行提供大约16像素的顶部内边距。

接下来，打开“行布局”对话框，选择第二个选项将行拆分为两个列布局选项。

我们将在该行的第一列显示封面图像。因此，单击其中显示的加号，然后选择单个图像选项。在弹出的对话框中，上传封面图片并按下设置图片按钮。

此时，我建议您使用“单个图像设置”对话框将“图像大小”设置为“居中”，并将“图像对齐”设置为“居中”。如果您仍然不满意图像的大小，请随时直接指定所需的大小（以像素为单位）。

该行的第二列将包含标题、描述和按钮。对于标题，我们将使用一个定制的标题元素。与常规的文本块元素不同，该元素允许我们在设置文本样式时使用Google字体。

弹出自定义标题设置对话框后，在文本字段中输入图书的标题，然后使用字体系列下拉列表选择您想要的Google字体系列。

如果您认为字体太小，可以使用字体大小来更改》字段或使用元素标签字段来选择较大的标题样式，如h1。

对于说明，请继续向同一列添加文本块。使用弹出的富文本编辑器，您不仅可以输入所有文本，还可以对其应用简单的样式。

添加一个按钮元素作为列的最后一个元素。在其配置对话框中，标记该按钮并指定要打开的页面的URL。目前，您可以使用任何虚拟URL。

要使按钮看起来更精致，请将其样式设置为现代，将其形状设置为圆形，并将大小设置为大。默认情况下，该按钮有一个微妙的灰色背景。将其颜色更改为经典绿色可以使其更加引人注目。

当然，您可以自由尝试WPBakery页面生成器提供的所有其他样式和形状。

值得注意的是，如果希望按钮与列等宽，还必须将对齐属性设置为居中，然后选择设置全角按钮？选项。

WPBakery页面生成器允许您轻松地将几个不同图标库中的图标添加到按钮中。要向按钮添加图标，必须先选中添加图标属性。然后您可以选择所需的图标库和图标。

我们简单的英雄部分准备好了。它应该是这样的:

3.创建评论或建议是大多数登录页面的重要部分。一些好的和真实的评论通常足以赢得访问者的信任。现在，让我们向页面添加三条注释。

我们将使用另一个Row元素作为所有注释的容器。将其直接添加到hero部分行的下方，并使用其“行布局”对话框将其分成三列。

要区分注释部分和英雄部分，请切换到设计选项选项卡，并将其背景颜色更改为浅灰色。

我们可以使用文本块元素来显示注释。然而，为了尝试不同的方法，我们可以使用消息框元素。两者的主要区别在于消息框可以在其文本旁边显示一个大图标。此外，消息框有更多预定义的样式和颜色。

在第一列中添加第一个消息框。在“消息框设置”对话框中，将样式设置为3D，然后选择要显示的图标。然后像往常一样使用文本编辑器输入注释文本。

对于其他两个注释，您不必从头开始创建消息框。相反，使用复制按钮创建第一个消息框的两个副本。更改文本内容后，您只需将它们拖放到第二列和第三列。

注释部分现在应如下所示:

4.创建表单有些访问者可能仍然不确定是否购买它。为了说服他们，你可以采取几种不同的方法。例如，你可以尝试将本书的第一章作为电子邮件免费发送给他们。或者你可以邀请他们订阅你的简讯，让他们有机会赢得这本书。无论您选择哪种方法，您都需要一个表单来获取访问者的联系信息。

WPBakery页面生成器与大多数现代表单生成器插件兼容。在本教程中，我们将使用免费的WPForms插件（拥有超过200万活跃用户）来创建表单。要安装它，请转到管理仪表板并导航到插件》添加新插件。在那里搜索wpforms，然后按“立即安装”按钮开始安装。

安装完成后，按激活按钮开始使用插件。

为了简单起见，我们创建了一个只接受访问者姓名和电子邮件地址的表单。所以转到WPForms》添加新内容。在表单创建向导中，命名表单并选择一个空白表单模板。

在下一个屏幕上，拖放姓名字段和电子邮件以将该字段添加到表单中。

表格已准备好，请保存并返回表格概览页面以获取其唯一的短代码。

您现在需要做的就是将表单嵌入登录页面。为此，请返回WPBakery页面生成器的前端编辑器，并在页面底部添加第三行元素。向其添加文本块元素。

在“文本块设置”对话框中，首先添加一些文本向访问者解释为什么他们应该填写表单，然后输入表单的短代码。按下保存更改按钮后，您应该能够看到一个全新的表单:

结论在本教程中，您学习了如何使用WPBakery页面生成器提供的许多不同元素创建一个简单的登录页面。您还学习了如何使用短代码与第三方插件进行交互。

CodeCanyon充满了WPBakery页面生成器的高级插件。通过使用它们，您可以更快地向页面添加复杂的功能。下面这篇文章向您介绍了我们发现的最有趣的WPBakery插件:

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：使用WP bakery（Visual Composer）设计适用于移动设备的登录页面。 https://zhujicankao.com/109867.html