了解Bebuilder的基本功能后，本篇文章将学习如何使用bebuilder页面编辑器对页面做一个布局排版，方便规划页面内容。
Bebuilder排版工具
Bebuilder有三个排版工具分别为：Section、Wrap、Item（Element）。类似Elementor的“容器”的概念，不过Bebuilder对此进行了细化且更加的灵活。
- Section：此类型可以添加为页面全宽的模块，可以在里面嵌套多个Wrap用于更精细的排版。
- Wrap：类似“容器”，新建的Section默认会添加一个Wrap，也可添加多个Wrap，相当于对Section进行分割、排版。
- Item（Element）：可以认为是最小的模块了，只能添加左侧的Element元素。
Section介绍
进入Bebuilder编辑器后，点击“Start creating”，会默认添加一个Section，并且会让你选择再次添加：Wrap、全局Section、预设模块。
“Select a wrap layout”下面有着7个新建Wrap的排版方式，从左至右依次为：
- 添加1个Wrap
- 添加2等分Wrap
- 添加3等分Wrap
- 添加4等分Wrap
- 添加2个Wrap，且各占1/3和2/3
- 添加2个Wrap，且各占2/3和1/3
- 添加3个Wrap，且各占1/4、1/2、1/4
将鼠标悬停到某个Section上时，会显示该Section的功能导航栏，颜色为绿色（用颜色区可分Section、Wrap、Item之间的层级关系和界限），功能从左侧开始依次为：
- +WRAP：为Section添加新的Wrap。
- +DIVIDER：Wrap行之间添加分隔。
- +：位于功能导航栏的中间，如果想添加新的Section可以点击“+”。
- Drag：可拖拽改变此Section的位置。
- Pencil icon：在左侧功能区显示此Section的全部设置选项。
- Clone icon：在下方复制一个与该Section样式一模一样的Section。
- Trash icon：删除此Section。
- Three dots icon：鼠标悬停后可显示更多的快捷操作，如：隐藏、折叠、移动位置、导入导出等等。
Wrap介绍
Wrap类似于类似Elementor Pro中的“容器”，新建的Section默认会添加一个Wrap，也可以选择“Select a wrap layout”按照给出的排版添加Wrap。
一个Section中可以添加多个Wrap，Wrap和Wrap之间可以相互嵌套，一个Wrap中也可以添加多个二级Wrap，但是从层级上看最多只能添加到二级Wrap了，二级Wrap中只能添加Item元素。
在一级Wrap一行中只能添加6个二级Wrap，因为Wrap可调节的大小最小为1/6，再多只能添加至新的一行。Wrap之间的层级关系可以通过虚框颜色或者导航栏的颜色来判断，一级Wrap为灰色，二级Wrap为红色。
将鼠标悬停到某个Wrap上时，同样会显示该Wrap的功能导航栏，功能从左侧开始依次为：
- + & –：改变Wrap的大小，最小为1/6（1/1为Wrap模块全宽大小）。
- Add：添加新元素（Element）或者新嵌套Wrap。
- Drag：可拖拽改变此Wrap的位置。
- Pencil icon：在左侧功能区显示此Wrap的全部设置选项。
- Clone icon：在下方复制一个与该Wrap样式一模一样的Wrap。
- Trash icon：删除此Wrap。
Item（Element）介绍
Item元素是最小的模块了，Bebuilder有着大量可以直接使用的Item元素，每个元素可以实现不同的功能，详情可以查看Betheme官网关Element的介绍。
元素可以从左侧直接拖入到Wrap中，所见即所得，并且每个Item都可以自定义设置，即使预设模块无法满足需求，也可以通过Item元素的不同组合实现想要的设计。
将鼠标悬停到某个Item元素上时，也会显示该元素的功能导航栏，以蓝色为标识区分，功能从左侧开始依次为：
- + & –：改变Item的大小，最小为1/6（1/1为Item模块全宽大小）
- Drag：可拖拽改变此Item的位置。
- Pencil icon：在左侧功能区显示此Item的全部设置选项。
- Clone icon：在下方复制一个与该Item样式一模一样的Item。
- Trash icon：删除此Item。
Bebuilder简单模块排版实战
记得Bebuilder页面编辑器左侧可以直接导入预设模块（Pre-built section）吗？这次我们不使用这个功能，而是仿照给出的预设，使用排版工具设计一个模块，并保存为自定义样式。
要求：仿照 Pre-built section 中的 image + text 模块，含有图像、标题、富文本、按钮等，样式如下图所示：
PS：来不及搭建WordPress、安装Betheme主题的话，建议先使用Bebuilder Demo完成该任务。
实战操作步骤如下：
步骤1：新建Section -> 添加两个Wrap，各占1/2。
步骤2：左侧Wrap中添加图像（image），右侧Wrap中添加2个标题（Heading）、1个文本（Column Text）、1个按钮（Button），其中第一个标题设置为H2，第二个标题设置为H5。
步骤3：编辑Wrap，将两个Wrap外边距（Margin），上下左右都设置为50px。
步骤4：更改图片，并设置图片大小为“Full size”，图片URL为：
https://demo.muffingroup.com/bebuilder/wp-content/themes/betheme/functions/builder/pre-built/images/placeholders/780x780.png
步骤5：更改标题H标签为H2，更改字体样式，大小为30px，行高为40px，字体任意。
步骤6：以同样的方式修改第二个标题、文本和按钮，知道与图片示例一致。
以上就是使用Bebuilder对页面、模块进行排版设计以及简单实战的全部内容，涉及的很少，更重要的是安装WordPress和Betheme主题后反复练习，不断熟悉Section、Wrap、Item三大排版工具。
当然，Betheme主题唯一的缺点就是没有中文版，不过我感觉既然是搭建外贸网站，英文能力一定不会差，况且，在不断练习中，Bebuilder编辑器有关的英文也都会认识的差不多，无伤大雅。
这些内容还算比较简单，会的差不多了的话，可以挑战模仿其他的网站，比如：使用Bebuilder设计一个苹果官网……
