目录
大纲
WP建站和运维
中级 WordPress 用户

使用行与堆叠块进行设计

简介

在本课程中,我们将深入了解如何利用行(Row)和堆叠(Stack)块来实现设计需求。掌握群组(Group)块是精通区块编辑器的关键之一。当选择群组块时,您会看到其多种变体:标准群组块(将区块聚集在容器中)、行块(水平排列区块)、堆叠块(垂直排列区块)以及网格块(以网格形式排列区块)。下面我们来看几个行块发挥作用的常见示例。

使用行块

首先,我想展示如何借助行块创建示例的顶部区域。向下滚动会看到当前空白处,输入斜杠加row添加行块,然后插入标题并命名为”Green House”。按回车后文字会出现在标题右侧。复制示例文字”Make your home a sanctuary”并粘贴,通过列表视图选择标题和段落块,用区块工具栏将它们编组。现在文字位于标题下方,我需要移除块间距:打开侧边栏设置,进入样式>尺寸,将块间距设为零。标题与文字紧密排列后效果更佳。

关闭侧边栏后,在列表视图重新选择行块,点击插入器添加按钮块(如”Explore”),在侧边栏选择轮廓样式。接下来将按钮块右移——这正是行块的强大之处:在侧边栏选择行块,于区块工具栏的对齐选项中点击”元素间留空”,按钮块即被推至右侧。最后将按钮块底部对齐:在区块工具栏选择”更改垂直对齐”>”底部对齐”。可见通过行块的间距和对齐选项能实现丰富设计可能。

构建页眉

其次,行块非常适合构建页眉。进入外观>编辑器打开站点编辑器管理模板,在图案库点击加号创建模板部件,选择”页眉”并命名后开始构建。首先添加行块,插入媒体库中的网站标志并放大,回车后在其右侧添加站点标语块(如”Better beans, better coffee”)。通过列表视图选择标志和标语块,用堆叠块包裹它们,在侧边栏样式中将块间距设为零,并在区块工具栏设置居中对齐。

选择行块容器,在样式中将背景色改为鲑鱼色。插入导航块显示所有页面,点击三点菜单选择预设导航菜单。再次选择行块,在侧边栏布局设置中点击”元素间留空”使导航菜单右移,至此页眉完成。

使用堆叠块

最后我们深入探讨堆叠块。本例中有三列,左侧列内容较少。我希望背景色和按钮块能下移与中右列对齐。具体操作是:首先用堆叠块整合列内所有内容,其次将标题和段落单独堆叠,但保持按钮块独立。

选择主堆叠块后,在样式设置中修改其背景色(非列背景),并添加内边距。关键步骤是将堆叠块最小高度设为100%,此时背景色会扩展并与其他列对齐。最后选择按钮块,在区块工具栏设置”垂直对齐”>”元素间留空”,按钮块即下移与其他列对齐。

结语

这些区块表面看似基础,但通过应用间距、最小高度等附加设置,您已见证它们能实现的丰富效果。