如何给WordPress网站的元素添加动画效果插件

WordPress 的古腾堡(Gutenberg)编辑器默认不直接支持块级动画(如淡入、滑动或缩放效果),但可以通过安装插件轻松实现。这些插件通常在 Gutenberg 的块设置侧边栏中添加动画选项,支持 CSS 或 JavaScript 驱动的动画,且兼容滚动触发(例如,当用户滚动到块时动画启动)。

插件一:Blocks Animation

使用 CSS 添加淡入、翻转、缩放等动画,支持所有 Gutenberg 块。轻量级,无需 JS 库。

  1. 在 WordPress 后台进入“插件 > 添加新插件”。
  2. 搜索“Blocks Animation”。
  3. 安装并激活。
WordPress添加动画插件,Blocks Animation安装

然后当我们再次编辑页面时,选中元素,右边的区块下就多出了一个Animation的选项,你可以在这里设置动画。

WordPress添加动画插件如何使用和参数设置

插件二 Block Editor Animations

支持入口动画、滚动触发,免费版适用于基本块(如标题、段落),Pro 版扩展更多。

安装方法参考上面的步骤即可。

WordPress网站动画设计工具-Block Editor Animations插件

使用方法也是一样,当我们再次编辑页面元素的时候,在右边有一个Animation的修改选项,可以设置动画的类型和速度等。

Block Editor Animations插件使用方法和参数设置

其他插件

  • Animations for Blocks(也较为推荐)
  • Greenshift-这也是一款古腾堡编辑器的扩展,本身也自带动画功能。

这类的插件挺多的,使用方法大差不差,大家可以自己选择。

白小菌
白小菌

嗨,我是白小菌,一个热爱学习并分享的博主。喜欢把复杂内容拆解成简单易懂的步骤,与大家一起学习成长。 在这里,你会看到我分享的外贸,跨境电商,Wordpress建站,SEO、有用的工具技巧等。 如果你有任何疑问或想法,可以在博客任意文章下方留言。如果有更复杂的需求,也可以选择付费咨询,我会尽我所能帮你解决问题。

文章: 452

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注