Wordpress+可视化编辑器=最好的系统+零基础制作网页

网站上所有布局,颜色与设置均可在后台修改,无需编程基础

Beaver Builder行,列,模块的布局与设置

2019-11-10 / 分类: /  评论数量:0

使用行,列与模块的功能布局网站主体内容。新手可以这样简单理解,行与列都是定位置与背景的,模块是定义每个位置内容的,也就是说不同的内容需要使用不同的模块,一般的可视化编辑器专业版都会有超过50个模块,有些加上扩展会有200多个,但常用的就那么几个模块,并不是越多越多,模块多了会造成打开可视化编辑的时间增加,影响工作效率。每个插件的模块一般都可以在插件设置中禁用不需要的模块,如Beaver Builder的模块设置在后台:设置 –》海狸生成器 –》模块中管理。

Beaver Builder行布局效果
Beaver Builder行布局效果

行的布局与设置

一个页面通用在可视化编辑器中通过不同的行来区别划分不同的内容,可以理解为一篇文章中的不同段落。但这个行是支持多列分割排版,以做成同一行可以添加多个模块,实现不同的功能。

系统提供了几种常用的行布局样式,在右上角中展开,然后选择一种你需要的布局拖动到你页面想要显示的位置即可。

Beaver Builder行布局种类
Beaver Builder行布局种类

鼠标放在模块,列或行上,此区域最上面的 扳手 图标即可对行进行设置。

Beaver Builder行设置
Beaver Builder行设置

会有以下几个分类

一:样式

1.1 宽度与高度
  • 宽度
    设置此行的显示宽度,分为全宽与固定2种形式;
    固定模式默认采用Beaver Builder插件全局设置中的宽度,不了解此位置的请返回前面的文章: 《Beaver Builder工具箱 》,找到对应的位置设置。你也可以不使用默认的设置,自己填需要的宽度,选择对应的单位 px, % , vw;
    全宽模式100%占满浏览器宽度。注意:如果此处设置了全宽,但实际显示却不是全宽,那需要看下你的主题对此类型文章的宽度设置与此篇编辑页面的宽度设置,此2个位置的优先级高于编辑器的优先级。
  • 内容宽度
    此处设置行内所有行相加在行内的占用宽度,同样分为全宽与固定2种形式,固定模式的使用方法与上面的一样,不过这里的全宽模式不再基于浏览器的宽度,而是基于行的宽度,也就是说如果行采用的是全宽,那这里就是全屏宽度,如果行采用的是一个非全屏宽度,那此处的全屏就是上面设置的宽度。
  • 高度
    高度有3种形式:
    默认:采用流媒体形式,就是不用设置,行里的内容多高就是多高。
    全高:此行的高度是浏览器的总高度,有些网站中有使用。
    最小高度:顾名思义,就是设置一个最小的高度,选择后会出现一个高度参数与单位设置。注意:后面2种高度一般是行的内容会小于行的高度,所以会出现垂直对应选项,是设置行内的内容在垂直方向的对齐。
1.2 颜色

这个比较好理解,就是设置文字,链接,标题与鼠标悬停时的颜色。

1.3 背景

背景个人感觉也比较好理解,支持以下几种背景类型:

  • 颜色
    使用单一的颜色为背景。
  • 图片
    使用一个图片作为此行的背景
  • 视频
    使用一个视频作为此行的背景,如果使用视频为背景,请采用CDN加速或把视频文件处理得非常小,比如小于300KB。注意,这里说的视频非常小是视频文件,并不是视频尺寸,视频尺寸小并不等于视频文件小,这涉及视频的保存模式与清晰度。否则会影响此页的打开速度。简单地说,如果采用视频为背景,如果使用网站主机里的视频,视频文件小的,可以直接采用,如果是视频文件大的,需要采用CDN加速或全站加速服务。
  • 幻灯片
    选择几张图片组合成一个轮播的幻灯作为背景
  • 视差
    使背景图片在页面滚动进出现视差效果,需要背景图片的高度高于行内容高度才可以获得比较好的效果。
  • 渐变
    即设置背景为2种颜色,这2种颜色需要过渡融合,这个颜色融合分为2种模式:线性与径向;这个如果懂PS或同类型软件的人比较好理解。线性就是第一种颜色从一种方向到另一个方向,比如从左到右,从上到下,通过调整角度可以多任意一个方向或角度开始到另一个180度方向的角度;径向就是第一个颜色从行的中心开始向四周扩散。注意:颜色后面有一个可以拖动的数值,这里并不是设置透明度(透明度在颜色选择里设置),这里是设置一种颜色到另一种颜色过渡的起始点,第一个颜色这个数值越大,两种颜色之间的过渡区域越小,第二个颜色的数值则与第一个相反。
  • 终极渐变
    与渐变功能一样,只是UI界面不一样,有些功能可以设置为禁用。
1.4 边框
  • 常规
    普通的边框样式,设置边框线条样式:如实线,虚线,点线等;设置边框颜色与四周每个边框的厚度;
  • 半径 & 阴影
    半径可以设置圆角,阴影厚度与位置都可以设置。
1.5 上下形状

上形状与下形状设置是基于行内的形状样式,与效果中的形状样式相反,如果是新手的话建议只使用一个,不然可能是不知道到底是哪个在起作用。

1.6 形状容器

这里有2个选项,剪裁内容与不剪裁,这里个人还是建议选用剪裁的,超出浏览器的内容会被剪裁,不会显示超过的内容。

二:效果

可以分别启用上分隔符与下分隔符,基于行外,与样式里的上下形状不同。

三:粒子背景

此项是UABB插件里的功能,如果没有启用这个插件,是没有这一项的,可以设置背景的动态效果,默认有3种,多维三角体,雪花,随机圆点。

四:高级

4.1 间距
  • 外间距
    设置形状外部的间距
  • 内间距
    设置形状内部间距
4.2 可见性
  • 断点
    设置自适应时各显示设备上是否显示此行。
  • 显示
    用户是否登录,注销与用户等级
4.3 动画

可以设置动画效果样式,延时与时长。

4.4 HTML元素
  • 容器元素
    可选。选择适当的HTML5内容分区元素以用于此行,以提高可访问性和机器可读性。
  • ID
    一个将应用到此模块的 HTML 的独一无二的 ID。必须以字母开头,并仅包含破折号、下划线、字母或数字。无空格。
  • 类名
    一个将应用到此行的 HTML 的类别。必须以字母开头,并仅包含破折号、下划线、字母或数字。用空格分隔多个类别。

列的布局与设置

列设置与行设置并没有什么不同,只有2个小的区别

  1. 宽度
    因为一行会分成一列或多列,就需要设置宽度百分比,可以在下面图中所示填入数值,也可以直接在可视化编辑器中拖动调整。
  2. 高度相等
    此功能是在用一行多列时,列与列之间的对齐方式
Beaver Builder列设置
Beaver Builder列设置

支持在已经有的列布局中插入一个一行多列的布局,形成嵌套布局,也可以使用这个方法把一行分成更小的布局,例如:第一次插入一个5列布局,然后在第一个列中插入一个4列布局。这样第一列本来只占一行中的1/5,即20%;再插入一个4列布局,就是把这个20%再分4次,即每个新插入的列占整行的5%

Beaver Builder列中嵌入一个多列
Beaver Builder列中嵌入一个多列

模块的布局与设置

Beaver Builder模块采用分组管理的形式,默认显示Beaver Builder插件自己的模块,wordpress系统的小工具模块被分成另一个组,如果自己有修改过自定义的模块,也会在保存的模块中分成一组,如果你有安装其它插件,会生成新的组,需要切换拖动使用。

Beaver Builder模块分组
Beaver Builder模块分组

将你需要的模块功能拖动到设置的列中,即可实现对应的功能

Beaver Builder模块分布
Beaver Builder模块分布

新加入模块或模块保存后再次点击模块时可以编辑模块的内容,高级中与行,列中的功能一样。常规与样式中的功能每个模块不一样可以设置的内容也不一样。

Beaver Builder模块功能
Beaver Builder模块功能

发表评论

电子邮件地址不会被公开。 必填项已用*标注

回到顶部

QQ群962782975