Bebuilder页面编辑器的每个Section、Wrap、Item元素等模块都有样式设置功能,且内容都有不同,下面就尽量全面介绍下每部分的设置。
模块三大设置项
点击某个模块的 Pencil Icon 后可以从左侧元素区域看到,有固定的三个选项:Settings、Style、Advanced,每个选项都可以对模块进行详细设置。
- Settings:该元素的基础的设置项,功能会随着元素的不同而改变。
- Style:该元素的排版,对Settings的补充设置,在设置 Section 和 Wrap 时是没有的。
- Advanced:该元素的高级选项设置。
Settings设置
根据编辑的Item元素不同而显示不同的设置,比如:编辑 Column Text 元素时,在 Settings 中会显示 WordPress 经典编辑器,里面可以随意更改文字内容。
又比如:编辑 Menu 元素时,在 Settings 中会显示菜单、图标、子菜单等相关设置,可以根据需要改变显示的菜单内容,也可更改菜单排版、动画、图标、位置、子菜单显示内容、排版、图标、位置等等。
Settings的设置多样,以上只是列举了两个例子,建议安装Bebuilder编辑器后,自己尝试下。
Style设置
Style是对 Settings 中的一个扩充,也会根据 Item 元素的不同而有所改变,里面设置设计该模块的各种样式,以 Menu 元素为例:
- Gap(文本间距):设置菜单标题之间的间距,可自定义或者拖动调整
- Padding(内边距):修改菜单元素内边距,即文字到边框的距离。
- Typography(文字排版):修改文字排版,打开后可以修改文字大小,字距、字重、字体、装饰等等。
- Border Style(边框样式):修改边框样式,粗细。
- Border radius(边框半径):修改边框四个角的弧度
- Color(颜色):修改边框颜色
- Background(背景):修改边框背景,可以选择纯色、渐变色、透明度,这里又给出了三个小选项:Nomal、Hover、Action,其中Nomal是正常颜色的设置,Hover是指鼠标悬停至元素时显示的颜色,Active是选中后显示的颜色,需要更新页面才能看到显示效果。
- Box shadow(容器阴影):修改阴影,其中Blur指模糊效果。
下方还有一些设置选项,基本上都是重复的,这里我就不再赘述了,实操下基本上就懂了。
Advanced设置
Advanced是每个Section、Wrap、Item都有的,且基本上是一致的,Advanced的优先级更高,是对整个模块进行精细化调整的,且与Settings、Style等设置有些重复,在调整过程根据实际情况选择即可。
下面是关于 Advanced 各项的一些详细介绍:
Dimensions(尺寸)
Inline为行内,尺寸以Wrap为准,宽度和高度都可以设置为自定义。
Spacing(边距)
设置容器内外边距,可以将元素想象成一个盒子,盒子与上下左右盒子之间的距离通过它来调整;Padding为内边距,指文字到边框的距离;Margin为外边距,指外界到边框的距离,由于Item是放在Warp里面,因此外边距以Wrap的边框为准。
Positioning(位置)
用于调整模块位置,一般设置元素为 Sticky 时,会用这个功能调整元素在 屏幕显示的位置。
Background(背景)
可设置该模块的背景颜色,纯色、渐变、图片都可以设置。Hover为悬停,指鼠标悬停到某元素时才显示背景。
Border(边框)
可设置模块边框样式,边框四角弧度和阴影。blur为模糊,spread为环绕。
Responsive(响应式)
模块响应式设计,公用四种设备类经,可分别设置该元素在此设备上是否可见。
Animation(动画)
设置模块入场动画,可设置的选项太多了,不懂的可以直接用翻译查。
Transform(变化)
可设置模块的变化,如水平移动、拉伸、主轴旋转等等
Conditional logic(条件逻辑)
用于设置该模块的显示条件
Custom(自定义CSS)
设置自定义CSS,只是针对于此模版的,非全局。有些模块的样式只靠Bebuilder并不能完全实现,可以通过CSS来调试。