简介
在本课中，我们将学习如何使用“群组”区块进行设计。“群组”区块是一个容器，允许你将多个区块捆绑在一起。可以把它想象成一个盒子，里面可以容纳其他盒子。这个功能帮助你组织内容，并一次性为多个元素应用样式。创建“群组”区块时，你会发现有不同的变体可供选择，即群组、行、堆叠和网格。但在本次课程中，我们将专注于默认的群组选项，以在容器中按盒子排列。
自定义
添加“群组”区块后，你可以开始向其中填充内容。点击插入器或加号图标，然后逐个选择区块。另一种方法是在列表视图中选择所有你想要分组的区块。然后，你可以使用区块工具栏将它们分组，或者点击三个垂直点，然后选择“群组”。现在你会注意到所有这些区块都已嵌套在一个“群组”区块中。现在我们可以开始根据自己的喜好对这个部分或群组进行样式设计和自定义。我们可以更改背景颜色。我们可以通过添加内边距来调整尺寸，并且我会将“群组”区块的对齐方式更新为全宽。为了保持设计有序，你还可以重命名“群组”区块。点击列表视图中的三个垂直点，选择“重命名”，然后添加一个描述性名称。让我们看一个快速示例，将所有这些步骤整合在一起。我想添加一个推荐部分，并且已经添加了一个标题区块和两个列区块。
接下来，我将在列表视图中选择所有三个区块，然后在区块工具栏中点击“群组”。现在这些区块已嵌套在“群组”区块中，下一步是将区块重命名为“推荐”。然后我们可以为区块设置样式，所以我们将进入侧边栏设置，打开“样式”，接着我会选择 Twenty Twenty-Five 主题自带的一个样式变体，然后在我的区块内容周围添加一些水平和垂直的内边距或空间。最后，我会在我的“群组”区块周围添加一个 10 像素的边框。
内部区块使用内容宽度
接下来，让我们讨论“内部区块使用内容宽度”。当你添加一个“群组”区块并在其中嵌套其他区块，然后更改背景颜色时，你会注意到“内部区块使用内容宽度”默认是启用的。这意味着什么？这意味着群组内的区块会继承你主题定义的宽度。所以，即使你将“群组”区块的对齐方式更改为宽宽度或例如全宽，这些区块也不会跟随变化。内部区块保持标准宽度，通常居中，但如果你禁用“内部区块使用内容宽度”，内部区块将扩展以填满群组的宽度，从而在设计上提供更多灵活性。
固定头部
你知道“群组”区块可以设置为固定吗？这在例如你想让头部固定时特别有用。让我们看看它是如何工作的。我在我的页面模板中，可以修改头部和底部。所以让我们选择头部，点击三个垂直点，然后将其包裹在一个群组中。然后我们可以进入设置，向下滚动到“位置”。当你点击“默认”时，可以向下滚动一点，然后选择将区块固定到窗口顶部的选项。但要记住两件事：首先，更改“群组”区块的背景颜色，使其不透明，意思是如果你不更改背景颜色，滚动时覆盖的文字将可见。其次，返回设置并取消选择“内部区块使用内容宽度”。现在我们可以预览前端效果。
响应式
最后，还需要注意，“群组”区块默认是响应式的，当我们在移动设备上预览时，会看到它自动调整布局。
结论
总之，利用“群组”区块可以简化设计过程，使其既更简单又更高效。