搭建网站时,在首页或页面加入幻灯片轮播(Slider)可以有效提升视觉冲击力,展示品牌形象、活动信息或产品推荐。很多人以为需要专业技能或付费插件才能实现。其实,结合 Astra 主题和免费插件,也能轻松制作出流畅美观的轮播效果。
本文介绍最简单的 Astra + 免费插件实现方案。
![图片[1]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707135414433-image.png)
1. Astra 主题本身支持幻灯片吗?
Astra 免费版默认没有内置幻灯片模块,需要使用插件实现。但 Astra 与各类页面构建器和幻灯片插件兼容,安装后可直接在页面中插入轮播模块。
![图片[2]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707135312371-image.png)
2. 推荐免费幻灯片轮播插件
以下两款是用户量大、兼容 Astra、使用简单的免费插件。
2.1 Smart Slider 3
![图片[3]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707135506705-image.png)
特点:
- 免费版本已足够日常使用
- 可视化编辑界面,拖拽式添加图片、文字、按钮
- 支持响应式,手机端自动适配
安装步骤:
- 登录 WordPress 后台
- 点击【插件】→【安装插件】
![图片[4]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707135658632-image.png)
- 搜索 Smart Slider 3
![图片[5]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707135754291-image.png)
- 点击【安装】→【启用】
![图片[6]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707135836314-image.png)
使用方法:
- 在 WordPress 左侧菜单找到【Smart Slider】
- 点击【New Project】新建轮播
![图片[7]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707140239872-image.png)
- 上传图片,添加文字与按钮
![图片[8]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707140610478-image.png)
![图片[9]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707141107564-image.png)
- 保存后复制 Shortcode
![图片[10]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707141558531-image.png)
插入页面:
- 进入【页面】编辑
- 使用 WordPress 块编辑器添加 Shortcode 块
![图片[11]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707141720116-image.png)
- 粘贴轮播 Shortcode,更新页面
![图片[12]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707141904148-image.png)
2.2 MetaSlider
![图片[13]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707142016613-image.png)
特点:
- 简洁易用,配置极少
- 支持图片轮播、滑块动画、幻灯片过渡效果
- 与大多数主题高度兼容
安装步骤:
- 后台【插件】→【安装插件】
![图片[14]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707142117937-image.png)
- 搜索 MetaSlider
![图片[15]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707142230616-image.png)
- 点击【安装】→【启用】
![图片[16]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707142303960-image.png)
使用方法:
- 进入【MetaSlider】菜单
- 点击【Create Slideshow】创建轮播
![图片[17]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707142500577-image.png)
- 上传并添加图片
![图片[18]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707142641370-image.png)
- 设置滑动效果(淡入淡出、滑动等)与尺寸
![图片[19]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707143242659-image.png)
![图片[20]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707143323788-image.png)
- 保存后复制 Shortcode
![图片[21]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707143435711-image.png)
插入页面:
- 编辑页面,添加 Shortcode 块
![图片[22]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707143716930-image.png)
- 粘贴轮播 Shortcode 并更新
![图片[23]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707143606339-image.png)
3. 免费方案的效果和局限
效果:
使用 Smart Slider 3 或 MetaSlider,免费版可以制作出专业感的首页头图轮播、产品图轮播、客户案例展示。
![图片[24]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707143849617-image.png)
局限:
免费版本通常不支持:
- 视频背景
- 高级动画层叠
- 动态内容(如 WooCommerce 产品自动轮播)
若需要这些功能,可考虑后续升级为付费版,但对于一般企业官网、个人博客,免费版足够使用。
4. 为什么推荐这两款插件
- 无需代码
- 后台可视化操作
- 与 Astra 主题完美兼容
![图片[25]-Astra 免费版幻灯片轮播教程:Smart Slider 3 与 MetaSlider 实现方案](https://www.361sale.com/wp-content/uploads/2025/07/20250707144212600-image.png)
- 免费版足够完成轮播核心需求
5. 总结
安装 Smart Slider 3 或 MetaSlider,配合 Astra 免费主题,就能在几分钟内实现漂亮的幻灯片轮播效果,无需任何专业技能或代码编辑,帮助网站视觉体验提升一个档次。
| 联系我们 | |
|---|---|
| 教程看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
客服微信
|
| ① 电话:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| ③ 邮件:info@361sale.com | |
| ④ 工作时间:周一至周五,9:30-18:30,节假日休息 | |
THE END






















![表情[dabing]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/dabing.gif)
![表情[fendou]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/fendou.gif)

暂无评论内容