Kadence 教学：使用 Kadence blocks pro构建图文叠加效果

在图像展示类页面中，图像叠加效果能提升视觉吸引力，让信息传达更直接。Kadence Blocks Pro 插件中的 Image Overlay 区块 支持设置背景图、添加文字、配置悬停动画以及链接跳转，是一个结构清晰、功能多样的图像展示模块。

本教程介绍 Image Overlay 的完整设置过程，包括图像选择、文本设置、悬停样式、边框控制等内容。

插入 Image Overlay 区块

打开页面编辑器，点击添加区块，在区块列表中找到 Image Overlay 并插入页面。

这个区块默认包含一个占位图像与标题文字，点击后即可开始编辑。

设置背景图片

点击图像区域，选择一张图片作为背景。建议选择构图简洁、清晰的图片，以方便配合文本和叠加效果展示。

配置链接与悬停动画

Image Overlay 支持整块点击跳转，可以为其添加一个链接地址，并设定是否在新标签页打开。

在右侧设置栏中可选择悬停时的动画效果，如缩放、淡入、模糊、亮度变化等。不同动画会带来不同的视觉感受，可根据页面风格灵活调整。

添加标题与副标题

区块支持添加主标题和副标题，点击文字区域即可直接输入内容。

文字可以自定义字体、字号、颜色、行高、字重等，满足不同排版风格需求。

设置文字对齐方式

可调整文字在图像中的对齐方式，包括左对齐、居中或右对齐，同时支持上下方向的对齐设置（顶部、中部、底部）。灵活的对齐方式有助于保持页面整洁。

自定义悬停叠加层样式

当鼠标悬停在图像上时，叠加层将出现。可以设置叠加颜色、透明度、渐变方向、动画过渡方式等。

合理设置叠加层颜色和透明度有助于突出文字信息，同时不遮挡背景图像的主要内容。

添加标题分隔线

在主标题与副标题之间添加一条分隔线，可以让内容层次更清晰。分隔线支持设置粗细、长度、颜色以及样式（实线、虚线等）。

设置边框样式与圆角

可为整个 Image Overlay 区块添加边框，控制边框的宽度、颜色、样式，也可设置圆角，使图片整体轮廓更加柔和。

边框设置在多图布局中尤其适合突出卡片边界，增强视觉识别。

设置区块内边距

Kadence 支持两种边距设置方式：

• 统一设置：四个边距值相同

• 分别设置：上、右、下、左四个方向独立设置

合理的边距设置可以帮助图文保持呼吸感，避免内容过于拥挤。

应用场景举例

Image Overlay 区块适用于多种页面布局，例如：

• 首页图文栏目入口

• 推荐文章展示区域

• 产品或服务模块封面

• 团队成员卡片式介绍

• 项目或作品集封面区块

可搭配 Row Layout、高级网格、标签页等其他 Kadence 区块一起使用，构建出完整而美观的页面结构。

总结

Image Overlay 区块为图像展示提供了灵活的控制方式。通过设置图片、文字、叠加样式与交互动画，可以轻松构建出风格统一、结构合理的展示模块。

无需编写代码，也不需要复杂配置，即可快速构建适用于多种场景的图像内容区块，是 Kadence Blocks Pro 中非常实用的一部分。