Tag: Elementor网页设计

  • 酷炫滚动交互放大缩小效果模板 | GSAP 动画实现动态网站设计

    酷炫滚动交互放大缩小效果模板 | GSAP 动画实现动态网站设计

    这款模板利用了 GSAP 动画技术滚动交互效果,通过滚动页面时对元素进行放大与缩小的动画,使网站呈现出动态的视觉效果。用户在滚动页面时,页面上的内容会随之变化,增加了互动性和趣味性,提升了用户体验。放大与缩小的动画不仅能够使页面更具动感,也使得用户能够更好地专注于页面的关键内容。

    应用场景:

    产品展示:适用于电商网站,特别是当展示商品或产品细节时,滚动效果能够让用户更细致地查看产品,提升互动性和产品吸引力。

    创意展示:艺术家、设计师或摄影师的网站,可以用这种交互效果来展示作品,增强视觉效果和用户的沉浸感。

    教育类网站:适用于讲解复杂概念或数据的页面,通过放大和缩小动画效果引导用户重点关注特定内容,提升学习体验。

    营销页面:通过滚动交互的效果突出品牌的独特性或重要促销信息,增强视觉吸引力,从而提高转化率。

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

    文件下载地址↓

    点击获取下载文件后,你会得到三个文件。

    图片[1]-361Sale WordPress Care

    完整版模版

    1。如果你想使用完整的模版请选择elementor-5337-2024-09-13.json文件

    图片[2]-361Sale WordPress Care

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

    图片[3]-361Sale WordPress Care

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

    图片[4]-361Sale WordPress Care

    启用Elementor编辑。如上图:

    图片[5]-361Sale WordPress Care

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

    图片[6]-361Sale WordPress Care

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

    图片[7]-361Sale WordPress Care

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

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

    图片[8]-361Sale WordPress Care

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

    图片[9]-361Sale WordPress Care

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

    图片[10]-361Sale WordPress Care

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

    图片[11]-361Sale WordPress Care

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

    图片[12]-361Sale WordPress Care

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

    图片[13]-361Sale WordPress Care
    图片[14]-361Sale WordPress Care

    使用自己图片的模版

    点击zip文件,如下图:

    图片[15]-361Sale WordPress Care

    然后会出现elementor-3470-2024-08-21.json文件。如下图

    图片[16]-361Sale WordPress Care

    然后点击上传这个文件。如下图:

    图片[17]-361Sale WordPress Care

    然后选择预览选择插入。如下图:

    图片[18]-361Sale WordPress Care

    区别在于可以替换成自己的图片,而不使用模版本身的。

    图片[19]-361Sale WordPress Care

    其他步骤完整版一样。