A flat colour block is the cheapest background there is, and the dullest. Moving slowly between a few related colours keeps the cost and loses the dullness.
The Container block can cycle its background through a list of colours you choose.
Before You Start
- Edition: Pro — animated colour backgrounds needs Nexter Blocks Pro.
- Block to enable: Container, switched on under Nexter > Blocks in your WordPress dashboard.
- A Container block with content inside — see the Container block guide.
Steps
- Select your Container and set its background type to the animated colour option.
- Add the colours it should move between, one entry per colour.
- Set the duration of the cycle.
- Check your text is readable against every colour in the list, then publish.
How It Behaves
The colour list is handed to the page as data, and the block’s script animates between the entries.
- The background option comes first. Measured: the individual effect settings do nothing on their own — the container only renders an effect once the background type that owns it is chosen.
- Measured on a published page with two colours set: the container rendered
row-animat-bgwith the colours in adata-bgattribute, alongside the duration. - Every colour in the list is used in order, then it starts again.
- Text stays put while the background changes, which is the catch — the contrast has to hold for all of them, not just the first.
- Measured with Nexter Blocks Pro deactivated: this effect disappears completely and the container renders as a plain section, with nothing on the page to say why.
Limitations
- Pro only — measured with Nexter Blocks Pro deactivated, the container renders with no animated background at all.
- Readability is the real constraint. White text over a list that includes a pale colour will be unreadable for part of every cycle.
- Keep the colours close together. A jump from dark blue to bright yellow is distracting rather than pleasant.
- It never stops. Movement behind content is tiring over a long page — use it on one section, not throughout.
- For a smoother look, use a gradient instead — see the animated gradient guide.
Troubleshooting
The background does not change
Check the animated colour background type is selected, not just the colour list filled in — measured, the colours alone render nothing. Then check Nexter Blocks Pro is active.
My text disappears part way through
One of the colours is too close to the text colour. Either change that colour or put the text on a panel of its own.
The change is too fast
Increase the duration. A background transition should be slow enough that nobody watches it.
Only one colour shows
There is only one entry in the list. Add at least two for anything to animate between.
