Elementor Animated Wave Divider (MoxKit Waves)
Updated · MoxKit 1.4.4 · Download free on WordPress.org
MoxKit Waves adds an Elementor animated wave divider to the top, bottom or both edges of a Container or Section. The waves are drawn so they repeat exactly, so the loop never jumps.
- Extension MoxKit Waves
- Where Container or Section > Style > MoxKit Waves
- Switch MoxKit > Extensions
- Price Free
Table of contents
What does MoxKit Waves do?
Choose from six styles, stack up to three layers with their own colors and opacity, and pick flowing, rising-and-falling or liquid motion. Waves pause when they are off screen and stay behind the content unless you bring them to the front.
MoxKit Waves is an extension: it adds settings to Elementor's own elements instead of adding a new widget. Turn it on or off for the whole site under MoxKit > Extensions.
Features
- Six styles: ocean, layered, gentle curve, liquid blob, small ripples, big tide.
- Position: bottom, top or both.
- Up to three layers, each with color and opacity.
- Motion: flow with rise and fall, flow, morph (liquid) or static; direction and cycle duration.
- Waves across, area height (per device) and an option to show the waves above the content.
- Pauses off screen; respects reduced motion.
How to use the Elementor animated wave divider
- Enable MoxKit Waves under MoxKit > Extensions.
- Select a Container or Section and open Style > MoxKit Waves.
- Turn on Enable waves, pick a style and the position.
- Set the wave colors to match the next section's background.
- Click Update to save the page.
MoxKit Waves settings
All settings live in Container or Section > Style > MoxKit Waves.
| Setting | Type | Options and notes |
|---|---|---|
| Enable waves | Toggle | Seamless animated waves drawn by MoxKit. Separate from the Shape Divider above. On / Off |
| Position | Select | Bottom, Top, Top and bottom (default: Bottom) |
| Wave style | Select | Ocean waves, Layered waves, Gentle curve, Liquid blob, Small ripples, Big tide (default: Ocean waves) |
| Layers | Slider | |
| Motion | Select | Flow + rise and fall, Flow sideways, Liquid (waves change shape), Still (default: Flow + rise and fall) |
| Direction | Choice | To the left, To the right (default: To the left) |
| Cycle duration (s) | Slider | Lower is faster. Each layer moves at its own pace around this value. |
| Waves across | Slider | Empty = the style’s own number of waves. |
| Area height per device | Slider | |
| Above the content | Toggle | On / Off |
| Color | Color | Usually the background of the section next to this one. |
| Opacity | Slider | Empty = the style’s own value. |
The six wave styles
Ocean is a classic double wave. Layered stacks gentle waves with depth. Gentle curve is a single soft arc for calm designs. Liquid blob uses rounded, organic shapes. Small ripples are short and frequent for a subtle edge, and Big tide is a tall, slow swell for hero sections. Every style can use one to three layers.
Motion and performance
Flow with rise and fall moves the waves sideways while they breathe up and down; Flow only slides; Morph changes the shape like liquid; Static draws still waves. The animation pauses automatically while the section is off screen, and visitors who prefer reduced motion see still waves.
Tips
- Use the next section's background color for the front layer to make the transition seamless.
- Give the Container enough bottom padding so the waves do not cover text.
Summary
The Elementor animated wave divider comes free with MoxKit Addons for Elementor. Switch it on under MoxKit > Extensions, open Container or Section > Style > MoxKit Waves and pick the options described above. It works with the free version of Elementor.
MoxKit Waves FAQ
Can I use it with old Sections?
Yes. MoxKit Waves works on Containers and on classic Sections.
Will the waves cover my content?
No. They stay behind the content unless you turn on Above the content.