Bebuilder各模块元素的样式设置与Advanced选项设置教程

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来调试。