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