Kadence 教学:使用Kadence Blocks Pro快速制作图文分栏布局

Split Content(分栏内容)是一种非常常见的网页排版形式,通常在一侧展示图片,另一侧展示文字内容,页面结构清晰,视觉重点突出。

虽然默认的 WordPress 区块编辑器不支持这种布局,但使用 Kadence Blocks Pro 插件,可以快速实现这一效果。

插入并设置 Split Content 区块

打开编辑页面,添加 Split Content 区块

设置主要参数,包括图文排列顺序、内容宽度等

在图像区域上传或选择图片

在文本区域添加标题与正文

设置图像和文字部分的背景颜色

调整内容在区块中的垂直对齐方式(顶部、居中、底部)

设置整个 Split Content 区块的整体对齐方式(左、中、右)

保存并预览前端页面

设置 Overlay 效果(图文叠加)

Split Content 区块支持图文部分的交叠显示,营造更具动感的排版形式。

步骤如下:

插入一个 Row Layout 容器,设置为单列布局

将 Split Content 区块添加至 Row 中

根据需要为 Row 设置背景颜色,或将其设为全宽

在 Split Content 设置中调整左右 负边距(Negative Margin),使文字部分与图片交叠

需要的话可以添加内容阴影,增强视觉层次

通过缩小最小高度(Min Height)来调整内容所占空间

在不同设备视图下调整边距和间距,确保视觉平衡

响应式优化设置

Split Content 区块支持独立设置手机和平板端的样式:

在编辑器底部切换至手机视图,设置合适的内边距和外边距

切换至平板视图,进一步微调内容排布与留白

检查所有设备尺寸下的展示效果,进行必要调整

总结

Split Content 区块可以快速创建常见的图文分栏排版,不需要复杂布局操作。在展示产品、介绍团队、发布宣传内容时,都非常适合使用。结合 Row Layout 与负边距功能,还可以轻松实现图文交叠效果,为页面增添层次和变化。

Leave a Reply

您的电子邮箱地址不会被公开。 必填项已用 * 标注