Category: 工业类

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

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

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

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

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

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

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

    图片[1]-361Sale WordPress Care
    图片[2]-361Sale WordPress Care

    文件下载地址↓

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

    导入完整版

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

    图片[3]-361Sale WordPress Care

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

    图片[4]-361Sale WordPress Care

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

    图片[5]-361Sale WordPress Care

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

    图片[6]-361Sale WordPress Care

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

    图片[7]-361Sale WordPress Care

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

    图片[8]-361Sale WordPress Care

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

    图片[9]-361Sale WordPress Care

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

    图片[10]-361Sale WordPress Care

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

    图片[11]-361Sale WordPress Care

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

    图片[12]-361Sale WordPress Care

    单独的页面

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

    图片[2]-如何在 Elementor 中添加滚动视频序列提升视觉冲击力(附演示与下载)
    图片[3]-Elementor特效模版1-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

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

    图片[4]-Elementor特效模版1-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

    启用Elementor编辑。如上图:

    图片[5]-Elementor特效模版1-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

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

    图片[6]-Elementor特效模版1-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

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

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

    图片[18]-361Sale WordPress Care

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

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

    图片[8]-Elementor特效模版1-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

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

    图片[9]-Elementor特效模版1-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

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

    图片[10]-如何在 Elementor 中添加滚动视频序列提升视觉冲击力(附演示与下载)

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

    图片[11]-如何在 Elementor 中添加滚动视频序列提升视觉冲击力(附演示与下载)

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

    图片[12]-如何在 Elementor 中添加滚动视频序列提升视觉冲击力(附演示与下载)
    图片[13]-如何在 Elementor 中添加滚动视频序列提升视觉冲击力(附演示与下载)
    图片[14]-如何在 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

    其他步骤完整版一样。

  • Petro – 工业元素elementor模板套件

    Petro – 工业元素elementor模板套件

    主要特点

    • 专业设计:Petro – 工业 Elementor 模板套件专为工业、石油和天然气、制造、机械、能源、工程等多用途企业设计,布局美观独特,非常适合各类工业相关企业的网站。
    • 多种页面模板:包含多个首页设计以及关于我们、公司历史、团队介绍、合作伙伴、服务、项目、常见问题、联系页面等全面的页面模板,满足不同内容展示需求。
    • 完全响应式:模板设计 100% 响应式,确保在移动设备和桌面设备上的浏览效果一致,提升用户体验。
    • 灵活的自定义选项:利用 Elementor 和 ElementsKit Lite 等插件,用户可以轻松自定义各个页面模块的布局、颜色和字体,打造符合品牌风格的网站。
    • 轻松管理表单:集成 MetForm,可快速创建并管理表单,适用于联系表单、客户咨询等功能,提供更好的交互体验。
    • 易于安装与配置:通过 Envato Elements 插件,一键导入模板并配置站点,降低安装和维护的复杂性。

    使用场景

    1. 工业企业网站:对于石油、天然气、制造、机械等行业公司,Petro 提供了适合的企业介绍、产品展示、团队介绍等页面模板,让客户快速了解企业实力。
    2. 工程项目展示:项目和单项服务页面为展示公司完成的项目、工程实例提供了理想布局,适合企业展示各类项目成果,增强客户信任。
    3. 服务业务展示:服务页面及 FAQ 页面帮助公司向客户展示其核心服务,详细介绍业务流程与常见问题,提升客户体验。
    4. 多页面内容结构:适用于需要多页面展示的企业网站,可搭建丰富的内容模块,如公司历史、合作伙伴介绍等,增强企业形象。
    5. B2B 企业网站:适合需要向企业客户展示其产品、解决方案的公司,通过项目展示、服务模块等吸引潜在客户。

    Petro 模板套件不仅适合用于搭建各类工业企业官方网站,也为多领域多用途的商业网站提供了高度灵活的模板选择,帮助企业快速构建具有吸引力和专业形象的网站。