Elementor 和 GSAP：实现无负担动画效果的网站模板

本项目模板的目标是利用 Elementor Page Builder 和 GSAP (GreenSock Animation Platform) 构建一个轻量、灵活的网站。整个项目完全避免第三方插件或主题的依赖，只专注于原生的 Elementor 和 GSAP 动画。这个模板特别适用于以下类型的网站：

• 企业官网
• 博客站点
• 垂直电商平台

通过这种方式，确保了网站不仅在视觉效果上有卓越的动画体验，同时也保持了代码的简洁和页面加载的高效。

演示地址：https://demo-show.361sale.com/elementor-effects-17

完整版演示地址：https://demo-show.361sale.com/

文件下载地址↓

你有两个选项，是导入整个完整版还是单独的页面。

导入完整版

好的，完整版的会有一点复杂，但不用担心，我会为你讲解步骤。

在网站的后端我们找到elementor，然后找到工具，在找到导入/导出库，找到导入一个模板库，点击开始导入。

点击选择文件。找到我们下载好的zip文件包。如下图：

如果出现安全弹窗，请不用担心，这是正常的，点击继续。如下图：

请确保Elementor和Elementor Pro都是最新版本。如下图：

然后点击右下角的下一页。如下图：

勾选所有的项目，然后点击右下角的导入。如下图：

导入过程需要2-3分钟，请耐心等待。如下图：

如果出现此信息，代表全部完成，点击右下角的关闭即可。

然后从网站后端点击前端，查看最终效果是否正常，是不是非常的简单。

单独的页面

请确保安装已经安装好Elementor免费版和Elementor Pro版。只有Elementor Pro版才有模版导入功能。

网站后端找到页面，点击添加新页面。如上图：

启用Elementor编辑。如上图：

点击添加旁边文件的图标，也就是模版。如上图：

点击右上角的上传标志，然后点击选择文件，然后再在本地文件选择刚刚下载的文件。如上图：

比如我们上传其中一个Our work的页面模版。

然后回到我的模版，即可查看我们刚刚导入的模版，点击预览查看效果，然后再选择插入。如上图

导入完成后查看效果，有可能会出现页眉和页脚，那就需要选择好对应的模版了。

点击我们刚刚导入的模版的页面，然后点击编辑。如上图：

选择模版，选择elementor画布，选择这个是因为不显示页眉和页脚，只显示模版内容。如上图

同时在使用elmentor编辑页面，选择站点设置，在选择布局。如上图：

也要确保一样是Elementor画布模版。这样就不会有其他内容。如上图：

请关闭标头和页脚里面的内容，点击后隐藏里面的内容，如上图：

最后别忘了保存，查看前端的效果哦。