简介
本节课我们将重点学习尺寸设置,即内边距、外边距和区块间距。区块编辑器的核心功能之一就是能自定义区块尺寸,这些工具对创建视觉吸引力和结构良好的布局至关重要。
访问设置
要调整尺寸设置,请先选中目标区块,点击右上角的”设置”,选择”样式”选项卡。在”尺寸”选项下即可调整内边距、外边距和区块间距。若某些选项未显示(例如本案例中的内边距和外边距),需点击三个竖点图标手动启用。
定义
内边距指区块内容与边框之间的内部空间;外边距是区块外部的隔离空间;区块间距则控制容器区块(如栏目或群组)内嵌套区块的间隔距离。
内边距
通过滑块可视化调整水平/垂直方向的内边距(0-XXL范围),也可输入自定义数值(支持像素/百分比等单位)。点击”解除边距关联”可单独设置上、左、下、右内边距。例如:选中群组区块后,在样式设置中将垂直内边距设为超大尺寸;或为按钮区块设置自定义内边距值。
外边距
操作逻辑与内边距相同,支持负值(高级用法)。解除关联后可分别设置水平/垂直外边距。案例演示:为按钮区块添加顶部外边距创造呼吸空间;在模板编辑中通过顶部外边距分隔页眉与内容区。
区块间距
用于调节容器区块内嵌套元素的间隔。例如:将图库区块的垂直间距设为0可使图片紧密排列;在群组区块中为两个元素添加水平间距。
样式手册
可在样式手册中为不同区块类型设置默认尺寸值。比如全局修改”媒体与文本”区块的垂直内边距,或统一设置按钮区块的内边距。此外,还能在”布局”下调整网站主内容区的内边距和区块间距。
结语
区块编辑器提供实时视觉反馈,通过自由组合这些工具即可创建多样化布局,无需编写CSS代码。
实践
使用WordPress Playground和Twenty Twenty-Five主题进行练习:1. 将指定网格模式添加到页面后,将其区块间距调整为特小尺寸。
原始区块间距:常规

更新后的区块间距:特小(XS)

2. 将下面的样板添加到页面并将列块的水平和垂直填充更新为 XX-Large。
原始内边距:零

更新后的内边距:超大(XX-Large)

3. 添加按钮块并输入“Learn more”
将水平填充更改为 10 像素。
将垂直填充更改为 2 像素。

4. 添加以下 Cover 块两次
将第一个图案的底部边距更改为常规。
