平坦的背景颜色完成其工作并消失。颜色之间缓慢漂移的梯度使同一部分在不添加单个图像的情况下感到充满活力。 动画渐变 BG 扩展 在 硕士插件专业版 将这种效果添加到任何容器、部分或列中:选择颜色、设置角度和速度,然后背景自行循环穿过它们。
Live页面上运行的效果, 在内容保持原位的情况下, 该部分通过其颜色集进行转换:
动画渐变 BG 扩展的作用 #
启用后,容器、部分和列将获得一个 动画梯度背景 他们的面板 风格 tab, 正下方正常的背景部分。你加载它两个或更多颜色, 并且扩展渲染一个渐变, 在它们之间以循环方式动画。角度, 总循环时间和宽松度是你设置的。
一个小脚本在内容后面添加了一个渐变层,并用 CSS 将其动画化,因此没有视频要托管或图像要压缩,并且顶部的文本保持可选择性。
在开始之前 #
如何启用动画渐变 BG 扩展 #
从您的 WordPress 仪表板,转到 主插件 并打开 扩展 tab。动画渐变bg坐在 动画小部件 group,在粒子和背景滑块旁边。点击它的切换,它会变成紫色,然后点击 保存更改 并等待绿色“设置保存成功”通知。
在一个部分上设置梯度 #
在 Elementor 编辑器中选择容器或部分并打开 风格 选项卡。 动画梯度背景 带有紫色 MA 徽章的部分位于背景下方。翻转 启用动画梯度 到是,并且控制显示在画布实时预览效果时。
- 动画效果: 色彩运动的轻松,演示中的轻松。
- 角度: 渐变方向,演示中的 -45,用于对角扫描。
- 动画总持续时间(秒): 梯度漂移和回来的时间。演示使用 6 秒。
- 过渡平滑度(秒): 3的默认的面板中显示,但在当前版本中它不会改变动画,使用时长和动画效果来调整手感,而不是。
- 颜色: 保持梯度的中继器停止。点击 添加项目 对于另一种颜色,或 X 掉落一种。
选择颜色 #
Color list 中每一行都打开一个标准拾取器,演示从一个青色、紫色、橙色集合开始,然后交换停止进出:移除一个并收紧循环,添加一个深蓝色(#3D6CD6),循环立即拾取实时预览,使这成为有趣的部分;你看着部分的情绪随着你触摸的每一站而变化。
相同温度范围内的两种或三种颜色读取为优雅 全轮上的五种颜色读取为屏幕保护程序 开始小。
页面上的结果 #
Publish,并观看该部分通过其颜色呼吸,如本页顶部的GIF。整个周期将您设置的任何内容作为持续时间,然后循环。按钮、标题和图像不受影响地坐在顶部。
一个实用说明:深色文本在浅色渐变停止时保持可读性,但在饱和渐变停止时可以消失。根据集合中的每种颜色检查标题,而不仅仅是第一帧。
动画梯度工作良好的地方 #
- 英雄部分。 移动到折叠上方,没有厚重的背景视频。
- 行动号召乐队。 移动的背景将眼睛拉向骑在其上的按钮。
- 即将推出并登陆页面。 全屏渐变本身就带有稀疏的页面。
- 投资组合和代理网站。 品牌颜色循环通过标头,无需支付库存视频费用。
- 定价部分。 突出显示的计划背后的微妙梯度将其与其他计划分开。
视频教程 #
观看从头开始构建的梯度,从启用扩展到完成的移动背景。
常见问题 #
如何在 Elementor 中添加动画渐变背景?
Master Addons Extensions标签页中启用动画渐变BG扩展,选择容器、部分或列,打开样式标签页,在动画渐变背景面板中打开启用动画渐变,添加两种或两种以上颜色,背景立即开始循环。
梯度可以使用多少种颜色?
Color 中继器中添加的颜色就多,每次 Add Item 点击都会创建另一个渐变停止,动画会在您设置的总持续时间内循环遍历所有颜色,两到四种颜色涵盖了大多数设计。
我可以控制梯度动画的速度吗?
是。总动画时长设置一个完整周期需要多少秒,从1到20,动画效果设置宽松。过渡平滑度滑块不影响当前版本中的动画。
动画渐变会减慢我的页面速度吗?
效(effect)是由小脚本而不是影片或影像档所架设的CSS动画,因此下载的额外内容很少,是英雄区较轻的运动方式之一。
动画渐变 BG 扩展名免费吗?
No。动画渐变BG是大师插件中的Pro扩展,元素器有免费的渐变背景类型,但那个渐变不动。
包裹起来 #
的 动画渐变 BG 扩展 将剖面背景变成缓慢移动的颜色:颜色列表、角度、持续时间和宽松。保持调色板紧密,检查与每一站的文本对比度,并且剖面承载零资产权重的运动。它与 入口动画扩展 对于在移动背景下到达的内容,免费 渐变标题 小部件涵盖渐变文本和全套 主插件小部件和扩展 距离一页之遥。
