使用 Astra 和 Gutenberg 实现可切换图文滑块展示区域

在使用 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 的组合，可以完成一个图文轮播模块，具备快速加载、设计灵活、移动适配等特性。适合轻型企业官网、品牌落地页、博客首页等页面结构。

如果正在寻找一个纯净、轻量的滑块展示方案，这种方式值得尝试。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：[email protected]
④ 工作时间：周一至周五，9:30-18:30，节假日休息