使用WPBakery创建响应性登录页面（Visual Composer）
WPBakery Page Builder ，以前称为Visual Composer，是一个WordPress插件，可让您为WordPress网站创建自定义页面，而无需编写任何HTML或CSS代码。 它的直观编辑器非常适合希望将其设计快速转换为功能齐全的WordPress页面的非编码器设计师。 但是，经验丰富的Web开发人员也可以通过将其添加到其开发工作流中来节省大量时间和精力。
在先前的教程中 ，我向您介绍了WPBakery Page Builder的用户界面。 今天，我将向您展示如何使用它来创建一个简单的响应式登录页面。
先决条件
要继续进行，请确保您具有：
- WordPress 5.0或更高版本
- 最新版本的WPBakery Page Builder
登陆页面通常是用于将营销活动产生的流量转换为潜在客户或销售的页面。 为了使其有效，它必须具有明确的目标。 在本教程中，为了给出一个实际的示例，我们将创建一个说服访问者购买电子书的登录页面。
首先打开WordPress实例的管理信息中心，然后导航到“ 页面”标签。 然后按添加新按钮以创建空白页。
由于这些天的注意力跨度很短，因此，经过优化的着陆页几乎不会分散注意力，而且行动起来非常明显。 但是，大多数WordPress主题会自动将标头，侧边栏，页脚和导航栏等元素添加到新创建的页面。 这些元素会分散您的访问者的注意力，因此删除它们通常是一个好主意。
最简单的方法是使用“ 页面属性”部分，将空白的单列模板应用于页面。 但是，模板的确切名称将取决于您当前的主题。 例如，如果您使用的是免费且开源的WP Bootstrap Starter主题，则可以选择Blank with Container模板。
现在，我们准备开始向页面添加内容。
我们页面的第一个也是最突出的部分将是英雄部分。 它将具有电子书的标题，封面图像，有关该书的一些详细信息以及“ 购买”按钮。 随意使用任何照片作为封面图像。 另外，您可以使用Canva快速创建一个。
我们将使用WPBakery Page Builder提供的WYSIWYG前端编辑器来创建我们的页面。 要**它，请单击“ 前端编辑器”按钮。
我们将在目标网页中广泛使用Row元素。 这样做可以确保页面既模块化又响应Swift。 我们的第一行将用作英雄部分的容器。 现在通过添加元素>行创建它。
在“ 行设置”对话框中，切换到“ 设计选项”选项卡，并为该行提供约16像素的顶部填充。
接下来，通过打开“ 行布局”对话框并选择第二个布局选项，将行分为两列。
我们将在该行的第一列中显示封面图像。 因此，单击其中显示的加号，然后选择“ 单个图像”选项。 在弹出的对话框中，上传封面图像，然后按“ 设置图像”按钮。
此时，建议您使用“ 单个图像设置”对话框将“ 图像大小”设置为“ 中” ，将“ 图像对齐”设置为“ 居中” 。 如果您仍然对图像的尺寸不满意，请直接以像素为单位指定所需的尺寸。
该行的第二列将位于标题，描述和按钮的位置。 对于标题，我们将使用“ 自定义标题”元素。 与常规的“ 文本块”元素不同，此元素允许我们在设置文本样式时使用Google字体。
弹出“ 自定义标题设置”对话框后，在“ 文本”字段中输入书籍的标题，然后使用“ 字体系列”下拉列表选择所需的Google字体系列。
如果您认为字体太小，则可以使用“ 字体大小”字段进行更改，也可以使用“ 元素”标签字段选择较大的标题样式，例如h1 。
对于描述，请继续并在同一列中添加一个文本块 。 使用弹出的富文本编辑器，您不仅可以键入所有文本，还可以对其应用简单的样式。
作为该列的最后一个元素，添加一个Button元素。 在其配置对话框中，为按钮添加标签，并指定要打开的页面的URL。 现在，您可以使用任何虚拟URL。
为了使按钮看起来更优美，请将其样式设置为现代 ，将其形状设置为圆形 ，并将其大小设置为大 。 默认情况下，该按钮具有微妙的灰色背景。 将其颜色更改为经典绿色可以使其更加出色。
您当然可以*尝试WPBakery Page Builder提供的所有其他样式和形状。
值得注意的是，如果希望按钮的宽度与列的宽度相同，还必须将Alignment属性设置为Center并选中Set full width按钮？ 选项。
WPBakery页面构建器使您可以轻松地将来自几个不同图标库的图标添加到按钮中。 要将图标添加到按钮，必须首先检查“ 添加图标”属性。 然后，您可以选择所需的图标库和图标。
我们的简单英雄部分已准备就绪。 它看起来应该像这样：
评论或推荐是大多数目标网页的重要组成部分。 通常，一些好的和真实的评论足以赢得访问者的信任。 现在，让我们在页面上添加三个评论。
我们将使用另一个Row元素作为所有评论的容器。 将其添加到英雄区行的下面，并使用其“ 行布局”对话框将其分为三列。
要使评论部分看起来与英雄部分不同，请切换到“ 设计选项”选项卡，并将其背景颜色更改为浅灰色。
我们可以使用文本块元素来显示评论。 但是，要尝试其他操作，请改用“ 消息框”元素。 两者之间的主要区别在于，消息框可以在其文本旁边显示一个大图标。 此外，消息框还带有更多预定义的样式和颜色。
在第一列内添加第一个消息框。 在“ 消息框设置”对话框中，将“ 样式 ”设置为3D，然后选择要显示的图标。 然后像往常一样使用文本编辑器输入评论文本。
对于其他两个评论，您不必从头开始创建消息框。 而是，使用“ 复制”按钮创建第一个消息框的两个副本。 更改其文本内容后，只需将其拖放到第二和第三列中即可。
现在，“审核”部分应如下所示：
一些访问者可能仍然不确定是否要购买。 为了说服他们，您可以采用几种不同的方法。 例如，您可以尝试将书的第一章作为电子邮件免费发送给他们。 或者，您可以邀请他们订阅您的时事通讯，并给他们机会来赢得这本书。 无论选择哪种方法，您都需要一张表格以获取访客的联系信息。
WPBakery Page Builder与大多数现代的Form Builder插件兼容。 在本教程中，我们将使用具有超过200万活跃用户的免费WPForms插件来创建表单。 要安装它，请转到管理信息中心，然后导航至Plugins> Add New 。 在此处搜索wpforms ，然后按立即安装按钮开始安装。
安装完成后，按“ **”按钮开始使用插件。
为简单起见，让我们创建一个仅接受访问者姓名和电子邮件地址的表单。 因此，转到WPForms> Add New 。 在表单创建向导中，为表单命名，然后选择“ 空白表单”模板。
在下一个屏幕中，将“ 名称”字段和“ 电子邮件”字段拖放到表单上。
表单已准备就绪，因此请保存并返回到“ 表单概述”页面以获取其唯一的简码。
您现在需要做的就是将表单嵌入到目标网页中。 为此，请返回WPBakery页面构建器的前端编辑器，并在页面底部添加第三个Row元素。 在其中添加一个Text Block元素。
在“ 文本块设置”对话框中，首先添加一些文本，向您的访问者解释为什么他们应该填写表单，然后键入表单的简码。 按“ 保存更改”按钮后，您应该可以查看全新的表格：
结论
在本教程中，您学习了如何使用WPBakery Page Builder提供的几种不同元素来创建简单的登录页面。 您还学习了如何使用简码与第三方插件交互。