Bebuilder是Betheme主题自带的页面编辑器,类似于Elementor Pro,可以拖拽式拉取页面元素来设计网站页面,所见即所得。
我用过一段时间的Elementor Pro确实很强,但是主题授权价格太贵了,搜资料的时候也是无意中发现了Betheme这款WordPress主题,相对来说,Betheme主题设计的页面加载速度更快价格也更友好,并且,Betheme主题也支持Elementor Pro插件,能为页面设计增色不少。
本篇文章主要介绍Bebuilder页面编辑器的基础操作,让外贸建站小白对这款页面编辑器有一个初步的认识。
打开Bebuilder页面编辑器方法(3种方式)
第1种方式:进入wordpress后台 -> 新建页面 -> 进入古腾堡编辑器后选择右上角“Edit with BeBuilder”即可进入。
第2种方式:进入wordpress后台 -> 页面 -> 已存在的页面“Edit with BeBuilder”即可进入。
第3种方式:打开想要设计的页面后,点击该页面上方WordPress顶部工具栏中“Edit with BeBuilder”也可进入。
推荐阅读《WordPress基础之操作界面初识》
Bebuilder基础功能介绍
进入Bebuilder编辑器后,如果没有做任何设计,里面的内容都是空的,且整个屏幕会分成两个部分。
右侧区域为页面内容创建区,能够实时显示页面的设计效果,左侧为元素区域,里面有着Bebuilder支持的所有的元素,如:标题、分割线、WordPress文本、CTA、幻灯片等等,所有的元素都可以拖拽至右侧来显示。
下面重点介绍各部分的常用功能
- 单击后可显示在右侧的面板中显示所有可添加的元素
- 单击后可添加预设的元素,跟Betheme预设模板一样,某些常用的页面元素Bebuilder已经帮你设计好了,可以随意导入。
- 快速导入与导出,比如之前我们自己用Bebuilder设计了一些模块、页面或者模版,我们可以使用此功能导出为代码,新建一个页面后再导入,右侧会显示该设计。
- 使用链接导入预设Betheme模板,之前介绍过Betheme的预设主题,其实里面也包含一些单页模板,打开Betheme主题市场后,可以通过链接快速导入再二次设计。
- 浮动导航栏,打开后可以显示页面模块、元素的大纲,可以快速改变模块位置,复制、删除元素。
- 修改历史,Bebuilder默认每5分钟保存一次设计,如果不符合设计要求的话,可以快速恢复先前的版本。
- 页面高级选项,针对该页面的一些特殊的设置,比如自定义CSS/JS,Header的显示位置、弹窗规则等等。
- 主题高级选项,里面大多为全局设置,可自定义字体,页面、页脚的显示方式、SEO、页面样式等等。
- Bebuilder编辑器高级设置,可自定义Bebuilder的编辑模式等等。
在底部导航中也包含了一些常用的页面选项,其中:
- 响应式设计,在桌面端、移动端设备之间快速切换,预览该页面在不同设备中的显示情况并可以做出布局调整。
- 撤销,如果页面设计出错了可以使用快速撤销功能,当然也支持ctrl + z 快捷键。
- 快速预览,鼠标放上去后会显示两个选项,第一个“View page”是查看已经发布过的页面设计,第二个“generate preview”是查看还未发布的页面设计,仅供预览。
- 更新发布,页面设计完成后需要“Update”发布此页面,若不想发布的话,可以使用右侧的三角,“save as draft”保存为草稿。
以上就是关于Bebuilder编辑器非常简单的介绍,当然,光看不练是没有用的,Betheme官方提供了Bebuilder的体验版,可以通过此链接打开,只用作体验还是可以的,不过,建议还是跟着教程学着自己安装Betheme主题。