在使用 Astra 主题时，如果想打造一个图文轮播展示区，其实不用借助 Elementor 等页面构建器也能完成。结合 WordPress 默认的 Gutenberg 编辑器和 Astra 推荐的 Spectra 插件，即可轻松实现图文轮播功能。。
本教程带来一个完整步骤，适合应用于产品介绍、团队展示、首页主图等场景。
一、所需工具
全部为免费资源：
Astra 主题：轻量，适合搭配自定义设计
Gutenberg 编辑器：WordPress 自带的区块编辑器
Spectra 插件：由 Astra 开发，为编辑器添加更多高级区块
安装方法：
后台进入插件页面，搜索 Spectra 安装并启用
启动后，在 Spectra 设置中激活以下区块：Slider、Container、Image、Heading
二、创建图文滑块模块
步骤 1：新建或编辑页面
进入首页或其他页面，使用 Gutenberg 编辑器打开。
步骤 2：添加外层容器布局
添加一个 Container 区块：
设置宽度为全宽
添加上下内边距，比如 60px
建议设置背景颜色或保留透明背景
步骤 3：添加滑块区块
在容器中插入 Spectra 提供的 Slider 区块：
默认包含两张幻灯片，可增加数量
设置为滑动或淡入淡出效果
可开启导航箭头、点状导航、自动轮播
步骤 4：设计每一张幻灯片内容
每张幻灯片中创建一个两列布局：
右列为图片展示：使用 Image 区块插入产品或品牌图片
左列为文本区块：包含标题（Advanced Heading）、正文描述、按钮（CTA）
布局建议：
图片部分宽度建议为 40%，文字部分为 60%
设置左右列居中对齐，增加视觉平衡
合理间距让内容更清晰易读
三、移动端布局优化
为了在手机和平板上展示清晰，需要做以下设置：
设置容器在移动设备上方向切换为纵向排列
图片显示在上方，文字位于下方
使用响应式字体单位（如 clamp、vw）调节文字大小
按钮尺寸和间距适合手指点击操作
Spectra 提供的区块大多支持设备自适应，基本不需复杂处理。
四、样式设置建议
为了保持简洁美观，可参考以下设置：
背景颜色使用淡灰或品牌色
图片统一比例，例如 4:3 或正方形，避免页面错乱
标题建议设置为 32~36px，正文为 18~20px
按钮添加鼠标悬停样式，提升点击吸引力
五、常见使用场景
应用类型内容说明产品轮播每张展示一个产品图+简要说明+跳转按钮团队成员介绍包含头像、职位描述、个性化文案与联系方式按钮品牌愿景展示三至五张幻灯片展示品牌使命与核心理念首页头部图块展示活动信息或核心服务简介，增强首页视觉引导
六、发布与复用方法
编辑完成后，可以将该滑块：
放置在页面顶部或中部作为重点内容
保存为可重用区块，后续快速插入其他页面
若使用 Astra Pro，也能借助 Custom Layouts 模块添加到指定页面结构中
七、小结
使用 Astra + Gutenberg + Spectra 的组合，可以完成一个图文轮播模块，具备快速加载、设计灵活、移动适配等特性。适合轻型企业官网、品牌落地页、博客首页等页面结构。
如果正在寻找一个纯净、轻量的滑块展示方案，这种方式值得尝试。