使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

wufei123 2024-06-02 阅读:65 评论:0
wpbakery page builder(以前称为 visual composer)是一个 wordpress 插件,允许您为 wordpress 网站创建自定义页面,而无需编写任何 html 或 css 代码。其直观的编辑器非常适合...

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

在之前的教程中,我向您介绍了 WPBakery Page Builder 的用户界面。今天,我将向您展示如何使用它来创建一个简单的响应式登陆页面。

先决条件

要继续操作,请确保您已:

  • WordPress 5.0 或更高版本
  • 最新版本的WPBakery Page Builder

如果您需要设置插件的帮助,请参阅以下教程:

1.创建一个新页面

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

首先打开 WordPress 实例的管理仪表板并导航至页面标签。然后按添加新按钮创建一个空白页面。

由于如今人们的注意力持续时间很短,因此经过充分优化的着陆页应该很少有干扰,并且具有非常明显的号召性用语。然而,大多数 WordPress 主题会自动将页眉、侧边栏、页脚和导航栏等元素添加到新创建的页面中。这些元素可能会分散访问者的注意力,因此通常最好删除它们。

最简单的方法是使用页面属性部分将空白的单列模板应用到页面。但是,模板的确切名称将取决于您当前的主题。例如,如果您使用免费且开源的 WP Bootstrap Starter 主题,则可以选择Blank with Container模板。

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

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

2.创建英雄部分

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

我们将使用 WPBakery Page Builder 提供的 WYSIWYG 前端编辑器来创建我们的页面。要激活它,请点击前端编辑器按钮。

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

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

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

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

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

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

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

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

此时,我建议您使用单张图像设置对话框来设置 >图像尺寸设为中,图像对齐方式设为居中。如果您对图像的尺寸仍然不满意,请随时直接指定所需的尺寸(以像素为单位)。

该行的第二列将包含标题、说明和按钮。对于标题,我们将使用自定义标题元素。与常规的文本块元素不同,此元素允许我们在设置文本样式时使用 Google 字体。

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

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

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

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

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

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

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

当然,您可以自由尝试 WPBakery Page Builder 提供的所有其他样式和形状。

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

值得注意的是,如果您希望按钮与列一样宽,您还必须设置将对齐属性设置为居中,然后选中设置全宽按钮?选项。

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

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

我们的简单英雄部分已准备就绪。它应该看起来像这样:

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

3.创建评论部分

评论或推荐是大多数着陆页的重要组成部分。一些良好且真实的评论通常足以赢得访问者的信任。现在,我们向页面添加三个评论。

我们将使用另一个Row元素作为所有评论的容器。将其添加到英雄部分行的正下方,并使用其行布局对话框将其分成三列。

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

要使评论部分与英雄部分区分开来,请切换到设计选项标签并将其背景颜色更改为浅灰色。

我们可以使用文本块元素来显示评论。不过,要尝试不同的方法,我们可以使用消息框元素。两者之间的主要区别在于消息框可以在其文本旁边显示一个大图标。此外,消息框还带有更多预定义的样式和颜色。

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

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

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

评论部分现在应如下所示:

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

4.创建表单

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

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

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

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

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

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

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

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

表单已准备就绪,因此请保存并返回表单概览页面以获取其独特的短代码。

您现在需要做的就是将表单嵌入到登录页面中。为此,请返回 WPBakery Page Builder 的前端编辑器,并在页面底部添加第三个 Row 元素。在其中添加一个文本块元素。

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

使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面

结论

在本教程中,您学习了如何使用 WPBakery Page Builder 提供的多种不同元素来创建简单的登录页面。您还学习了如何使用短代码与第三方插件交互。

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

以上就是使用 WPBakery(视觉作曲家)设计适合移动设备的登陆页面的详细内容,更多请关注知识资源分享宝库其它相关文章!

版权声明

本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com

分享:

扫一扫在手机阅读、分享本文

发表评论
热门文章
  • BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)

    BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)
    知名变性人制作总监corrine busche离职bioware,引发业界震荡!外媒“smash jt”独家报道称,《龙腾世纪:影幢守护者》制作总监corrine busche已离开bioware,此举不仅引发了关于个人职业发展方向的讨论,更因其可能预示着bioware埃德蒙顿工作室即将关闭而备受关注。本文将深入分析busche离职的原因及其对bioware及游戏行业的影响。 Busche的告别信:挑战与感激并存 据“Smash JT”获得的内部邮件显示,Busche离职原...
  • boss直聘怎么取消面试预约 boss直聘上面试爽约了会怎么样(面试.爽约.预约.取消.boss.....)

    boss直聘怎么取消面试预约 boss直聘上面试爽约了会怎么样(面试.爽约.预约.取消.boss.....)
    求职宝典:boss直聘面试技巧及取消预约方法 各位求职者注意啦!在Boss直聘上,随意取消面试预约会留下爽约记录,影响后续求职!本文将指导您如何避免爽约,以及如何取消已预约的面试。 如何取消Boss直聘面试预约? 打开Boss直聘APP,进入“我的”页面。 点击“待面试”,查看面试日程。 选择需要取消的面试,点击“取消面试”按钮即可。 Boss直聘面试爽约的后果? 爽约行为会在HR端留下记录,影响您的求职成功率。其他HR也能看到您的不良记录,所以务必重视面试预约。...
  • 闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)

    闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)
    闪耀暖暖钻石竞技场第十七赛季“华梦泡影”即将开启!全新闪耀性感套装【靡城永恒】震撼来袭!想知道如何获得这套精美套装吗?快来看看吧! 【靡城永恒】套装设计理念抢先看: 设计灵感源于夜色中的孤星,象征着淡然、漠视一切的灰色瞳眸。设计师希望通过这套服装,展现出在虚幻与真实交织的夜幕下,一种独特的魅力。 服装细节考究,从面料的光泽、鞋跟声响到裙摆的弧度,都力求完美还原设计初衷。 【靡城永恒】套装设计亮点: 闪耀的绸缎与金丝交织,轻盈的羽毛增添华贵感。 这套服装仿佛是从无尽的黑...
  • 蛋仔派对2025最新皮肤兑换码汇总 最新皮肤兑换码一览(兑换.皮肤.最新.派对.汇总.....)

    蛋仔派对2025最新皮肤兑换码汇总 最新皮肤兑换码一览(兑换.皮肤.最新.派对.汇总.....)
    蛋仔派对2025最新皮肤兑换码大放送!游戏内新增多款皮肤兑换码,包含最新、福利和通用三种类型,助你轻松获取精美奖励! 赶紧来看看如何兑换吧! 兑换码列表: 最新兑换码: ccewndj4k4k、cdkqdfm4fh、peetnmp4ef、cdxymk8f67 福利兑换码: cca863ywtfa、eggy2310am、eggy2311gz、eggyeggy9wz 通用兑换码: pec74dkcty、jsrqkrrjmh、cd3wt7wrph、ccepn7d8cjf...
  • python怎么调用其他文件函数

    python怎么调用其他文件函数
    在 python 中调用其他文件中的函数,有两种方式:1. 使用 import 语句导入模块,然后调用 [模块名].[函数名]();2. 使用 from ... import 语句从模块导入特定函数,然后调用 [函数名]()。 如何在 Python 中调用其他文件中的函数 在 Python 中,您可以通过以下两种方式调用其他文件中的函数: 1. 使用 import 语句 优点:简单且易于使用。 缺点:会将整个模块导入到当前作用域中,可能会导致命名空间混乱。 步骤:...