动画梯度背景

平坦的背景颜色完成其工作并消失。颜色之间缓慢漂移的梯度使同一部分在不添加单个图像的情况下感到充满活力。 动画渐变 BG 扩展于 Elementor 的主插件 将这种效果添加到任何部分或容器中:选择颜色、设置角度和速度,然后背景自行循环穿过它们。

Live页面上运行的效果, 在内容保持原位的情况下, 该部分通过其颜色集进行转换:

动画渐变 BG 扩展的作用 #

启用后,容器和部分将获得一个 动画梯度背景 他们的面板 风格 tab, 正好在正常的背景部分下方。你用两种或两种以上的颜色加载它, 扩展渲染了一个渐变, 在它们之间循环动画。角度, 总循环时间, 每个过渡的平滑度都是你设置的。

CSS 中运行元素本身的所有内容,因此没有视频要托管或图像要压缩,并且顶部的文本保持可选和可读。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?关注 安装指南 首先。
• Animated Gradient BG 是免费扩展,因此不需要 Pro 许可证。

如何启用动画渐变 BG 扩展 #

从您的 WordPress 仪表板,转到 主插件 并打开 扩展 tab。动画渐变bg坐在 动画小部件 group,在粒子和背景滑块旁边。点击它的切换,它会变成紫色,然后点击 保存更改 并等待绿色“设置保存成功”通知。

在一个部分上设置梯度 #

在 Elementor 编辑器中选择容器或部分并打开 风格 选项卡。 动画梯度背景 带有紫色 MA 徽章的部分位于背景下方。翻转 启用动画梯度 到是,并且控制显示在画布实时预览效果时。

• 动画效果: 色彩运动的轻松,演示中的轻松。
• 角度: 渐变方向,演示中的 -45,用于对角扫描。
• 动画总持续时间(秒): 1次完整旅行,穿透你所有的颜色。演示使用6秒。
• 过渡平滑度(秒): demo 中一种颜色如何轻轻地移到下一种,3 秒。面板提示说它直:更高的值在颜色之间创建更平滑的过渡。
• 颜色: 保持梯度的中继器停止。点击 添加项目 对于另一种颜色,或 X 掉落一种。

选择颜色 #

Color list 中每一行都打开一个标准拾取器,演示从一个青色、紫色、橙色集合开始,然后交换停止进出:移除一个并收紧循环,添加一个深蓝色(#3D6CD6),循环立即拾取实时预览,使这成为有趣的部分;你看着部分的情绪随着你触摸的每一站而变化。

相同温度范围内的两种或三种颜色读取为优雅 全轮上的五种颜色读取为屏幕保护程序 开始小。

页面上的结果 #

Publish,并观看该部分通过其颜色呼吸,如本页顶部的GIF。整个周期将您设置的任何内容作为持续时间,然后循环。按钮、标题和图像不受影响地坐在顶部。

一个实用说明:深色文本在浅色渐变停止时保持可读性,但在饱和渐变停止时可以消失。根据集合中的每种颜色检查标题,而不仅仅是第一帧。

动画梯度工作良好的地方 #

• 英雄部分。 移动到折叠上方,没有厚重的背景视频。
• 行动号召乐队。 移动的背景将眼睛拉向骑在其上的按钮。
• 即将推出并登陆页面。 全屏渐变本身就带有稀疏的页面。
• 投资组合和代理网站。 品牌颜色循环通过标头,无需支付库存视频费用。
• 定价部分。 突出显示的计划背后的微妙梯度将其与其他计划分开。

视频教程 #

观看从头开始构建的梯度,从启用扩展到完成的移动背景。

常见问题 #

包裹起来 #

Animated Gradient BG 扩展将一个截面背景变成了缓慢移动的颜色:一个颜色列表、一个角度和两个定时滑块,保持调色板紧密,检查文本与每个停止的对比度,并且该截面携带零资产权重的运动,它与 入口动画扩展 适用于在移动背景和全套背景中到达的内容 主插件小部件和扩展 距离一页之遥。