WPBakery Page Builder是WordPress的页面构建器插件,可让您通过简单的拖放操作即可创建精美的网站内容。
WPBakery Page Builder概述
【购买】https://wpbakery.com/checkout/
价格:$56
【WPBaker技术支持】https://support.wpbakery.com/
【WPBakery知识库】https://kb.wpbakery.com/
注意:
下载的文件名是:js_composer.zip
插件是“WPBakery Page Builder”
WPBakery关系(原Visual Composer)
WPBakery Page Builder使用
两种使用模式:
- Classic Mode
- Frontend Editor
![](http://wpmaker.com/wp-content/uploads/2022/01/2022-01-11_732.png)
如下为Classic Mode模式:
![](http://wpmaker.com/wp-content/uploads/2021/01/2021-01-22_157.png)
第一步:点击左上或下面的“加号”,添加一个element(要素),选择添加一个row。
![](http://wpmaker.com/wp-content/uploads/2022/01/2022-01-11_751-1024x576.png)
可以直接选除row之外的其他element,如“text block”,其结果是先生成一个row,在row内有一个Column,Column内包括选择的内容。
如果要对row内进行布局,先添加一个row:
![](http://wpmaker.com/wp-content/uploads/2022/01/2022-01-11_727.png)
第二步:设置“Row Settings”
点击row右上角的“笔”:
![](http://wpmaker.com/wp-content/uploads/2022/01/2022-01-11_73.png)
第三步:设置横向排列column数量和占比
点击点击row左上角的“column布局”,选择横向排列column数量。
![](http://wpmaker.com/wp-content/uploads/2022/01/2022-01-11_940.png)
点击“Custom”设置占比
![](http://wpmaker.com/wp-content/uploads/2022/01/2022-01-11_332.png)
第三步:添加纵向排列column
点击row左上角的加号,可以添加column。
![](http://wpmaker.com/wp-content/uploads/2022/01/2022-01-11_284.png)
在column内,还可以继续添加row,如下:
![](http://wpmaker.com/wp-content/uploads/2022/01/2022-01-11_629.png)
第五步:设置“Column Settings”
内容基本同“Row Settings”。
![](http://wpmaker.com/wp-content/uploads/2022/01/2022-01-11_84.png)
第六步:在Column里添加其他element,如添加一个图片等
(具体各个element的意义,自行了解,步骤结束)
Visual Composer网站生成器和WPBakery页面生成器
参考:WPBakery Page Builder vs. Visual Composer Website Builder?
WPBakery和Visual Composer有着一些渊源。
Visual Composer一般情况下已经不用了
两个页面构建器都是拖放式的,这意味着您只需单击所需的元素,然后将其拖动到您希望它在页面上显示的位置并将其删除。虽然基本相似,但这两个建造者却截然不同。让我们仔细看看他们的特点:
![此图像的alt属性为空;文件名为2020-07-23-935.jpg](http://wpmaker.com/wp-content/uploads/2020/07/2020-07-23-935.jpg)
![此图像的alt属性为空;文件名为2020-07-23-351.jpg](http://wpmaker.com/wp-content/uploads/2020/07/2020-07-23-351.jpg)
![](http://wpmaker.com/wp-content/uploads/2021/01/2021-01-28_22.png)
【地址】https://visualcomposer.com/