这款模板利用了 GSAP 动画技术 和 滚动交互效果,通过滚动页面时对元素进行放大与缩小的动画,使网站呈现出动态的视觉效果。用户在滚动页面时,页面上的内容会随之变化,增加了互动性和趣味性,提升了用户体验。放大与缩小的动画不仅能够使页面更具动感,也使得用户能够更好地专注于页面的关键内容。
应用场景:
产品展示:适用于电商网站,特别是当展示商品或产品细节时,滚动效果能够让用户更细致地查看产品,提升互动性和产品吸引力。
创意展示:艺术家、设计师或摄影师的网站,可以用这种交互效果来展示作品,增强视觉效果和用户的沉浸感。
教育类网站:适用于讲解复杂概念或数据的页面,通过放大和缩小动画效果引导用户重点关注特定内容,提升学习体验。
营销页面:通过滚动交互的效果突出品牌的独特性或重要促销信息,增强视觉吸引力,从而提高转化率。
演示地址:https://demo-show.361sale.com/elementor-effects-1
文件下载地址↓
点击获取下载文件后,你会得到三个文件。
![图片[1]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203160452767-image.png)
完整版模版
1。如果你想使用完整的模版请选择elementor-5337-2024-09-13.json文件
![图片[2]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203161257600-image-scaled.png)
请确保安装已经安装好Elementor免费版和Elementor Pro版。只有Elementor Pro版才有模版导入功能。
![图片[3]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203162515250-image-1-scaled.webp)
网站后端找到页面,点击添加新页面。如上图:
![图片[4]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203162704190-image-4-scaled.png)
启用Elementor编辑。如上图:
![图片[5]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203162820150-image-1-scaled.webp)
点击添加旁边文件的图标,也就是模版。如上图:
![图片[6]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203163025214-image-3.png)
点击右上角的上传标志,然后点击选择文件,然后再在本地文件选择刚刚下载的文件。如上图:
![图片[7]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203163246815-image.png)
然后回到我的模版,即可查看我们刚刚导入的模版,点击预览查看效果,然后再选择插入。如上图
导入完成后查看效果,有可能会出现页眉和页脚,那就需要选择好对应的模版了。
![图片[8]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203165642489-image-2.png)
点击我们刚刚导入的模版的页面,然后点击编辑。如上图:
![图片[9]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203170156167-image-1-scaled.png)
选择模版,选择elementor画布,选择这个是因为不显示页眉和页脚,只显示模版内容。如上图
![图片[10]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203170538339-image-scaled.png)
同时在使用elmentor编辑页面,选择站点设置,在选择布局。如上图:
![图片[11]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203170700422-image.png)
也要确保一样是Elementor画布模版。这样就不会有其他内容。如上图:
![图片[12]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203170758506-image.png)
请关闭标头和页脚里面的内容,点击后隐藏里面的内容,如上图:
![图片[13]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203171843349-d8d8c85aeed374b40cdaf27328f25a2-scaled.png)
![图片[14]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203171946470-image.png)
使用自己图片的模版
点击zip文件,如下图:
![图片[15]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203171100599-image.png)
然后会出现elementor-3470-2024-08-21.json文件。如下图
![图片[16]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203171212466-image.png)
然后点击上传这个文件。如下图:
![图片[17]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203171358271-image.png)
然后选择预览再选择插入。如下图:
![图片[18]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203171505614-image.png)
区别在于可以替换成自己的图片,而不使用模版本身的。
![图片[19]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241203171552116-image-scaled.png)
其他步骤和完整版一样。
