分类： 布局构成

简介

在本课中，我们将重点介绍尺寸设置，即内边距、外边距和块间距。块编辑器的一个关键功能是能够自定义块的尺寸。这些工具对于创建视觉上吸引人且结构良好的布局至关重要。

访问设置

要访问尺寸设置，请选择相关块，点击右上角的“设置”，然后选择“样式”。在“尺寸”下方，您可以调整内边距、外边距和块间距。如果某些尺寸设置不可见，例如本例中的内边距和外边距，请点击三个垂直点，然后启用内边距和外边距。

定义

提醒一下，内边距是块内部内容与边框之间的空间。外边距是块外部的空间，用于将其与其他部分或元素分隔开。第三，块间距控制容器块（如列或组）内嵌套块之间的间隙。

内边距

让我们从内边距开始。在内边距下方，您会看到一个滑块或块的视觉表示，带有内边距控件。您可以通过将滑块从 0 拖动到 XXL 来分别设置水平和垂直方向的内边距。您还可以通过输入自定义值来设置自定义大小。您可以使用不同的单位，如像素、百分比或相对单位。点击“取消链接各边”以单独调整每边的内边距。这意味着您可以断开尺寸的链接，并分别更新上、左、下、右的内边距。在以下示例中，我将选择组块，进入“样式”，向下滚动到“尺寸”。然后，我将使用水平滑块并将其拖动到超大尺寸，以在我的组块的顶部和底部添加更多间距。然后，我将选择我的左侧按钮块或行动号召，打开内边距，然后添加自定义值，以在我的按钮块中的文本周围创建更多空间。

外边距

接下来是外边距。您会注意到它的工作方式与内边距完全相同。您可以使用滑块在块的上方或下方添加空间。或者，您可以设置自定义大小。您甚至可以设置负外边距，但这是一个高级设置。当您点击“取消链接各边”时，您可以分别设置水平和垂直外边距。在第一个示例中，我将选择按钮块，然后添加一些上外边距。为容器块内的内容创建一些呼吸空间。在以下示例中，我正在编辑一个模板，并在内容区域上方添加上外边距，以在页眉和页面内容之间创建空间。

块间距

接下来，让我们探索块间距。如前所述，块间距用于在容器块内的嵌套块之间创建空间。例如，如果您在组块或列块上设置更宽的块间距，则内部的块会相应地间隔开。在此示例中，我将垂直块间距设置为 0，因为我希望将图库块中的所有图像合并在一起。在最后一个示例中，我将在组块内的两个元素之间添加一些水平块间距。

样式书

请记住，您可以在样式书中为不同的块类型设置默认的内边距、外边距和块间距值。例如，我们可以转到“媒体”，然后选择“媒体与文本”块。然后，我们可能决定添加一些垂直内边距，这当然会全局应用。然后，如果您向页面或文章添加新的“媒体与文本”块，那将是默认样式。或者，我们可以转到“设计”，然后通过向块添加垂直和水平内边距来全局设置按钮块的样式。此外，您还可以在“布局”下方更新网站主要内容区域的内边距和块间距。首先，让我们向主要内容区域添加一些垂直内边距，然后您还可以选择增加或减少块间距。

结论

总之，块编辑器提供实时的视觉反馈。因此，请尝试不同的内边距、外边距和块间距组合。这些强大的工具允许您创建各种布局，而无需自定义 CSS。

简介

在本课中，我们将探讨如何利用“列”区块创建不同的设计。“列”区块是一个容器区块，可用于创建各种自定义布局。它开启了无限的设计可能性。“列”区块允许您将文本、媒体和其他类型的内容插入最多六列中。当连续使用时，“列”区块会产生很酷的网格效果。

添加和自定义“列”区块

要添加“列”区块，请点击插入器并输入“columns”。或者，您可以输入斜杠“columns”并从那里选择它。您可以选择起始列的数量和大小。“列”区块的美妙之处在于，您可以在每一列中添加其他区块。例如，您可以创建“列”区块来添加结构，然后添加图像区块、标题区块和段落区块。您还可以通过在每一列中添加封面区块来创建这种类型的设计。

区块工具栏

主“列”区块与构成父区块的各个列之间存在父子关系。当您点击对齐图标时，您可以将区块的对齐方式更改为宽幅或全宽。您知道还可以复制列吗？让我们选择“列”区块中的第三列。当您点击三个垂直点时，您可以选择复制。复制设计将为您节省大量时间和精力。当您选择单个列时，您还可以在区块工具栏中使用箭头将列移动到新位置。但您也可以在列表视图中将列拖放到您想要的位置。

侧边栏设置

如果您想添加另一列，只需点击两列之间的插入器，或选择父区块并打开侧边栏设置。然后，在“列”下方，您可以选择增加或减少列数。在其下方，我们看到取消选择或选择“在移动设备上堆叠”的选项。因此，如果您希望列在移动设备上查看时彼此堆叠，请确保选择此选项。

当我们打开样式时，我们会看到“列”区块还允许我们更改父区块或单个列的颜色。各种排版选项值得探索，例如字体系列、外观、字母间距等。您甚至可以选择更改“列”区块的大小。在尺寸下方，您可以调整区块内容周围的填充或空间，可以添加边距，或修改列之间的间距。在样式的底部，我们可以为“列”区块添加边框和圆角。最后，您还可以选择添加投影。有多种选项可供选择。

将其他区块转换为“列”区块

另一个很棒的功能是，您可以将其他区块转换为“列”区块，甚至可以将“列”区块转换为群组区块。

结论

如您所见，使用“列”区块可以实现任何自定义设计。从介绍您的团队、显示不同的媒体类型，甚至创建定价表。尽情使用“列”区块来实现您的设计需求吧。

介绍

在本课中，我们将更深入地了解如何使用行和堆栈块来实现我们的设计需求。使用组块是掌握区块编辑器的关键之一。当你选择一个组块时，你会看到组块的几种变体。标准组块用于将区块收集在一个容器中，行块用于水平排列区块，堆栈块用于垂直排列区块，网格块用于以网格形式排列区块。让我们看一些常见的例子，看看行块在哪些情况下会非常有用。

使用行块

首先，我想向你展示如何借助行块创建我示例中的顶部区域。如果我们向下滚动，会看到它目前是空的，所以让我们输入斜杠加行。添加一个行块，然后添加一个标题并命名为“温室”。接着我按回车键，当然，文本现在会出现在标题的右侧。让我们从示例中复制文本“让你的家成为避风港”，然后粘贴。打开列表视图，选择标题和段落块，然后使用我的块工具栏将它们组合在一起。现在文本位于标题下方，我想移除区块之间的间距。所以我打开侧边栏设置，进入样式，在尺寸下方，确保区块间距设置为零。现在标题和文本更靠近了，我觉得看起来很棒。

我将关闭侧边栏设置，并在列表视图中再次选择行块。点击插入器并添加一个按钮块。假设写上“探索”，然后打开侧边栏设置，选择轮廓样式。接下来，我想将按钮块移到右侧，这正是行块强大之处。在侧边栏设置中选择行块，在块工具栏中找到对齐方式，然后选择项目之间间距。一旦我们选择这个，就会注意到按钮块被推到了右侧。最后，我想将按钮块底部对齐。所以，在块工具栏中选择更改垂直对齐方式，然后点击底部对齐。正如你所见，利用行块的间距和对齐选项可以实现许多设计可能性。

构建页眉

其次，行块对于页眉非常有效。所以，要添加页眉，让我们进入外观，然后点击编辑器。这会带你进入站点编辑器，你可以在其中管理模板并添加页眉和页脚。进入模式，点击模式旁边的加号图标，然后选择创建模板部分。我们选择页眉，然后适当命名，接着点击创建。

现在，我们可以通过先添加一个行块来构建页眉。接下来，我将添加我的站点徽标，它已经添加到我的媒体库中，然后放大它。完成后，我按回车键。在我的站点徽标旁边，我将添加站点标语块。“更好的豆子，更好的咖啡。”然后，我打开列表视图，选择站点徽标和站点标语块，并将它们包裹在一个堆栈块中。现在，我想移除两个区块之间的间距，所以我确保选择了堆栈块，在侧边栏设置中打开样式，并确保区块间距为零。然后，我在块工具栏中将对齐方式改为居中。

接下来，我选择行块（容器块），进入样式并将背景颜色改为鲑鱼色。然后，我点击插入器并添加导航块。现在，我们会看到我添加到站点的所有页面列表，但我点击三个垂直点并选择一个我已经创建的导航菜单。然后，我确保再次选择行块，在侧边栏设置的布局下方，点击项目之间间距，以确保导航菜单移到右侧。这样，我们的页眉就完成了。

使用堆栈块

最后，让我们更仔细地看看堆栈块。在这个例子中，我们有三个列；你会注意到左侧列的文本或内容较少。我希望背景颜色和按钮块向下推，并与中间和右侧的列对齐。让我们看看我做了什么。我将列中的所有内容堆叠在一个堆栈块中，其次，我将标题和段落堆叠在另一个堆栈块中。但我把按钮块单独留下了。

接下来，当我们选择主堆栈块并打开样式设置时，你会注意到我更改了堆栈块的背景颜色，而不是列。并且我在主堆栈块周围添加了一些内边距。下一个关键步骤是将堆栈块的最小高度改为100%。当我们这样做时，你会注意到背景颜色扩展并与其它列对齐。接下来，我们将确保左侧的按钮块与其它按钮块对齐。所以，在块工具栏中选择更改垂直对齐方式，然后选择项目之间间距。现在你会看到按钮块被向下推，与其它列对齐。

结论

这些区块表面上看起来可能很简单，但正如你所见，一旦应用了间距和最小高度等额外设置，你就可以用它们做很多事情。

简介

在本课中，我们将学习如何使用“群组”区块进行设计。“群组”区块是一个容器，允许你将多个区块捆绑在一起。可以把它想象成一个盒子，里面可以容纳其他盒子。这个功能帮助你组织内容，并一次性为多个元素应用样式。创建“群组”区块时，你会发现有不同的变体可供选择，即群组、行、堆叠和网格。但在本次课程中，我们将专注于默认的群组选项，以在容器中按盒子排列。

自定义

添加“群组”区块后，你可以开始向其中填充内容。点击插入器或加号图标，然后逐个选择区块。另一种方法是在列表视图中选择所有你想要分组的区块。然后，你可以使用区块工具栏将它们分组，或者点击三个垂直点，然后选择“群组”。现在你会注意到所有这些区块都已嵌套在一个“群组”区块中。现在我们可以开始根据自己的喜好对这个部分或群组进行样式设计和自定义。我们可以更改背景颜色。我们可以通过添加内边距来调整尺寸，并且我会将“群组”区块的对齐方式更新为全宽。为了保持设计有序，你还可以重命名“群组”区块。点击列表视图中的三个垂直点，选择“重命名”，然后添加一个描述性名称。让我们看一个快速示例，将所有这些步骤整合在一起。我想添加一个推荐部分，并且已经添加了一个标题区块和两个列区块。

接下来，我将在列表视图中选择所有三个区块，然后在区块工具栏中点击“群组”。现在这些区块已嵌套在“群组”区块中，下一步是将区块重命名为“推荐”。然后我们可以为区块设置样式，所以我们将进入侧边栏设置，打开“样式”，接着我会选择 Twenty Twenty-Five 主题自带的一个样式变体，然后在我的区块内容周围添加一些水平和垂直的内边距或空间。最后，我会在我的“群组”区块周围添加一个 10 像素的边框。

内部区块使用内容宽度

接下来，让我们讨论“内部区块使用内容宽度”。当你添加一个“群组”区块并在其中嵌套其他区块，然后更改背景颜色时，你会注意到“内部区块使用内容宽度”默认是启用的。这意味着什么？这意味着群组内的区块会继承你主题定义的宽度。所以，即使你将“群组”区块的对齐方式更改为宽宽度或例如全宽，这些区块也不会跟随变化。内部区块保持标准宽度，通常居中，但如果你禁用“内部区块使用内容宽度”，内部区块将扩展以填满群组的宽度，从而在设计上提供更多灵活性。

固定头部

你知道“群组”区块可以设置为固定吗？这在例如你想让头部固定时特别有用。让我们看看它是如何工作的。我在我的页面模板中，可以修改头部和底部。所以让我们选择头部，点击三个垂直点，然后将其包裹在一个群组中。然后我们可以进入设置，向下滚动到“位置”。当你点击“默认”时，可以向下滚动一点，然后选择将区块固定到窗口顶部的选项。但要记住两件事：首先，更改“群组”区块的背景颜色，使其不透明，意思是如果你不更改背景颜色，滚动时覆盖的文字将可见。其次，返回设置并取消选择“内部区块使用内容宽度”。现在我们可以预览前端效果。

响应式

最后，还需要注意，“群组”区块默认是响应式的，当我们在移动设备上预览时，会看到它自动调整布局。

结论

总之，利用“群组”区块可以简化设计过程，使其既更简单又更高效。