简介
区块是构建网站的基石。本课程我们将深入探索区块的嵌套与组合技巧，通过多种区块类型创建丰富布局。
嵌套区块
嵌套区块通过容器区块（如群组、分栏、封面等）实现复杂布局。在列表视图中可清晰查看层级结构，例如这个首页的第二部分：
- 分栏区块包含左右两列
- 左列嵌套了标题、分隔线和段落
- 右列嵌套了含四张图片的图库
群组区块应用
创建”笑是最好的良药”标题后：
- 添加等宽双栏分区块并填充文本
- 按住Shift多选区块后组合成群组
- 取消”内部区块使用内容宽度”选项
- 将群组宽度设为”宽幅”
- 通过样式标签修改背景色/添加背景图
- 调整内边距增强留白效果
进阶技巧：为多层内容中的群组区块命名（如”我们的故事”、”客户评价”），可有效组织内容结构。
图文区块组合
使用”媒体与文本”区块时：
- 左侧添加媒体库图片
- 右侧构建内容：创建”寿司是艺术”标题
- 底部添加”了解更多”按钮区块
- 将父区块设为宽幅对齐
- 在样式中调整媒体宽度为40%
- 设置图像底部垂直对齐
分栏区块实践
创建三等分栏布局：
- 首列添加”拼盘”标题和段落
- 插入图片并设为正方形比例
- 将标题加粗放大并居中对齐
- 父区块设为宽幅并添加列间距
- 复制首列后修改其余列内容
封面区块制作
创建促销横幅：
- 添加背景图并取消内部宽度限制
- 插入”享8折优惠”文本和订单按钮
- 用堆栈区块统一管理这两个元素
- 调整覆盖层透明度至30%
- 通过工具栏切换全高模式
- 按钮文字加粗并添加链接
实践练习
在WordPress Playground重现以下案例：
案例一：图文群组制作
步骤1：创建标题区块
在编辑器中插入”标题”区块，输入您的主标题文字
步骤2：构建双栏布局
- 添加”分栏”区块并选择等宽两栏布局
- 左栏粘贴：Lorem ipsum dolor sit amet, consectetur adipisicing elit…
- 右栏粘贴相同占位文本保持对称
步骤3：组合与布局
- 同时选中标题和分栏区块（按住Shift多选）
- 点击工具栏”组合”图标创建群组区块
- 在区块设置中取消勾选”内部区块使用内容宽度”
- 将群组宽度调整为”宽幅”
步骤4：视觉定制
在”样式”选项卡中：
- 背景色选择器选取您喜欢的颜色（建议使用柔和色调）
- 使用取色器输入特定色号实现精准配色
步骤5：微调间距
在”尺寸”设置中：
- 调整内边距数值（建议20-40px）
- 实时预览不同间距的视觉效果
案例二：全幅促销横幅
步骤1：基础框架
- 插入”封面”区块并上传背景图（Unsplash推荐关键词：banner, promotion）
- 立即设置区块宽度为”全幅”
步骤2：色彩叠加
- 在覆盖层设置中输入色号#2C3066
- 将不透明度滑块拖至80%位置
步骤3：边距设置
四边统一设置为4单位内边距
步骤4：文字内容
- 添加群组区块并分行输入”enjoy”和”20% off”
- 通过排版设置：
- 启用”大写字母”转换
- 字号设为160像素
- 启用加粗效果
步骤5：间距控制
插入50像素的”间距器”区块
步骤6：行动按钮
- 创建按钮区块并输入”ORDER NOW”
- 颜色设置：
- 背景：纯白(#FFFFFF)
- 文字：纯黑(#000000)
- 文字样式：
- 大写转换
- 20像素字号
最终调整
根据实际显示效果：
- 微调按钮内边距（建议10-20px）
- 检查不同设备下的响应式表现
- 建议添加按钮链接至目标页面