Split Content(分栏内容)是一种非常常见的网页排版形式,通常在一侧展示图片,另一侧展示文字内容,页面结构清晰,视觉重点突出。
![图片[1]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331145116966-image.png)
虽然默认的 WordPress 区块编辑器不支持这种布局,但使用 Kadence Blocks Pro 插件,可以快速实现这一效果。
![图片[2]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112434496-image.png)
插入并设置 Split Content 区块
- 打开编辑页面,添加 Split Content 区块
![图片[3]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112507977-image.png)
- 设置主要参数,包括图文排列顺序、内容宽度等
![图片[4]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112514496-image.png)
- 在图像区域上传或选择图片
![图片[5]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112538653-image.png)
- 在文本区域添加标题与正文
![图片[6]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112603925-image.png)
![图片[7]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112712754-image.png)
- 设置图像和文字部分的背景颜色
![图片[8]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112721529-image.png)
- 调整内容在区块中的垂直对齐方式(顶部、居中、底部)
![图片[9]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112744202-image.png)
- 设置整个 Split Content 区块的整体对齐方式(左、中、右)
![图片[10]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112816563-image.png)
- 保存并预览前端页面
![图片[11]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112826526-image.png)
设置 Overlay 效果(图文叠加)
Split Content 区块支持图文部分的交叠显示,营造更具动感的排版形式。
![图片[12]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112904580-image.png)
步骤如下:
- 插入一个 Row Layout 容器,设置为单列布局
- 将 Split Content 区块添加至 Row 中
![图片[13]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113000786-image.png)
- 根据需要为 Row 设置背景颜色,或将其设为全宽
![图片[14]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113016447-image.png)
- 在 Split Content 设置中调整左右 负边距(Negative Margin),使文字部分与图片交叠
![图片[15]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113055160-image.png)
- 需要的话可以添加内容阴影,增强视觉层次
![图片[16]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113104565-image.png)
- 通过缩小最小高度(Min Height)来调整内容所占空间
![图片[17]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113111132-image.png)
- 在不同设备视图下调整边距和间距,确保视觉平衡
![图片[18]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113216657-image.png)
响应式优化设置
Split Content 区块支持独立设置手机和平板端的样式:
- 在编辑器底部切换至手机视图,设置合适的内边距和外边距
![图片[19]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113422541-image.png)
- 切换至平板视图,进一步微调内容排布与留白
![图片[20]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113357494-image.png)
- 检查所有设备尺寸下的展示效果,进行必要调整
总结
Split Content 区块可以快速创建常见的图文分栏排版,不需要复杂布局操作。在展示产品、介绍团队、发布宣传内容时,都非常适合使用。结合 Row Layout 与负边距功能,还可以轻松实现图文交叠效果,为页面增添层次和变化。
联系我们 |
---|
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
① 电话:020-2206-9892 |
② QQ咨询:1025174874 |
③ 邮件:info@361sale.com |
④ 工作时间:周一至周五,9:30-18:30,节假日休息 |
THE END
暂无评论内容