分类： WordPress 新手设计师

简介

让我们探索如何使用插件创建轮播滑块。网页轮播通常是一种优雅的方式，可以将相关内容分组或组织到一个空间中，从而在相关信息之间建立视觉联系。

插件

插件目录中有多种滑块插件可用，例如 MetaSlider、Smart Slider 3 和 Carousel Slider Block for Gutenberg。请注意，我们不推荐使用任何提到的插件。它们旨在说明用户可能使用的潜在选项。

MetaSlider

如果您使用 MetaSlider 这样的插件，您需要进入插件，点击“添加新”、“添加幻灯片”，然后从媒体库中选择相关图片。添加幻灯片后，有多种选项可供选择：移动选项、高级选项、无障碍选项，甚至开发者选项。

Carousel Slider Block for Gutenberg

在本节中，我将简要展示如何使用 Carousel Slider Block for Gutenberg 插件，因为您可以将其作为区块添加，并且它支持向幻灯片中添加其他区块。而且它与 WooCommerce 兼容。安装并激活插件后，您可以打开一个页面或文章。要添加区块，我将输入 /slider 并选择轮播滑块，然后我们可以在其中开始添加区块。在这个例子中，我将添加 3 个图片区块。插入后，您可以像修改其他区块一样修改它。让我们继续打开列表视图，选择父区块，然后将对齐方式更改为宽宽度。然后，我们可以进入侧边栏设置，调整要显示的幻灯片数量。在下方，您可以选择一次滚动多少张幻灯片以及幻灯片动画速度。在底部，箭头和点导航已启用。

还建议避免自动滚动和自动播放，以便让您的受众有更多控制权，并避免任何无障碍问题。如果滑块自动播放，应该有一个暂停控件。如果您想知道，WordPress 中的 RTL 指的是对从右到左书写的语言的支持。在响应式设置下方，您可以添加一个断点，并决定当达到该屏幕尺寸时要显示多少张幻灯片。当您选择一个图片区块时，您可以设置宽高比，以确保所有图片显示为相同大小。然后我们可以在前端查看效果。

如前所述，此区块允许您添加图片区块以及其他区块。因此，在这个例子中，我添加了一个封面区块，并在封面区块内添加了标题区块、间隔区块和按钮区块。我还决定选择父区块，并将显示的幻灯片数量更改为一。

无障碍

在结束之前，我想指出滑块有时可能会导致无障碍问题。因此，为图片添加替代文本非常重要，这样您使用的滑块可以通过键盘操作并与屏幕阅读器交互。我将在本视频下方添加一个关于无障碍滑块要求的链接。

结论

祝您创作愉快，并明智地使用滑块。

介绍

今天，我们将探索封面区块。它是创建页眉、横幅式展示、行动号召等内容的绝佳工具。封面区块允许您在图片或视频上显示文本和其他内容。在本节中，我们将创建两种不同的设计。但首先，让我们快速了解一下在继续之前需要掌握的一些关键功能和设置。

关键功能和设置

需要理解的重要一点是，封面区块是一个容器区块，可以在其中容纳其他区块。当您向页面添加封面区块时，可以从计算机或媒体库上传图片或视频。您还可以选择“使用特色图片”选项，将封面设置为页面或文章的特色图片。然后，您可以点击彩色圆圈为封面区块添加叠加颜色，稍后可以在侧边栏设置中更新。

让我们从媒体库中添加一张图片。值得注意的是，WordPress 会自动添加一种与图片相配的叠加颜色。插入后，在列表视图中选择您的封面区块，然后使用区块工具栏将对齐方式更改为全宽。您还可以将内容位置更改为左上、中左或其他位置。此外，您可以将封面区块切换为全高，并根据需要添加双色调滤镜。在侧边栏设置中，我们可以选择“固定背景”，创建视差效果。当图片尺寸与填充空间不匹配时，“重复背景”选项非常有用。焦点选择器允许您标识图片最重要的视觉点，尤其是在移动设备上查看时。同时，请记得添加替代文本，为屏幕阅读器和 SEO 描述图片的用途。在样式下方，您可以编辑颜色叠加并更改其不透明度，使其变暗或变亮。接下来，您可以添加内边距，为封面区块中的内容创造更多空间。

横幅示例

现在，我们可以看一些示例。我想向您展示在第一个示例中如何创建以下横幅。我们可以继续添加封面区块，然后从媒体库中选择一张图片。接下来，我会确保选择封面区块，并将对齐方式更改为全宽。然后，我会将内容位置更改为中上。接着，我们可以继续添加一些文本。在这种情况下，我会写“探索山脉”，然后将文本大小更改为自定义大小。对于这个示例，我们将其改为“4 rem”。我还会将文本的外观更改为“中等”。

要更改文本的对齐方式，我将把段落区块或文本包裹在一个群组区块中。然后，取消选中“内部区块使用内容宽度”。完成后，我可以将群组区块的对齐方式更改为全宽。然后我会选择封面区块，打开样式。接着，我会将叠加不透明度保持在 50%，并可以在区块内容周围添加一些内边距或空间。现在我们可以关闭侧边栏设置中的列表视图，设计完成后，我们还可以检查它在移动设备上的显示效果。

如果您不希望图片被裁剪（就像我们在这里看到的），您可以更改宽高比。为此，我们可以返回页面，打开样式，然后向下滚动到宽高比。我会选择经典的 3×2 宽高比。当我们在移动设备上查看时，图片不会被裁剪。图片会适当缩放并保持其比例。

视差示例

在下一个示例中，我想向您展示如何创建这种酷炫的视差效果，将两张图片融合在一起。我添加了一个封面区块来创建这个设计，并从媒体库中选择了一张图片。插入后，我选择了封面区块，将对齐方式更改为全宽，并将区块切换为全高。然后我打开侧边栏设置，选择“固定背景”来创建视差效果。接着，我会点击区块工具栏上的三个垂直点，然后复制。

区块复制后，我会添加一张新图片。接下来，我打开列表视图，选择两个封面区块，并将它们添加到一个群组区块中。由于我想移除两张图片之间的间距，我会打开群组区块的样式，找到区块间距，并将其更改为零。请注意，如果您看不到区块间距设置，可能是因为您使用的主题不支持。然后我们的设计就完成了。我们还可以在较小的屏幕上查看它。

更多选项

最后，我想向您展示我使用封面区块创建的其他一些设计。在这种情况下，我使用封面区块为作品集网站创建了这个行动号召。同时，别忘了前往模式目录，查找使用封面区块构建的精彩模式。在最后一个示例中，我使用了其中一个页眉模式，为我的猫头鹰庇护所网站创建了一个页眉，左上角是标志和网站标题，右上角是我的导航菜单。在这里，我们也可以在移动设备上查看它。

结论

尽情使用封面区块吧，同时务必反复检查你的设计在小屏幕上是否显示正确。

简介

在本课中，我们将介绍如何使用画廊区块在您的网站上创建视觉吸引力强的内容。画廊区块允许您轻松添加多张照片并自动排列成画廊，非常适合展示作品集、产品图片或照片收藏。

添加和使用画廊区块

很酷的一点是，您只需从电脑中拖放一组图片，它们就会自动添加到画廊区块中。或者，您可以输入斜杠画廊并插入该区块。完成后，您可以从电脑或媒体库上传图片。快速提醒一下，始终记得为图片添加替代文本。替代文本是对图片的简短描述，帮助使用屏幕阅读器的人理解图片内容，并帮助搜索引擎更好地查找和排名图片。所以，我将从媒体库中选择5张图片，然后创建一个新的画廊。插入后，我会选择父级区块，当我们进入设置时，会注意到我们可以更改想要显示的列数。在下面，您可以更新图片的分辨率。在这种情况下，我会将其更新为全尺寸。另外需要注意的一点是，“裁剪图片以适应”默认已开启。如果您的图片大小和形状不同，这个选项很有用。裁剪会使画廊每一行中的图片大小相同。您可以切换此选项的开启和关闭，看看哪种方式更符合您的偏好。

样式

当我们进入样式时，可以更新画廊区块的背景颜色，在尺寸下方，我们可以更改图片区块之间的区块间距。我们可以在各个区块之间添加水平间距以及垂直间距。当您点击三个垂直点时，可以添加内边距和外边距。在尺寸下方，您还可以为画廊区块添加边框或圆角。现在我们已经探索了一些选项，让我们做一些更改。首先，我会返回设置，然后将列数改为5。然后我们可以返回样式，将垂直区块间距改为0。接着，将区块的对齐方式改为全宽。在此阶段，还需要强调画廊区块是响应式的。

灯箱

接下来，我想向您展示如何为您的WordPress网站添加灯箱。灯箱是一种时尚的功能，允许图片、视频或画廊在同一页面上以漂亮的覆盖层形式打开，正如您在这些示例中看到的那样。让我们看一个没有添加灯箱的示例。当您点击图片时，什么也不会发生。我们需要前往站点编辑器来添加灯箱。所以我会点击顶部的编辑站点。进入样式。点击眼睛图标打开样式手册。前往媒体，选择图片区块。然后，在侧边栏设置中，在设置下方，我们可以开启“点击时展开图片”选项。保存后，我们可以在前端查看效果。现在，当您点击图片时，它会以覆盖层形式打开。

自定义模式

在下一个示例中，我将把列数改为2，然后批量选择画廊区块内的所有图片区块。然后，我们可以一次性更改每个图片区块的圆角。让我们再看一个快速示例。这次我将把画廊区块的背景颜色改为黑色，在画廊区块内的图片周围添加一些内边距或间距，然后我将批量选择所有图片，并一次性添加10像素的白色边框。

示例

最后，让我们看看您还可以使用的其他几个选项。首先，您可以为画廊区块添加链接以及标题。当您选择画廊区块内的一个图片区块时，可以使用小箭头或移动器将其重新定位到新位置。选择图片时，可以点击区块工具栏中的替换，从媒体库或电脑中选择新图片。当您选择画廊区块时，可以点击区块工具栏中的添加，为画廊添加更多图片。当您点击三个垂直点时，会注意到有一个重命名区块以及创建模式的选项。

结论

祝您在使用画廊区块创建视觉吸引力强的设计时一切顺利。

简介

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

访问设置

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

定义

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

内边距

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

外边距

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

块间距

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

样式书

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

结论

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

简介

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

添加和自定义“列”区块

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

区块工具栏

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

侧边栏设置

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

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

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

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

结论

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

介绍

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

使用行块

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

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

构建页眉

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

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

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

使用堆栈块

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

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

结论

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

简介

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

自定义

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

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

内部区块使用内容宽度

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

固定头部

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

响应式

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

结论

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

简介

在本课中，我们将深入了解如何自定义主题设置。使用区块主题时，您可以通过样式功能为整个网站自定义颜色、字体、排版和布局。这些功能让您无需编写任何代码即可修改网站外观。该界面旨在帮助用户和设计师在不逐个编辑区块或页面的情况下更改网站样式。

全局样式

要访问样式，请前往外观，点击编辑器，然后选择样式。您的主题可能会提供样式变体，让您一键更新主题样式。您选择的某个变体可能接近您的设计目标，但您当然可以进一步自定义。点击铅笔图标或编辑样式后，样式面板将在页面右侧打开。样式面板提供多种自定义选项，您可以在此定义设计并全局应用到所有更改。让我们从排版开始。在这里，您可以管理字体、安装谷歌字体或从电脑上传字体。在元素下方，我们可以自定义文本、链接、标题、说明和按钮。例如，选择文本后，我们会发现可以更新字体、大小、外观、行高和字间距。请注意，当您返回并进入标题设置时，您会看到可以单独自定义每个标题级别，从而实现精确控制。滚动到底部并选择字体大小预设后，您将能够创建和编辑整个网站使用的字体大小预设。

现在，让我们返回样式并查看颜色。在此部分，您可以选择主题自带的调色板之一，创建自定义调色板，然后当然可以更改文本、背景以及链接、说明、按钮和标题等其他元素的颜色。您知道还可以为网站添加背景图片吗？当然，您也可以通过点击重置一键删除它。接下来，我们来看阴影。投影是各种内容及内容组合的出色设计元素。在此部分下方，您可以编辑默认样式或创建自定义阴影。完成自定义后，您可以为其命名。最后，我们来看布局。布局部分允许您更改网站主要内容区域的内容宽度，以及内边距和区块间距。如果您对更改不满意，可以使用修订历史功能将网站恢复到以前的版本，或重置为默认设置。

样式手册

最后，我们简要介绍一下样式手册。在之前的一课中，我们探讨了如何将样式手册用作样式指南。现在，让我们点击眼睛图标打开样式手册。提醒一下，样式手册是您在样式部分所做设计决策的预览。样式面板是您定义设计的地方，而样式手册则是您查看这些设计如何应用于各种网站元素的地方。换句话说，它是您样式更改如何影响网站各种元素和区块的视觉预览。当您的主页尚未显示所有设计元素或区块时，它尤其有用。您还可以自定义单个区块，从而对网站设计进行更精细的控制。

结论

总之，样式界面提供了一种直观且灵活的方式，让您个性化网站的外观和感觉，同时也提供了一种用户友好的设计方法。

简介

在本课中，我们将更深入地了解如何使用模板部件。通过本教程的学习，你将能够描述模板部件是什么以及它们如何工作，编辑模板部件，并在模板中替换它。如果你访问一个设计良好的网站，你会注意到其优势之一就是一致性。网站的页眉、页脚和侧边栏通常包含相同或相似的内容，以便访问者无论身在网站何处，都能轻松找到所需信息。

为了达到这种效果，网页设计师是否需要在每个网站页面上从头构建页眉、页脚和侧边栏？简短的回答是不需要。使用 WordPress 区块主题时，你将使用一个称为模板部件的功能。

什么是模板部件？

首先，什么是模板部件？模板部件是一组区块，你可以用来创建模板中重复的部分，例如页眉、页脚和侧边栏。让我们在 WordPress 仪表盘中实际操作一下。前往“外观”，然后点击“编辑器”。这将带我们进入站点编辑器，然后我们打开其中一个模板，本例中是博客首页模板。

我们在模板内部创建和修改页眉和页脚模板部件。某些区块主题提供更多或更少的选项，但几乎所有主题都预装了页眉和页脚，就像你在 Twenty Twenty-Four 主题中看到的那样。WordPress 通过提供现成可用的页眉和页脚模式，使操作更加简单。因此，当你点击页眉模板部件的三个垂直点并选择“替换页眉”时，你首先会看到现有的模板部件。这些是我已经创建的模板部件。然后，在下面，我们会找到页眉模板部件模式。你可以选择主题附带的任何这些模式。如前所述，某些主题可能提供更多，某些提供更少。页脚的操作方式完全相同。

编辑模板部件

让我们从编辑页眉模板部件开始。当你在博客工具栏中点击“编辑”时，你可以在编辑模式下处理页眉模板部件，而不会受到其他干扰。首先，让我们打开列表视图。然后，我将继续向页眉模板部件添加我的站点徽标。选择站点徽标区块后，我可以从媒体库或计算机上传图像。

接下来，我将选择站点标题区块，并添加此网站的站点标题。然后，我将保存我的页眉模板部件，并返回到我的博客首页模板。提醒一下：模板部件是同步的，并且在所有使用它们的地方都会更新。你会注意到紫色表示模式已同步。让我们在其他模板中实际看看效果。例如，当我们打开页面模板时，我们会看到页眉完全相同。或者当我们打开 404 模板时，我们会看到更改也已应用到这里，因为模板部件是同步的。

如果你希望首页有不同页眉，但网站其余部分使用标准页眉，该怎么办？在这种情况下，你需要创建一个新的页眉模板部件，或者用模式替换页眉，并将其添加到你的博客首页或首页模板中。我将修改我的博客首页模板，因为我已选择我的文章页面作为首页显示。所以我会确保选中我的页眉，点击三个垂直点，然后选择“替换页眉”。现在，你可以使用模式或现有的模板部件替换你的首页页眉。我将用现有的页眉模板部件替换页眉，该部件我已创建并命名为 Banner Header。现在，我的首页将拥有自己独特的页眉。保存后，我们可以查看其他模板，以确认它们仍然保留标准页眉。

从头创建模板部件

最后，让我们讨论一下从头创建模板部件。前往“模式”，然后向下滚动到“模板部件”。你可以在此处查看所有现有的页眉、页脚和通用模板部件。要创建新的模板部件，请点击模式旁边的加号图标，然后选择“创建模板部件”。在这里，你可以选择不绑定到任何特定区域的通用模板部件、页眉模板部件或页脚模板部件。在本例中，我们将创建一个页脚模板部件。

首先，我们需要给它取一个合适的名称。这里命名为“四列页脚”，然后点击“创建”。这会再次进入专注模式；从这里开始，我们可以从头构建。为了省事，我会从“模式目录”中快速获取一个现成的模式。前往 wordpress.org，点击“扩展”，选择“模式”。在这里，你可以从数千个模式中进行选择。我会选择“社区贡献”，点击“页脚”，然后搜索合适的模式。找到喜欢的模式后，复制它，回到你的网站并粘贴。现在你可以开始修改它以满足需求。更新完成后，返回模式区域，你会注意到新的页脚已成为现有模板部件的一部分。你可以将其添加到任何模板中。当选择“管理所有模板部件”时，你可以重命名和删除自定义模板部件，或清除主题提供的模板部件的自定义设置。我相信你现在已经能够自如地编辑模板，并为你的网站创建页眉和页脚了。