目录
大纲
WP建站和运维

使用行与堆叠块进行设计

引言

本节课我们将深入探讨如何运用行与堆叠块满足设计需求。掌握群组块是精通区块编辑器的核心技能之一。当选择群组块时,您会看到其多种变体:标准群组块(将区块汇集于容器中)、行区块(水平排列区块)、堆叠块(垂直排列区块)以及网格块(网格状排列区块)。以下展示行区块的典型应用场景。

行区块的应用

首先演示如何借助行区块创建示例页面的顶部区域。向下滚动至空白处,输入”/row”添加行区块,插入标题并命名为”绿意宅邸”。按回车后文本将出现在标题右侧。复制示例文本”让家成为心灵栖所”并粘贴,通过列表视图选中标题与段落区块,使用区块工具栏将其编组。为使文本与标题紧密贴合,需在侧边栏设置中进入”样式”选项卡,将”区块间距”调整为0。此时标题与文本的紧凑布局已呈现良好视觉效果。

关闭侧边栏后再次于列表视图选择行区块,点击插入器添加按钮区块,输入”探索”并在侧边栏中选择轮廓样式。接下来展示行区块的核心功能:选中行区块后,在区块工具栏的”对齐方式”中选择”元素间隔分布”,按钮将自动右移。最后通过”更改垂直对齐”选择”底部对齐”完成布局。由此可见,行区块通过间距与对齐选项能实现丰富的设计可能。

构建页眉

行区块特别适合构建页眉。进入”外观→编辑器”打开站点编辑器,在模板区域点击图案库的”+”号,选择”创建模板部件”,命名后开始构建。首先添加行区块,插入已上传至媒体库的站点Logo并调整尺寸,回车后相邻位置添加站点标语区块”好豆造就好咖啡”。通过列表视图同时选中Logo与标语区块,用堆叠块包裹它们,在样式设置中将区块间距归零,并在工具栏设置居中对齐。

选择行容器区块,在样式设置中将背景色改为鲑鱼粉。通过插入器添加导航区块,点击垂直三点图标选择预创建的导航菜单。最后在布局设置中启用”元素间隔分布”使导航菜单右移,至此页眉制作完成。

堆叠块的应用

最后探讨堆叠块的用法。本例中存在三列布局,左侧列内容较少。需要让背景色与按钮区块下移并与中右列对齐。解决方案是:首先将列内所有内容用堆叠块包裹,再将标题与段落单独用堆叠块编组(按钮区块保持独立)。选择主堆叠块后在样式设置中修改背景色(非列背景),并添加内边距。

关键步骤是将堆叠块的最小高度设为100%,此时背景色将扩展至与其他列齐平。最后通过区块工具栏的”垂直对齐”选择”间隔分布”,使左侧按钮区块与其他列的按钮实现底部对齐。

结语

这些基础区块通过间距控制、最小高度等设置能迸发强大设计潜力。正如我们所见,合理运用对齐与间距选项可以创造出专业级的布局效果。