A background that slowly shifts between colours draws the eye to a section without any extra content.
The Row Background widget from The Plus Addons for Elementor can fade the background of a container through a list of colours, over and over.
To check the complete feature overview documentation of The Plus Addons for Elementor Row Background widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Row Background widget is only available in The Plus Addons for Elementor Pro.
- Widget to enable: Row Background, switched on under The Plus Addons > Widgets.
- Where to put it: drop the widget inside the container (or classic section) that should get the background. It draws nothing of its own; the background fills that container.
Steps
- Add the Row Background widget to the container and open Content > Deep Layer.
- Set Select Option to Animated Background Color.
- In Select Multiple Colors, open each item and pick its Color. There are three items to start with; use + Add Item for more.
- Enter the Animation Duration in milliseconds (default 3000).
How It Behaves
- The background starts with the first colour and fades to the next one, then the next, and starts again after the last colour.
- Animation Duration sets how often the change to the next colour starts. The fade itself always takes about three seconds, so with values below 3000 the colours keep blending without ever resting on one colour (tested with 2000).
- The Select Image field inside each item is not used by this option. It belongs to On Scroll Background Animation.
Limitations
- The fade length cannot be changed; only the time between colour changes can.
- The colours change as a flat fill. For a moving multi-colour gradient, use Gradient Animate Color.
Troubleshooting
The background never shows a pure colour
Set Animation Duration higher than 3000, for example 5000, so each colour has time to finish fading in.
