介绍
今天，我们将探索封面区块。它是创建页头、横幅式展示、行动号召等内容的绝佳工具。封面区块允许你在图片或视频上显示文本和其他内容。在本课程中，我们将创建两种不同的设计。但首先，让我们快速了解一些关键功能和设置，这些是继续学习前需要掌握的。
关键功能和设置
需要理解的重要一点是，封面区块是一个容器区块，可以在其中容纳其他区块。当你向页面添加封面区块时，可以从电脑或媒体库上传图片或视频。你还可以选择“使用特色图片”选项，将封面设置为页面或文章的特色图片。然后，你可以点击彩色圆圈为封面区块添加叠加颜色，稍后可以在侧边栏设置中更新。
让我们从媒体库添加一张图片。值得注意的是，WordPress 会自动添加与图片相配的叠加颜色。插入后，在列表视图中选择你的封面区块，然后使用区块工具栏将对齐方式改为全宽。你还可以将内容位置改为左上角、中间左侧或其他位置。此外，你可以将封面区块切换为全高，并根据需要添加双色调滤镜。在侧边栏设置中，我们可以选择“固定背景”，从而创建视差效果。当图片尺寸与填充空间不匹配时，“重复背景”选项非常有用。焦点选择器允许你标识图片最重要的视觉点，特别是在移动设备查看时。同时，记得添加替代文本，为屏幕阅读器和 SEO 描述图片的用途。在样式下方，你可以编辑颜色叠加并更改其不透明度，使其变暗或变亮。接下来，你可以添加内边距，为封面区块中的内容创造更多空间。
横幅示例
现在，我们可以继续看一些示例。我想展示在第一个示例中如何创建以下横幅。我们可以继续添加封面区块，然后从媒体库选择一张图片。接下来，我会确保选择封面区块，并将对齐方式改为全宽。然后，我会将内容位置改为顶部中间。接着，我们可以继续添加一些文本。在这种情况下，我会写“探索山脉”，然后将文本大小改为自定义大小。对于这个示例，我们将其改为“4 rem”。我还会将文本外观改为“中等”。
要更改文本的对齐方式，我将把段落区块或文本包裹在一个群组区块中。然后，取消选中“内部区块使用内容宽度”。完成此操作后，我可以将群组区块的对齐方式改为全宽。接着，我会选择封面区块，打开样式。然后，我会将叠加不透明度保持在 50%，并可以添加一些内边距或空间围绕区块内容。现在，我们可以在侧边栏设置中关闭列表视图，设计完成后，我们还可以检查它在移动设备上的显示效果。
如果你不希望图片被裁剪，就像我们在这里看到的，你可以更改宽高比。为此，我们可以返回页面，打开样式，然后向下滚动到宽高比。我会选择经典的 3×2 宽高比。当我们在移动设备上查看时，图片不会被裁剪。图片会适当缩放并保持其比例。
视差示例
在下一个示例中，我想展示如何创建这个酷炫的视差效果，将两张图片融合在一起。我添加了一个封面区块来创建这个设计，并从媒体库选择了一张图片。插入后，我选择了封面区块，将对齐方式改为全宽，并将区块切换为全高。然后，我打开侧边栏设置，选择了“固定背景”来创建视差效果。接着，我会点击区块工具栏上的三个垂直点，然后复制。
区块复制后，我会添加一张新图片。接下来，我会打开列表视图，选择两个封面区块，并将它们添加到一个群组区块中。由于我想移除两张图片之间的间距，我会打开群组区块的样式，找到区块间距，并将其改为零。请注意，如果你看不到区块间距设置，可能是因为你使用的主题不支持。然后，我们的设计就完成了。我们还可以在较小的屏幕上查看。
更多选项
最后，我想展示一些使用封面区块创建的其他设计。在这种情况下，我使用封面区块为作品集网站创建了这个行动号召。同时，别忘了访问模式目录，找到使用封面区块构建的精彩模式。在最后一个示例中，我使用了其中一个页头模式，为我的猫头鹰保护区网站创建了页头，左上角有标志和网站标题，右上角有导航菜单。在这里，我们也可以在移动设备上查看。
结论
尽情使用封面区块吧，并始终仔细检查你的设计在较小屏幕上是否显示正确。