介绍
在本课中，我们将探索 WordPress 区块布局。我们将学习嵌套和分组区块，以创建高级布局和区块结构。提醒一下，我们使用容器区块（如组区块、列区块、封面区块、媒体与文本区块、行区块、堆叠区块和网格区块）来将区块嵌套在一起。容器区块作为其他区块的容器或包装器，允许您对相关内容进行分组，并对整个组应用样式或设置。
示例 1
在第一个示例中，让我们重新创建以下内容。我将一个标题、一个分隔符和一个列区块组合在一起。首先，我将添加一个组区块并选择一个容器。然后，我将打开侧边栏设置，并取消选择“内部区块使用内容宽度”，因为我想更改区块的宽度。接着，我将使用区块工具栏将宽度更改为宽宽度。然后，在组区块内部，我将添加一个标题和相关文本。我将按住 Shift 键，然后按回车键移动到下一行。在我的标题下方，我将添加一个分隔符区块。在区块工具栏中，我将样式更改为宽线。在分隔符区块下方，我们可以添加一个列区块。选择两个等宽的列。然后，在左侧和右侧列中添加文本。
现在，我们可以继续进行样式设置。首先，我将选择标题。然后，打开我的排版选项。首先，选择外观。并将外观更改为细体。然后，我将添加一个自定义大小。在这种情况下，是 5 REM。最后，我还会将字母大小写更改为大写。然后，我将保持左侧列中的文本不变。但我会将右侧列中的文本大小更改为小号以形成对比。然后，我将选择组区块或容器区块，并在组区块内容周围添加一些内边距。这样，我们的第一个设计就完成了。
示例 2
在下一个示例中，我们将基于模式目录中可用的一个模式重新创建以下设计。第一步是添加一个封面区块，并选择一个相关的覆盖颜色。然后，我将选择封面区块，打开侧边栏设置，并取消选择“内部区块使用内容宽度”，因为我想更改区块的宽度。然后，我将使用我的区块工具栏，将区块的宽度更改为全宽。
下一步是添加一个行区块，并在行区块内添加一个组区块。在第一个组区块中，我将添加一些文本，并在文本下方添加一个行动号召或按钮区块，其中包含文字“探索”。然后，我将设置我的按钮区块样式。我将背景颜色更改为黑色，文本更改为白色。我还会将大小增加到中号，并将字母大小写更改为大写。然后，我将选择组区块并转到样式。我将组区块中两个区块之间的区块间距更改为 24 像素。然后，我将组区块的宽度更改为固定。一旦我们选择固定，我们会看到它显示指定一个固定宽度——我们将固定宽度更改为 320 像素。
接下来，我们将选择行区块，并为右侧的文本添加另一个组区块。然后，添加我在此部分中重点介绍的专辑名称。所以我会输入“on”，然后按住 Shift 键，按回车键，输入“in the”，按住 Shift 键，按回车键，然后输入“flame”。接下来，我们将选择文本，然后我们可以在排版下方进一步设置其样式。在这种情况下，我将选择外观、行高、字母间距和字母大小写。然后，我将文本大小更改为 148 像素，外观更改为粗体，行高更改为 0.8，字母间距更改为 -4 像素，字母大小写更改为大写。然后，我们可以将文本的对齐方式更改为右对齐。为了节省时间，我将继续复制文本并相应地进行修改。
然后我们可以选择右侧的组区块，打开样式，对于这个组区块，在宽度下方，我们将选择“填充”。在这里，我们可以看到它显示“拉伸以填充可用空间”。完成后，我们可以转到设置并将项目对齐到右侧。然后，我们可以再次选择行区块，并在区块工具栏中，将垂直对齐方式更改为顶部对齐。之后，我们可以选择封面区块，打开样式，并在封面区块内容周围添加一些内边距或空间。在这种情况下，我将内边距更改为 5。为了确保我们的设计在移动设备上正确显示，请选择行区块，然后选择“允许换行到多行”。现在，我们可以在桌面和移动设备上查看我们的设计。
示例 3
在最后一个示例中，我们可以使用列区块重新创建以下设计。所以首先，让我们添加列区块，然后选择 3 个等宽的列。然后，我将选择主列区块或容器区块，并将宽度更改为宽宽度。然后，我将选择第一列，添加一个封面区块，并从我的媒体库中选择一张图片。插入后，我将选择封面区块，打开样式，将覆盖颜色更改为黑色，并将覆盖不透明度更改为 40。
接着，我会在封面区块中添加一个堆栈区块。在堆栈区块里，我会添加一个标题区块，输入相关文字，选中文字，然后将标题改为大写。接着，我会将字号改为 2 REM，并将文字加粗。在标题下方，我会添加一个分隔线区块，再在分隔线下方添加一个按钮区块。添加好按钮区块后，我会输入文字，并将样式改为“轮廓”。我还会将文字加粗。别忘了添加相关的网址链接。然后，我会选中堆栈区块，将对齐方式改为居中。接着，我还会打开样式设置，将堆栈区块内各区块之间的间距调整为 3。之后，我们可以选中封面区块，将内容位置改为顶部居中。最后，我们可以在封面区块的内容周围添加一些内边距。此外，你还可以选择放大封面区块的尺寸。现在样式设置完成了，我们可以选中左侧列，将其复制两次。然后，我们可以删除两个空白列，只需更新内容即可。