• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载

什么是WPBakery Page Builder怎么使用(Visual Composer)

WPBakery Page Builder 以前称为 Visual Composer)是 2020 年您可以使用的最灵活、功能最丰富的 wordpress 页面构建器插件。它与几乎所有现代 WordPress 主题兼容,您不需要任何编程能够使用它的技能。事实上,在使用它时,您甚至不必输入任何短代码!

借助 WPBakery Page Builder 提供的精致而直观的前端和后端编辑器,为您的 WordPress 网站创建页面通常只需要几次点击和拖放操作。在本 Visual Composer 教程中,我将向您展示如何将 WPBakery Page Builder 添加到您的 WordPress 实例中,并向您介绍它的所有重要功能。

先决条件

为了能够遵循这个 WPBakery Page Builder 教程,您需要:

  • WordPress  5.0 或更高版本

  • Envato 帐户

此外,为了更好地了解如何使用 Visual Composer 以及为什么应该使用 WPBakery Page Builder 而不是当今可用的所有其他页面构建器插件,我建议您阅读以下文章:

什么是WPBakery Page Builder怎么使用(Visual Composer)  第1张WordPress 是什么让 WPBakery(Visual Composer)成为当今最好的 WordPress 页面构建器?简·贝克

1. 安装WPBakery页面生成器

WPBakery Page Builder 是一个高级 WordPress 插件。它仍然经常以其旧名称而闻名:Visual Composer。

什么是WPBakery Page Builder怎么使用(Visual Composer)  第2张

购买后,您将能够下载包含与插件相关的各种文件的 ZIP 文件。

提取 ZIP 文件并查找名为 js_composer.zip的文件。这是一个插件存档文件,您必须将其上传到您的 WordPress 服务器因此,登录到您的 WordPress 管理面板并转到 Plugins > Add New然后单击 Upload Plugin 按钮并选择 js_composer.zip

按 立即安装 按钮开始安装。

什么是WPBakery Page Builder怎么使用(Visual Composer)  第3张

安装完成后,按 激活插件 按钮。一旦您这样做,您将被带到 WPBakery Page Builder 的欢迎屏幕。

2. 配置插件

学习如何使用 WPBakery Page Builder 很容易。该插件非常可定制,提供了数十种配置选项,您可以对其进行调整以满足需求按欢迎屏幕上的 “设置” 按钮查看它们。

什么是WPBakery Page Builder怎么使用(Visual Composer)  第4张

该插件具有经过深思熟虑的默认配置,足以满足大多数用例。例如,在“ 常规设置” 选项卡中,您可以看到它支持开箱即用的响应式设计。该插件还尝试应用各种优化,以确保您使用它创建的页面具有最少的加载时间。例如,默认情况下它仅使用 Google 字体的拉丁脚本子集。要支持其他脚本,您需要做的就是更改 Google 字体子集 选项。

在 角色管理器 选项卡中,您可能会注意到此插件仅适用于您的 WordPress 站点的页面。如果您希望它也可用于您的帖子,请 在 帖子类型列表中选择 自定义 并启用 帖子 选项。

什么是WPBakery Page Builder怎么使用(Visual Composer)  第5张进行更改后,向下滚动并单击“ 保存更改” 按钮。

最后,如果您想自定义 WPBakery Page Builder 内容元素的外观和感觉,请切换到“ 设计选项”选项 卡并选中“ 使用自定义设计” 字段。完成此操作后,您将能够更改插件使用的默认颜色、边距和宽度。

什么是WPBakery Page Builder怎么使用(Visual Composer)  第6张

3. 使用后端编辑器

这是本 Visual Composer 教程中的关键步骤。WPBakery Page Builder 带有两个强大的编辑器:一个后端编辑器和一个前端编辑器。它们都只能在页面或帖子中访问。因此,现在,我建议您通过转到 Pages > Add New创建一个新页面。

在页面创建界面中,您将能够选择要使用的编辑器。首先单击 后端编辑器 按钮以打开后端编辑器。

什么是WPBakery Page Builder怎么使用(Visual Composer)  第7张使用此编辑器,您可以轻松地将各种常用元素添加到页面中。WPBakery Page Builder 提供简单的元素,例如文本块、图像和分隔符。它还提供了更高级的功能,例如 Facebook“Like”按钮、谷歌地图、图表动画轮播

为了便于访问,这些元素分为四个不同的类别:内容、社交、结构和 WordPress 小部件。

什么是WPBakery Page Builder怎么使用(Visual Composer)  第8张顾名思义,内容元素是您通常用于创建页面或帖子内容的元素。同样,社交元素是那些使用户可以轻松地在社交平台上分享您的页面的元素。另一方面,结构元素适用于更擅长编写代码的高级用户。它们允许您直接将原始 htmljavascript添加到您的页面。

要添加元素,您只需按下“ 添加元素” 按钮并选择所需的元素。

或者,您可以按 添加文本块 按钮直接向页面添加一些文本。

什么是WPBakery Page Builder怎么使用(Visual Composer)  第9张请注意,如果您对元素的默认外观不满意,您始终可以通过切换到“ 设计选项”选项卡来修改其样式 。

添加一些元素后,您可能会注意到每个元素都有一个与之关联的工具栏,其中包含一些按钮。这些按钮显示直观的图标并允许您执行重要操作,例如拖放元素以更改其位置、复制、删除或编辑其内容。

什么是WPBakery Page Builder怎么使用(Visual Composer)  第10张

4. 使用所见即所得的前端编辑器

后端编辑器非常适合包含大量元素的长而复杂的页面。使用它时,您需要在  想要查看页面发布时的样子时按下预览按钮。

如果您选择使用 WYSIWYG 前端编辑器,您可以从一开始就使用页面的最终外观。您始终可以从一个编辑器无缝切换到另一个,因此向上滚动并按下 前端编辑器 按钮以打开新编辑器。

什么是WPBakery Page Builder怎么使用(Visual Composer)  第11张

在此编辑器中,只有将鼠标悬停在元素上时,您才会看到与元素关联的工具栏。这些工具栏及其提供的功能与后端编辑器提供的功能非常相似。

此外,前端编辑器允许您查看页面在各种屏幕尺寸上的外观。它还允许您继续以您喜欢的任何屏幕尺寸编辑页面。

什么是WPBakery Page Builder怎么使用(Visual Composer)  第12张

5. 使用模板

学习如何使用 WPBakery Page Builder 的另一个重要方面是使用模板。WPBakery Page Builder 允许您将使用它创建的任何页面或帖子转换为模板。通过使用此功能,您可以最大限度地减少在为 WordPress 网站创建页面时所做的重复工作量。

要将页面的当前布局保存为模板,请打开“ 模板” 对话框,为模板命名,然后按“ 保存模板” 按钮。

什么是WPBakery Page Builder怎么使用(Visual Composer)  第13张

您不仅限于使用自己的模板。这个插件带有一个大型模板库,它会定期更新。要打开库,请切换到 模板库 选项卡,然后按 访问库 按钮。

什么是WPBakery Page Builder怎么使用(Visual Composer)  第14张

如您所见,该库包含各种优质布局模板。所有这些都免费提供给您。但是,您必须先激活您的 WPBakery Page Builder 许可证,然后才能使用它们。

从广义上讲,模板可以分为两类:整个页面的模板和页面的各个独立部分的模板。例如, 关于页面 模板可帮助您创建完整的“关于我们”页面。但是 英雄部分 模板只会为您创建一个英雄部分

3 个顶级 WPBakery 页面构建器附加组件 

1.  WPBakery Page Builder 的终极插件

什么是WPBakery Page Builder怎么使用(Visual Composer)  第15张

这是我们最畅销的 WPBakery Page Builder 插件。凭借超过 60,000 的销量,人们喜欢它的奇妙功能:

  • 完全响应式设计

  • 独特而灵活的元素

  • 干净的代码

  • 9+ 整页演示

  • 视差和视频背景

  • css3 动画

  • 视频教程

  • 最好的客户支持

2.  woocommerce 页面构建器

什么是WPBakery Page Builder怎么使用(Visual Composer)  第16张

创建此 WPBakery 插件是为了帮助您自定义您的 WooCommerce 网站。使用此插件,您将能够轻松地为 WooCommerce 页面创建任何布局,而无需编码知识。这是一个很棒的 WPBakery 插件,因为它是:

  • 易于安装

  • 方便使用的

  • 兼容任何主题

  • 支持 WooCommerce 简码

3.  WPBakery 页面生成器剪贴板

什么是WPBakery Page Builder怎么使用(Visual Composer)  第17张

WPBakery Page Builder 剪贴板允许您跨页面复制/剪切和粘贴单个内容元素或一堆内容元素,而无需离开 WPBakery Page Builder 后端界面。

另一个很棒的功能是您可以使用导出/导入功能在站点和域之间传输剪贴板。您还可以创建剪贴板模板以节省大量时间!

结论

在本 WPBakery Page Builder 教程中,您学习了如何下载、安装和配置 WPBakery Page Builder。您还看到了使用它为您的 WordPress 网站创建页面和帖子是多么容易。要了解有关如何使用 Visual Composer 的更多信息,请参阅其文档。



文章目录
  • 先决条件
  • 1. 安装WPBakery页面生成器
  • 2. 配置插件
  • 3. 使用后端编辑器
  • 4. 使用所见即所得的前端编辑器
  • 5. 使用模板
  • 3 个顶级 WPBakery 页面构建器附加组件
    • 1. WPBakery Page Builder 的终极插件
    • 2. woocommerce 页面构建器
    • 3. WPBakery 页面生成器剪贴板
  • 结论