目录
大纲
WP建站和运维

揭秘封面区块

引言

今天我们将探索封面区块。这是创建页眉、横幅式展示、行动号召等元素的绝佳工具。封面区块允许您在图像或视频上方显示文本和其他内容。本次课程中,我们将创建两种不同设计。但首先,让我们快速了解一些关键功能和设置。

关键功能与设置

需要理解的核心在于:封面区块是能容纳其他区块的容器区块。当您向页面添加封面区块时,可以从电脑或媒体库上传图像/视频,或选择”使用特色图像”选项将其设为页面/文章的封面图。点击彩色圆圈可添加覆盖色(后续可在侧边栏设置中调整)。

从媒体库添加图像时,WordPress会自动添加与图像协调的覆盖色。插入后,在列表视图中选择封面区块,使用区块工具栏将对齐方式改为全宽。您还可以调整内容位置(如左上/中左等),切换全高显示,或添加双色调滤镜。在侧边栏设置中:

  • 选择”固定背景”可创建视差效果
  • 当图像尺寸不足时,”重复背景”选项非常实用
  • 焦点选择器能标记图像的核心视觉点(尤其针对移动端)
  • 别忘了添加替代文本以提升无障碍访问和SEO效果

在”样式”选项下,您可以编辑覆盖色及透明度,或通过内边距调整内容周围空间。

横幅案例

现在让我们看具体案例。首先演示如何创建示例中的横幅:添加封面区块并选择媒体库图像,将对齐方式设为全宽,内容位置设为顶部居中。接着添加文字”探索群山”,将字号设为4rem,字重设为中等。

要调整文本对齐,需先将段落区块嵌套在群组区块中,取消勾选”内部区块使用内容宽度”,再将群组区块设为全宽对齐。最后在封面区块的样式中保持覆盖色透明度50%,添加适当内边距。设计完成后,记得检查移动端显示效果。

若不想图像被裁剪(如当前效果),可返回页面调整宽高比为经典3×2比例,这样在移动端就能保持完整比例显示。

视差案例

第二个案例展示如何创建双图融合的视差效果:添加封面区块并选择图像,设为全宽全高后,在侧边栏启用”固定背景”创建视差。通过区块工具栏的三点菜单复制该区块,替换新图像后将两个封面区块嵌套在群组区块中,将区块间距设为零即可消除图像间隙(注意:某些主题可能不显示此设置)。

更多可能性

最后展示其他创意应用:用封面区块制作作品集网站的行动号召按钮,或在”模式目录”中寻找现成的封面区块模板。最后一个案例中,使用页眉模板为猫头鹰保护网站创建了左上角显示logo/标题、右上角显示导航菜单的页眉,同样需要检查移动端适配。

结语

尽情使用封面区块时,请始终确认设计在小屏幕上的显示效果。

实践练习

使用WordPress Playground测试技能:

  1. 添加封面区块到文章/页面
  2. 上传并插入提供的雪山图片(见链接)
  3. 在图像上方添加文本”探索群山”
  4. 参照视频示例设计横幅
  5. 预览移动端效果并确保正常显示
  6. 可选:根据需要调整图像宽高比