本文将带你一步步掌握WPBakery Page Builder编辑器,用于装修Basel主题。从革命滑块(Revolution Slider)到排(ROW)的使用,详细讲解每一个步骤和设置。
接下来我们就正式开始
WPBakery Page Builder编辑器开始装修Basel主题
步骤网站前端→Edit with WPBakery Page Builder
![图片[1]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061808452939.png)
![图片[2]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061808505332.png)
![图片[3]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061903204819.png)
如上图所示进入前端的编辑页面,我们可以看到有不同的模块,上述显示的是革命滑块(海报banner)
还有排(ROW),和柱子(Column)等功能
让我一一与你道来
1.我们先讲革命滑块(Revolution Slider)这个是首页的海报功能,这个不在这里设置,所以我们不需要动它
![图片[4]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061903231536.png)
如上图我们进编辑页面
1.步骤网站前端→笔符号(编辑)
![图片[5]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061903244531.png)
选择我们导入演示数据的模版海报(banner)就可以了
2.ROW(排)
3.Column(柱子)
排和柱子基本上模块都是一样的,当然你可以直接放模块,但是你无法控制模块的大小以及一些展示功能,我们后面慢慢讲
![图片[6]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061903322720.png)
ROW(排)是控制整个模块的,不管里面是有多少模块,他是一个整体,他里面的设置也是整体而不是单个,后续我们会讲述柱子(Column)的,你就会明白了
![图片[7]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061903342650.png)
如上图演示,他是可以拖动整个模块的
步骤排→符号(展开)
![图片[8]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061903380324.png)
步骤排→笔符号(编辑)
![图片[9]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061903425372.png)
步骤Row Settings→General
![图片[10]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061908403714.png)
如上图所示编辑页面,我会写出上述圈出的一些基本功能的解释
Row stretch:可以理解为整个模块的大小
![图片[11]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061908473696.png)
Stretch row and content和Stretch row and content (no paddings)是全宽(包含所有)和内容不全宽
Default和Stretch row是默认和间隙的区别 也就是居中的位置
![图片[12]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061908545384.png)
![图片[13]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061908554885.png)
如上图展示,大家根据实际需要调整
Columns gap:可以理解为间隙,一般情况不需要动,但如果前端比较拥挤,大家根据需要调整
Content position:内容的位置,一般是默认
![图片[14]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061908592693.png)
如上图,根据实际情况调整,设置好记得Save changes保存
步骤Row Settings→Design Options
![图片[15]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061909023676.png)
我们来讲述Design Options,这里调节是背景以及颜色,以及上下左右间距的问题
![图片[16]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061909043322.png)
Border color:边框的颜色
Border style:边框的风格(样式)
Border radius:边框的间隙(一般不用调整)
以上对于简单的情况下,都不需要调整
Background:背景颜色以及背景图片的添加,以及图片的展示效果
![图片[17]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061909114535.png)
如上图,根据实际情况调整整个模块的背景
![图片[18]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061909144328.png)
![图片[19]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061909152819.png)
上图如果显示的是没有背景与显示背景的展示
步骤Row Settings→CSS box
![图片[20]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061909200664.png)
如上图所示,这里调整的是上下以及左右的间隙,可以用于前端展示的调整,以及模块的样式,一般情况下是不需要调整的,一般上下模块拥挤的情况会用到,上述有外框内框已经模块内框的调整,我们一般情况下调整的是margin外框的间隙,可以加入正数值或者负数值,来实现间隙
步骤ROW→三条符号(排的数量格式)
![图片[21]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061909285617.png)
Row layout:选择行的数量(示例如上图:一个,二个,二个左宽右窄,以及三个),大家根据图标可以看的出来
Enter custom layout for your row:你可以自己添加行的数量(分子形式的都可以)
![图片[22]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/06/2024061909385648.png)
如上图后面的图标意思→
+:添加模块,克隆整个排,复制行,粘贴,关闭,大家根据按钮以及翻译理解
以上讲述了WPBakery Page Builder编辑器的ROW的功能,接下来我会讲述更多编辑器的功能来装修Basel主题,此文章只讲述了基本的一些功能,比较适合新手,如果你对于装修Basel主题有更深入的研究,欢迎与我探讨
概要
以上是关于WPBakery Page Builder编辑器中排(ROW)的基础功能介绍。在下一篇文章中,我们将继续讲解更多编辑器的功能,帮助你全面装修Basel主题,敬请期待。
お問い合わせ |
---|
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
① 電話:020-2206-9892 |
② QQ咨询:1025174874 |
三 Eメール:info@361sale.com |
④ 勤務時間: 月~金、9:30~18:30、祝日休み |
この記事へのリンクhttps://www.361sale.com/ja/11620この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。
コメントなし