布局容器 / 布局元素

特色

布局容器与布局元素区块，结合全局样式的布局变量，实现网站的多种布局形式。布局容器与布局元素两者需结合使用，布局容器与布局元素均可设置媒体背景，支持图像背景与视频背景。

配置选项

布局容器

全局样式

Select 区块对应的全局块样式。

选择布局

Select 选择全局样式中的布局变量。

Html 标签

Select 区块根元素的 Html 标签类型。

布局元素

全局样式

Select 设置区块对应的全局样式。

布局设置

根据父容器所选择的布局变量类型自动调整设置形式，包含弹性布局、列布局、单元格布局，可针对不同设备进行适配

媒体背景

布局容器与布局元素均可设置媒体背景。

使用媒体背景

Boolean 区块根元素是否插入媒体文件作为区块背景。

媒体类型

Select 媒体背景的文件类型，可为图像、视频。

图像文件

File 选择/上传图像文件，支持 jpg / png / gif 等图像或 svg 图形格式文件。

视频文件

File 选择/上传视频文件，支持 mp4 等视频格式文件。

封面图

File 视频封面图片，支持 jpg / png / gif 等图像或 svg 图形格式文件。

自动播放

Boolean 页面加载完成后自动播放视频。

循环播放

Boolean 视频循环播放。

元素

布局容器

<div class="mk-container">
  <div class="mk-row">
    ...内部区块
  </div>
</div>

• 主容器 .mk-container

布局元素

<div class="mk-column">
  ...内部区块
</div>

• 主容器 .mk-column

其他

• 布局容器与布局元素两个区块需结合使用；
• 布局容器区块内可插入一个或多个布局元素区块；
• 布局元素区块内可插入其他任何类型区块。