GreenShift教程-古腾堡动画和页面构建器块

简介

GreenShift是一款功能强大的 WordPress 插件,专为 Gutenberg(古腾堡)编辑器设计。让我们在不牺牲网站性能的前提下,创建高质量的页面排版和动画效果。

  • 页面构建器块:包括高级容器、响应式设计、标签页(Tabs)、手风琴(Accordions)、轮播滑块(Sliders)、图像热点(HotSpot Block)等等。
  • 动画功能:内置高级动画框架,支持滚动动画、悬停效果、自定义动画、渐变背景等交互动画功能。
  • 性能优化:插件采用“按需加载”系统,只加载页面上实际使用的资产(CSS/JS),避免预定义框架、图标字体或脚本库的加载。
  • ……

它的功能还非常多,我们就通过下面的系列教程一点点学习如何使用吧!

第1节 插件的安装和调用

登录WordPress后台,添加插件,搜索Greenshift,找到对应插件,安装并启用。

greenshift

插件安装完成之后,当我们再次编辑页面或者文章的时候,就可以直接添加Greenshift的元素。

greenshift ys

第2节 Greenshift的页面布局元素

第3节 内容区块

和Stackable一样,Greenshift作为区块扩展插件,提供了很多的元素,比如文本,标题,倒计时,内容折叠,触发器弹窗,3D显示,以及一些图片,预设动画效果等等。

image 3
image 4
image 5

我们都可以直接通过左边的元素区域拖拽过来使用,选中对应的元素就可以在右边对他的参数做修改和调整,非常方便。

image 6

如果你学过了之前建站的基础教程,使用起来应该页很容易。

第4节 动画效果

值得一提的是Greenshift的元素在免费版本的情况下也是支持动画功能的。

选择对应元素,然后在右边的编辑区域有个Advanced,下面就可以添加动画类型和效果。比如,页面向下滑动时,元素复出之类。

image 7

除此之外,CSS变换和过度允许我们设置默认情况下的状态,以及鼠标悬浮在上面时的状态。这些功能看起来会比较炫酷一点。

第5节 预设的一些动画和触发元素

除了一些需要我们自己设置的动画之外,Greenshift还有一些预设的动态元素我们可以选择。

比如:Flipbox 3d Container

GIF 2025 9 5 20 13 50

Text with Popup Trigger

2

当然还有一些其他的元素,比如按钮触发器之类的大家可以自己了解一下。

总结

这款扩展插件在使用和效果上还是非常不错的,建议大家可以自己尝试一下,对于一些动画和互动功能都是可以轻松完成的。

© 文章版权归白小菌所有,🫰欢迎转发分享。未经允许请勿抄袭转载。

订阅评论
提醒
guest
0 评论
最新
最旧 最多投票
内联反馈
查看所有评论

AI 小菌
现代响应式侧边栏
快捷菜单