WPBakery Page Builder，之前称为Visual Composer，是一款WordPress插件，使得创建自定义页面无需编写HTML或CSS代码成为可能。这款直观的编辑工具特别适合非编码设计者，他们希望快速将设计转化为功能齐全的WordPress页面。同时，它也为经验丰富的web开发者提供了节省时间和精力的途径。在之前的教程中，我们探讨了WPBakery页面构建器的用户界面。今天，我们将学习如何利用它来创建一个简单的响应式登录页面。
在开始之前，请确保你已准备以下内容：
– WordPress 5.0或更高版本
– WPBakery Page Builder的最新版
– 如需安装帮助，可参考相关教程
在本教程中，我们将制作一个登录页面，用于将营销活动流量转化为潜在客户或销售。为了实现目标，我们将创建一个登录页面，以鼓励访客购买电子书。
步骤1：创建新页面
登录WordPress管理后台，点击“页面”选项，然后按“新建”按钮创建一个空白页面。由于现代用户的注意力时间较短，理想情况下，登录页面应无干扰且调用行动明确。许多WordPress主题会在新建页面中自动添加页眉、侧边栏、页脚和导航栏等，这些可能会分散访客注意力，所以通常建议删除它们。你可以通过页面属性应用空白单列模板来实现，模板名称依主题而定，如使用WP Bootstrap Starter主题，可选择“带容器的空白模板”。
现在我们准备开始添加页面内容。
步骤2：创建英雄部分
页面的第一个重要部分是英雄部分，包括电子书标题、封面图片、书籍详情和购买按钮。你可以使用任何图片作为封面，或在Canva快速创建一个。我们将使用WPBakery的前端编辑器来创建页面。点击“前端编辑器”按钮启动编辑器。
首先，添加一个“行”元素作为英雄部分的容器。在“行设置”的“设计选项”中，设置约16像素的顶部内边距。接着，在“行布局”中选择两列布局。
在第一列添加“单个图像”元素，上传封面图片并调整图像设置为居中对齐。第二列将包含标题、描述和按钮。使用“自定义标题”元素创建标题，可选择Google字体。为说明添加“文本块”元素，使用富文本编辑器编辑内容。添加“按钮”元素，设定按钮标签和虚拟URL，设置样式为现代、圆形、大号，背景色改为醒目的绿色。若希望按钮与列等宽，还需设置对齐方式为居中并启用全宽按钮。
步骤3：创建评价部分
多数登录页面都包含用户评价，以增强信任感。我们将添加三条评价。创建一个新的“行”元素，分为三列，背景设为浅灰色。使用“消息框”元素展示评价，可选择不同的样式和颜色。第一条消息框创建完成后，通过复制按钮创建其余两条，并更改文本内容。
步骤4：创建表单
为了进一步吸引访客，可以提供免费章节或订阅简讯的机会，为此我们需要一个表单收集访客信息。我们将使用免费的WPForms插件创建表单。在插件界面搜索并安装WPForms，激活后创建一个新的表单，添加姓名和电子邮件字段。保存表单后，获取短代码。在WPBakery前端编辑器的页面底部添加一行，插入“文本块”元素，输入表单的短代码。保存更改后，表单就会出现在页面上。
通过本教程，你学会了如何利用WPBakery Page Builder的各种元素创建登录页面，以及如何集成第三方插件。CodeCanyon上有许多高级插件可进一步提升WPBakery的功能，不妨一探究竟。
相关文章
