本课程展示三种设置和设计群组区块的方法,重点包括添加背景图片、重命名、边框、圆角、成组与解组操作。
学习目标
如何设置群组区块并添加子区块
如何在列表视图中重命名和组织区块
如何使用设置和样式选项自定义群组区块
查找群组区块的相关文档
课程文本
引言
欢迎学习群组区块的使用。群组区块允许您将多个区块组合并进行统一样式设计,从而简化内容管理和设计流程。
示例概览
首先我们通过示例页面了解群组区块的几种使用方式。第一个示例中,我使用带背景图片和标题的群组区块,并添加了边框和圆角效果。第二个示例采用包含图片、标题和段落的群组区块,同样添加了边框。第三个示例则是通过标题和相册区块组合构建页面。
群组区块演示一
我打开页面启用列表视图(左上角三条斜线图标),并将工具栏置顶(通过右上角三点菜单选择顶部工具栏)。通过输入/group添加群组区块,选择第一个选项后进入样式工具:从媒体库添加背景图片(需提前优化图片并添加替代文本)。选中群组区块后,在顶部对齐工具中选择全宽对齐,然后在样式设置中调整最小高度至645像素以确保手部显示完整。通过背景尺寸选项调整焦点位置,点击更新后,在区块内添加”烘焙”标题并设置居中对齐。为增强文字可视性,在标题样式中选择绿色背景,并通过尺寸设置添加内外边距(上下左右各2单位)。最后为群组区块添加绿色边框、调整粗细并使用100单位圆角效果,刷新后完成第一个区块。
群组区块演示二
第二个示例通过”三点菜单-后方添加”插入图片区块(曲奇图片),添加标题后从Cupcake Ipsum获取填充文本。在列表视图同时选中三个区块后,通过三点菜单的”成组”功能合并,重命名保持列表整洁。设置群组为宽宽度布局,调整图片尺寸至568像素并居中对齐。为群组添加细边框后,设置4单位上下边距和2单位侧边距,通过区块间距选项调整内部元素间隔。预览时发现需重新将标题文本居中对齐。
群组区块演示三
最后通过复制粘贴现有相册区块快速创建第三个群组(含标题和多个图片)。将群组设置为全宽布局,关闭布局切换使图片间距扩大。添加棕色背景后设置2单位统一内边距,刷新后完成所有设计。
结语
请查阅资源区获取群组区块文档链接,尽情探索群组区块的多种应用方式。感谢观看。