Bebuilder页面编辑器基础介绍

Bebuilder是Betheme主题自带的页面编辑器，类似于Elementor Pro，可以拖拽式拉取页面元素来设计网站页面，所见即所得。

我用过一段时间的Elementor Pro确实很强，但是主题授权价格太贵了，搜资料的时候也是无意中发现了Betheme这款WordPress主题，相对来说，Betheme主题设计的页面加载速度更快价格也更友好，并且，Betheme主题也支持Elementor Pro插件，能为页面设计增色不少。

本篇文章主要介绍Bebuilder页面编辑器的基础操作，让外贸建站小白对这款页面编辑器有一个初步的认识。

打开Bebuilder页面编辑器方法（3种方式）

第1种方式：进入wordpress后台 -> 新建页面 -> 进入古腾堡编辑器后选择右上角“Edit with BeBuilder”即可进入。

使用bebuilder编辑

第2种方式：进入wordpress后台 -> 页面 -> 已存在的页面“Edit with BeBuilder”即可进入。

使用bebuilder编辑

第3种方式：打开想要设计的页面后，点击该页面上方WordPress顶部工具栏中“Edit with BeBuilder”也可进入。

进入Bebuilder编辑器后，如果没有做任何设计，里面的内容都是空的，且整个屏幕会分成两个部分。

右侧区域为页面内容创建区，能够实时显示页面的设计效果，左侧为元素区域，里面有着Bebuilder支持的所有的元素，如：标题、分割线、WordPress文本、CTA、幻灯片等等，所有的元素都可以拖拽至右侧来显示。

bebuilder界面介绍

下面重点介绍各部分的常用功能

单击后可显示在右侧的面板中显示所有可添加的元素
单击后可添加预设的元素，跟Betheme预设模板一样，某些常用的页面元素Bebuilder已经帮你设计好了，可以随意导入。
快速导入与导出，比如之前我们自己用Bebuilder设计了一些模块、页面或者模版，我们可以使用此功能导出为代码，新建一个页面后再导入，右侧会显示该设计。
使用链接导入预设Betheme模板，之前介绍过Betheme的预设主题，其实里面也包含一些单页模板，打开Betheme主题市场后，可以通过链接快速导入再二次设计。
浮动导航栏，打开后可以显示页面模块、元素的大纲，可以快速改变模块位置，复制、删除元素。
修改历史，Bebuilder默认每5分钟保存一次设计，如果不符合设计要求的话，可以快速恢复先前的版本。
页面高级选项，针对该页面的一些特殊的设置，比如自定义CSS/JS，Header的显示位置、弹窗规则等等。
主题高级选项，里面大多为全局设置，可自定义字体，页面、页脚的显示方式、SEO、页面样式等等。
Bebuilder编辑器高级设置，可自定义Bebuilder的编辑模式等等。

在底部导航中也包含了一些常用的页面选项，其中：

bebuilder底部导航栏介绍

响应式设计，在桌面端、移动端设备之间快速切换，预览该页面在不同设备中的显示情况并可以做出布局调整。
撤销，如果页面设计出错了可以使用快速撤销功能，当然也支持ctrl + z 快捷键。
快速预览，鼠标放上去后会显示两个选项，第一个“View page”是查看已经发布过的页面设计，第二个“generate preview”是查看还未发布的页面设计，仅供预览。
更新发布，页面设计完成后需要“Update”发布此页面，若不想发布的话，可以使用右侧的三角，“save as draft”保存为草稿。

以上就是关于Bebuilder编辑器非常简单的介绍，当然，光看不练是没有用的，Betheme官方提供了Bebuilder的体验版，可以通过此链接打开，只用作体验还是可以的，不过，建议还是跟着教程学着自己安装Betheme主题。