是否厌倦了网页上千篇一律的默认鼠标指针?使用 WordPress 的 Nexter Blocks 插件,可以轻松为网站添加独一无二的自定义鼠标光标,比如一只可爱的恐龙,或者炫酷的圆圈跟随效果,提升用户互动体验,增强品牌识别度。本文将手把手教你们如何实现这些效果。
Nexter Blocks 插件
Nexter Blocks 是一款由 POSIMYTH Innovations 公司开发的插件,专为 WordPress Gutenberg 编辑器打造的高级扩展插件,提供丰富的交互式区块和页面构建功能,帮助用户零代码创建专业级网站。它不仅扩展了编辑器的功能边界,还赋予每个页面更多创意表现的可能。通过内置的动画效果、响应式控制和条件显示逻辑,用户可以轻松实现各种视觉与交互设计。
主要特点包括:
- 🎯 高级区块组件:如自定义鼠标指针、弹窗、进度条、图片对比、登录表单等
- ⚙️ 响应式显示控制:支持按设备、用户状态、角色等条件展示内容
- 🖌️ 高度样式自定义:每个区块都支持颜色、排版、动画等样式设置
免费版 vs 专业版(Pro)
| 功能 | 免费版 | 专业版 |
|---|---|---|
| 基础 UI 区块(按钮、图片、卡片等) | ✅ | ✅ |
| 鼠标样式区块、弹窗区块、登录注册表单 | ❌ | ✅ |
| 条件逻辑显示、动画控制、进度条等 | ❌ | ✅ |
| 自定义 CSS/JS 插入 | ✅ | ✅ |
| 设备级别控制(显示/隐藏) | ❌ | ✅ |
| 专属支持服务 & 新区块持续更新 | ❌ | ✅ |
![图片[1]-WordPress教程:用Nexter Blocks为你的网站添加个性化鼠标指针](https://www.361sale.com/wp-content/uploads/2025/04/20250416170216373-image.png)
操作步骤
步骤一:安装并激活 Nexter Blocks 插件
在开始之前,请确保已启用 WordPress 区块编辑器(Gutenberg),并完成 Nexter Blocks 插件的安装和激活。
- 登录 WordPress 后台
- 依次点击 插件 > 安装插件
- 搜索“Nexter Blocks”
- 点击 安装,然后点击 启用
![图片[2]-WordPress教程:用Nexter Blocks为你的网站添加个性化鼠标指针](https://www.361sale.com/wp-content/uploads/2025/04/20250416161454482-image.png)
步骤二:启用鼠标指针区块功能
- 打开 WordPress 后台的 Nexter Blocks > Blocks
- 搜索“Mouse Cursor”模块
- 启用开关,点击“保存设置”
![图片[3]-WordPress教程:用Nexter Blocks为你的网站添加个性化鼠标指针](https://www.361sale.com/wp-content/uploads/2025/04/20250416163502393-image.png)
现在,可以在任何页面中使用这个区块了。
步骤三:将鼠标指针区块添加到页面中
- 进入 WordPress 页面编辑器(新建页面或编辑现有页面)
- 点击页面左上角的“+”号添加区块
- 搜索“Mouse Cursor”并选择 Nexter Mouse Cursor Block
![图片[4]-WordPress教程:用Nexter Blocks为你的网站添加个性化鼠标指针](https://www.361sale.com/wp-content/uploads/2025/04/20250416163611877-image.png)
步骤四:自定义你的专属鼠标光标效果
添加完区块后,将看到多个选项来设置不同类型的自定义指针:
![图片[5]-WordPress教程:用Nexter Blocks为你的网站添加个性化鼠标指针](https://www.361sale.com/wp-content/uploads/2025/04/20250416163710671-image.png)
1. 光标图标(Cursor Icon)
- 可以选择预设光标类型,如
alias、auto、cell等
![图片[6]-WordPress教程:用Nexter Blocks为你的网站添加个性化鼠标指针](https://www.361sale.com/wp-content/uploads/2025/04/20250416163833661-image.png)
- 也可上传自定义图片作为鼠标光标,如小恐龙或星星表情
![图片[7]-WordPress教程:用Nexter Blocks为你的网站添加个性化鼠标指针](https://www.361sale.com/wp-content/uploads/2025/04/20250416163932659-image.png)
2. 跟随图像(Follow Image)
- 上传一张图片,它将跟随用户的光标移动
![图片[8]-WordPress教程:用Nexter Blocks为你的网站添加个性化鼠标指针](https://www.361sale.com/wp-content/uploads/2025/04/20250416164201804-image.png)
- 可调整图像大小、透明度和定位偏移
![图片[9]-WordPress教程:用Nexter Blocks为你的网站添加个性化鼠标指针](https://www.361sale.com/wp-content/uploads/2025/04/20250416164234557-image.png)
3. 跟随文字(Follow Text)
- 设置一段文字,如“I’m a dinosaur”
![图片[10]-WordPress教程:用Nexter Blocks为你的网站添加个性化鼠标指针](https://www.361sale.com/wp-content/uploads/2025/04/20250416164322503-image.png)
- 调整字体大小、颜色与阴影,使文字在光标处浮动显示
![图片[11]-WordPress教程:用Nexter Blocks为你的网站添加个性化鼠标指针](https://www.361sale.com/wp-content/uploads/2025/04/20250416164353496-image.png)
4. 跟随圆圈(Follow Circle)
- 设置一个圆形跟随光标
- 可设置边框、大小、Z-index,并添加悬停特效
![图片[12]-WordPress教程:用Nexter Blocks为你的网站添加个性化鼠标指针](https://www.361sale.com/wp-content/uploads/2025/04/20250416164905328-image.png)
5. 进度样式(Progress Style)
- 通过双层圆圈指示页面滚动进度
- 可分别设置内圈、外圈大小、颜色与透明度
![图片[13]-WordPress教程:用Nexter Blocks为你的网站添加个性化鼠标指针](https://www.361sale.com/wp-content/uploads/2025/04/20250416164943175-image.png)
限定区域自定义效果
如果希望光标特效仅在某个特定区块或文字区域触发:
- 将鼠标光标区块放在该区块的后面
- 设置“显示位置”为“Block”
- 设置特定效果类型并预览
![图片[14]-WordPress教程:用Nexter Blocks为你的网站添加个性化鼠标指针](https://www.361sale.com/wp-content/uploads/2025/04/20250416165119871-image.png)
拓展建议
总结
Nexter Blocks 的 Mouse Cursor 模块为 WordPress 用户提供了简单却强大的自定义体验。从图像、文字、圆圈到页面滚动进度条,丰富的样式让你的网站从细节中脱颖而出。无需编程,只需简单设置,立即拥有个性化的互动效果。。如果想了解更多WordPress相关的教程和资讯,请关注光子波动网,拥有最全的WordPress教程和最活跃的WordPress交流社区。
| 联系我们 | |
|---|---|
| 教程看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
客服微信
|
| ① 电话:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| ③ 邮件:info@361sale.com | |
| ④ 工作时间:周一至周五,9:30-18:30,节假日休息 | |























![表情[wozuimei]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

暂无评论内容