Animated waves and Animated particles are decorative bands. Waves make a soft moving edge between two sections. Particles fill a band with slowly drifting shapes, like snow or bubbles.
Add one
In the builder, open the Sections tab, click Add new section, and pick Animated waves or Animated particles in the Decoration group. Drag the band between the two sections you want to separate. You can add up to 5 of each per page, on any page.
Animated waves
Waves
- Style: Gentle, Calm, Choppy, Peaks, Zigzag, or Blob.
- Height: from 40 to 300 pixels.
- Layers: 1 to 4 waves on top of each other. More layers give more depth.
- Speed: Slow, Normal, or Fast.
Layout
- Merge with header: removes the band background so it reads as part of the header above it. Place the band right under the header for a wavy header edge.
- Flip vertically: turns the waves upside down, so they blend into the section above instead of the one below.
- Direction: Left or Right, the way the waves move.
- Overlap: from 0 to 120 pixels. Pulls the band onto the next section to hide any visible line between them.
- Width: Full (default) or Page.
Animated particles
- Shape: Dot, Bubble, Star, or Snow.
- Count: from 5 to 40 particles. Size: the largest particle, from 2 to 40 pixels. Others are smaller.
- Speed: Slow, Normal, or Fast. Direction: Up (rising, like bubbles) or Down (falling, like snow).
- Opacity: from 10% to 100%. Lower values keep the effect soft behind your content.
- Height of the band, from 40 to 600 pixels, and Width (Full or Page).
Colors
Both bands take their colors from the Color scheme you pick. The waves use the scheme's Background color, and the space behind them uses its Inner background color. Particles are the other way around: the particles use the Inner background color, and the space behind them uses the Background color. For a clean join, match those two colors to the sections above and below the band. Schemes are edited in Color schemes. Both also have Padding (up to 200 pixels on each side).
Recipes
- Winter look: Animated particles with Shape Snow, Direction Down, and a low opacity, placed under the hero.
- Wavy header: Animated waves right under the header, with Merge with header on and the same color scheme as the header.
Good to know
- A line shows between the waves and the next section: raise Overlap, or check the scheme colors match.
- Motion: shoppers who turned on reduced motion on their device see the waves and particles still.
- No text inside: waves and particles hold no text or buttons. To show a message, add a Text section next to the band.
- Keep it light: one or two bands per page keep the focus on your products.