Particles背景为您的Elementor部分添加了动画的浮动形状,这些部分可以移动,连接鼠标移动,并做出反应,它们将静态部分变成引人注目的交互式区域,可以立即吸引注意力。
在本指南中,您将学习如何使用将 Elementor 粒子背景添加到网站上的任何部分 Elementor 的主插件。我们将涵盖基本设置,内置预设(NASA,气泡,雪),以及如何使用particle。js JSON配置创建自己的自定义粒子效果。
5分钟左右即可无需编码,全程约5分钟。
什么是粒子背景?
景(particle background)是一种动画效果,它显示漂浮在一段上的小形状(点、圆圈、星星或自定义形状),这些粒子以不同的速度移动,在彼此靠近时用细线连接,并可以在悬停时对光标做出反应。
效果由以下因素提供支持 粒子。js、流行的 JavaScript 库,大师插件将粒子。js 直接集成到 Elementor 中,因此无需触摸任何代码即可启用和自定义效果。
Master 插件包括四个内置粒子预设:
| 预设 | 效果 | 最好的 |
|---|---|---|
| 默认 | 沿随机方向漂浮的连接点 | 科技网站、SaaS 登陆页面 |
| 美国宇航局 | 具有深度效应的类空间漂浮粒子 | 黑暗英雄部分,太空主题页面 |
| 泡沫 | 较大的圆形气泡向上上升 | 创意作品集,有趣的设计 |
| 雪 | Xiao小的白色颗粒像雪花一样飘落 | 季节性页面,冬季主题部分 |
您还可以通过生成自己的粒子来创建完全自定义的效果。js JSON 配置。
你需要什么
- 文字出版社 与 元素 (免费或专业版)安装
- Elementor 的主插件 已安装并激活
- 的 颗粒 在主插件设置中启用扩展
确保粒子扩展已打开:转到 主插件 → 扩展 在您的 WordPress 仪表板中并切换 颗粒 到ON。
如何在 Elementor 中添加粒子背景:分步
请按照以下步骤将粒子背景添加到页面上的任何 Elementor 部分或容器。
1步:创建或选择一个部分
Elementor编辑器中打开你的页面。创建一个新部分或选择一个现有的你想要添加粒子效果的部分。
选择您喜欢的柱结构。颗粒效应适用于任何布局,无论是单柱、两柱还是更多。
2步:将内容添加到该部分
您的部分需要至少一个内部的小部件才能在预览中可见。如果您正在创建一个独立的粒子部分(如动画英雄区域),请丢弃一个 垫片 widget 进入该部分,并将高度设置为 400-600px。
您还可以添加标题、按钮、图像或任何其他小部件。颗粒将出现在您所有内容的后面。
3步:将部分设置为全宽(可选)
为了获得最佳的视觉冲击力,请将部分布局设置为 全宽.这使得粒子跨越整个浏览器宽度。
单击该部分的编辑图标,转到 布局 选项卡,然后设置 内容宽度 到 全宽.
此步骤是可选的。粒子也可以在盒装宽度部分中工作。
4步:添加背景颜色
此步骤很重要。默认情况下粒子是白色的,因此您需要深色或彩色背景才能使它们可见。
单击该部分的编辑图标,转到 风格 选项卡,并在下面 背景的, 设置纯色或渐变, 深蓝色、黑色、深紫色与默认的白色颗粒效果最佳。
提示: 为了获得更动态的外观,请尝试使用 动画渐变背景扩展 master Addons 而不是纯色。渐变背景与粒子相结合, 创造出令人惊叹的视觉效果。
第 5 步:启用颗粒效应
现在主要部分。选择该部分后,请继续 风格 tab 向下滚动以找到 MA 颗粒 节。切换它 上.
Elementor 默认粒子效果会立刻出现在你的版块中,你会看到小白点飘浮着,用细线连接。
如果默认效果对您的设计来说很好,那么您就完成了。命中 更新 save。但如果要自定义粒子样式,就继续阅读。
如何定制元素粒子效应
Master Addons 让您使用可视化配置器完全自定义粒子,您可以更改粒子的数量、形状、大小、速度、颜色和移动行为,所有这些都无需编写代码。
1步:打开粒子配置器
在粒子切换下方,您将看到一条消息: “点击此处为以下字段生成 JSON” 单击链接打开 particles。js 视觉配置器。
在配置器的顶部,单击 “默认” 查看内置的四个预设:默认、NASA、泡泡和雪。选择任何预设作为起点,或从默认配置开始。
2步:调整粒子特性
配置器有三个主要部分。重点关注 颗粒 视觉定制部分:
- 號 —控制出现多少粒子,更高的值产生更密集的效果,但使用更多的浏览器资源。
- 颜色 — 设定颗粒颜色 深色背景使用白色,或搭配品牌颜色。
- 形状 —从圆形、边缘(正方形)、三角形、多边形或星形中进行选择。
- 尺寸 — 设定粒度 启用随机大小,外观更自然。
- 不透明度 — 控制颗粒透明度。部分不透明度产生微妙、优雅的效果。
- 线路连接 —启用或禁用附近粒子之间的连接线。
- 运动 — 设定粒子运动的速度和方向。
第 3 步:下载您的配置
Live 预览中粒子的外观感到满意后,滚动到配置器的底部并单击 “下载当前配置(JSON)”.
一个名为的文件 particlesjs-config.json 将下载到您的计算机。
第 4 步:复制 JSON 代码
打开下载的 particlesjs-config.json 器(记事本、VS 代码或 TextEdit)中进行文件。选择所有代码并复制。
JSON不要手动编辑,除非你知道自己在做什么,可视化配置器已经生成了你需要的确切设置。
第 5 步:粘贴到 Elementor 中
返回到您的 Elementor 编辑器。在该部分的 样式→MA颗粒 sets,你会看到一个为粒子 JSON 代码标记的文本区域,粘贴你复制的代码,然后点击 更新.
您的自定义粒子效果现在已实时显示在页面上。预览它以确认一切看起来都正确。
使用粒子背景的创造性方法
Elementor 带粒子的动画背景的一些实际用例如下:
- 英雄部分 —为你的主页英雄添加粒子,让科技前卫、现代感十足。结合标题、潜台词、CTA 按钮。
- 定价部分 —在定价表后面使用微妙的低密度粒子效果,使其从页面的其余部分中脱颖而出。
- 见证区域 — 感言背后的温和雪或泡泡效应增加了视觉趣味,而不会分散内容的注意力。
- 页脚部分 —在您的页脚上添加颗粒,以便在页面底部进行抛光、完成查看。
- 即将推出页面 —粒子在原本静态的单页布局上创建运动,请查看我们的创建指南 元素即将发布.
- 行动呼吁部分 —通过将 CTA 放置在带有动画粒子的部分来引起人们对 CTA 的关注。
颗粒的性能提示
JavaScript 的访问者的浏览器上运行粒子效应。要保持网站速度快:
- 限制粒子数量。 40-80个粒子通常足以获得良好的视觉效果,超过150可以减慢旧设备的速度。
- 1-2节每页使用颗粒。 Bu要在每个截面加颗粒,效果在过度使用时失去冲击,Jiao加加工开销。
- 在移动设备上进行测试。 Elementor 的响应式可视性设置, 粒子效应可以耗尽手机上的电池, 考虑减少粒子数量或禁用移动端的效果。
- 避免在内容繁重的页面上出现颗粒。 Blog长文和文档页面不需要动画背景, 登陆页面和关键版块保存粒子。
有关更多性能提示,请阅读我们的指南 如何加快 Elementor 网站的速度.
其他元素背景效果
Master Addons 中可用的几个元素背景效果中, 粒子只是其中之一, 查看这些相关的扩展:
所有这些都包含在内 Master Addons 的 80 多个小部件和扩展.
常见问题
Master Addons 中颗粒背景效果是否免费?
Particles 扩展在带有基本预设的 Master Addons 免费版本中可用。Pro 版本为您提供了额外的自定义选项和使用自定义 JSON 配置的能力。检查 定价页面 有关计划详细信息。
颗粒适用于 Elementor 容器吗?
是。主插件的粒子扩展适用于较旧的 Elementor 部分和较新的 Flexbox 容器。从任何容器的样式选项卡中以相同的方式启用它。
粒子会减慢我的网站速度吗?
JavaScript在浏览器中运行的粒子,因此它们在客户端添加了一些处理开销,40-80个粒子,对现代设备的影响最小,避免使用150多个粒子或将效果添加到同一页面的多个部分,粒子。js库轻量级(25KB左右),因此文件大小对页面负载的影响可以忽略不计。
我可以更改颗粒颜色以匹配我的品牌吗?
Yes。js可视化配置器(从扩展设置链接)来改变颗粒颜色,形状,大小,速度,不透明度等,您可以独立设置颗粒和连接线的任何六角颜色值。
如何禁用移动设备上的粒子?
Elementor内置的响应式可视性设置,可以隐藏移动设备上的粒子部分,或者创建一个单独的移动优化部分,无需粒子,这样可以节省手机和平板电脑上的电池和处理能力。
开始向您的 Elementor 网站添加粒子
Master Addons 添加元素器粒子背景只需点击几下即可。从 NASA、Bubble 或 Snow 等内置预设中进行选择,以便快速设置,或者使用粒子。js 配置器创建自己的自定义效果以进行完全控制。
关键是要有策略地使用粒子,挑一两个高影响段,选择深色背景,保持粒子数量合理,就这么把静态页面变成有活力的东西。
准备好尝试一下了吗? 下载 Elementor 的主插件 5分钟内添加你的第一个颗粒背景。
