灵活布局

类型一：图文错落型板式

配置步骤

一：模块拆分：

1行2列 2 或者 2行2列 1 （以下一1行2列模式举例）

二：元素拆分

三：配置步骤

1、选择布局组件拖入画布，并配置1行2列，不配置列间距。换行方式设置为自动换行。宽度设置为100%。
2、将左侧容器组件的宽度设置为100%，高度设置自适应 。
3、在左侧容器中拖入图片组件，并上传素材图。由于默认值的内边距为10PX，如果需要图片撑满全局，则需调整内间距。如果不选择图片组件，可以直接进行容器背景替换为图片，也可实现该效果。
4、右侧容器，可以看到文字是覆盖在图片上的，所以建议上传容器背景图实现效果。 5、在右侧容器中拖入2个文字组件，并先输入对应的富文本内容，并设置为文字左对齐。
6、如何设置文本居左偏上如示例图：

• 设置容器对齐方式为左上角对齐
• 通过控制容器内组件内边距，降低文字高度，以及右边宽度

7、 同理，反向配置另外一组 即可配制出相关案例。

效果预览

类型二：异形布局-以类目分类样式为例

配置步骤：

一：模块拆分：

该模块可以通过一个文本组件+2个1行4列的布局组件组成。

二：元素拆分

三：配置步骤

1、拖入文本组件，配置文本及背景色。
2、拖入一个布局组件，设置1行4列，内容设置为自动换行，宽度设置为100%。
3、设置整个布局组件的色值，且将每个容器的背景色设置为透明色。（目前容器的背景默认为白色，如果不设置透明，则覆盖了容器背景），完成后达到下图效果。
4、选中左侧容器，拖入一个图片组件并上传图片。缩小图片宽度为30，以达到小图标效果。

5、拖入文本组件，并输入内容
6、步骤相同，设置另外3个容器，即可达到示例效果。

7、上下间距如觉得偏高，则可以将四个容器的高度调整为像素。目前调整成250PX高度，效果如下：

8、复制一行该组件，即可得8个分类样式的组件设计。