A wave divider is a moving edge between two sections. It runs the whole time the page is open, so it reads as motion rather than as a static shape.
Wave in the Advanced Separators widget from The Plus Addons for Elementor Pro stacks one or more animated wave layers on the edge of a section.
To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Separators 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 — Advanced Separators is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it renders no separator.
- Widget to enable: Advanced Separators, switched on under The Plus Addons > Widgets.
- Deprecated: the panel shows “The Advanced Separators widget has been deprecated since The Plus Addons for Elementor – Pro 6.5.0. Note that Advanced Separators will be completely removed once The Plus Addons for Elementor – Pro 6.6.0 is released.” No replacement widget is named. Keep that in mind before building new pages around it.
- Where it goes: the separator attaches itself to the container the widget sits in, so drop the widget inside the section or column you want the separator on. Its own place in the layout does not matter.
How to Create an Animated Shape Divider
- Drag the Advanced Separators widget into the section you want the wave on.
- Under Shape Divider, pick the middle picture, Wave.
- Leave Row/Column on Section/Row and choose Bottom or Top under Divider Position.
- Set Shape Height. That is how tall the whole wave strip is, in pixels.
- Open a row in Wave Loop. Each row is one wave layer. Set Shape Color Type to Solid or Gradient and pick the colour or colours.
- Shape the layer with Height, Bones, Amplitude and Speed — see the table below for what each one does.
- Use + Add Item to add another layer. Layers stack in the same strip, so a later row draws over an earlier one.
The Result
Three layers, the last one a gradient, on the bottom edge of a section:
A single blue wave on the top edge of a section:
Wave Loop Settings
| Setting | What it does | Default |
|---|---|---|
| Shape Color Type | Solid fills the layer with one colour; Gradient blends Shape Color into Shape Color 2. | Solid |
| Shape Color | The layer colour, or the first colour of the gradient. | #8072fc |
| Shape Color 2 | The second gradient colour. Only with Gradient. | #6fc784 |
| Gradient X1 / X2 / Y1 / Y2 | Where the gradient starts and ends across the layer, in per cent. Only with Gradient. | 0 / 70 / 0 / 50 |
| Height | Moves the wave line down the strip. Measured at the default Shape Height: 40 put it 94px down, 80 put it 134px down and 160 put it 214px down. It does not change how big the wave is. | 80 |
| Bones | How many curve segments are drawn across the width. Set 1 and the path has one curve; set 12 and it has twelve. | 4 |
| Amplitude | How far the line swings, and so how much movement you see. | 60 |
| Speed | How the animation is timed. Motion peaks near the default — see Limitations. | 0.15 |
How It Behaves
- The wave never stops. Its outline was different on every sample taken 700 milliseconds apart.
- Every Wave Loop row is a separate SVG layer with its own colour and its own movement, all inside the one strip.
- Shape Height resizes the strip and every layer in it: set to 90, the strip and each layer measured 90px tall.
- A gradient row is drawn with a real SVG gradient between Shape Color and Shape Color 2, positioned by the four gradient percentages.
- The strip hangs outside the section edge. Flip Divider mirrors it and moves it inside the section instead.
Limitations
- Speed does not simply mean faster or slower. Measured movement per 320 milliseconds was 2.71 at 0.05, 3.68 at the 0.15 default and 0.42 at 1.5. The value is used both as the animation rate and as the length of each animation step, so motion peaks around the default and very high values look sluggish. Change it in small steps and watch the result.
- Shape Height is only available for Wave with Section/Row. A vertical wave has a fixed 110px thickness.
- A vertical wave is hidden on screens 767px wide and narrower, with no setting to change that.
- The animation runs continuously and is not paused when the section is off screen, and there is no reduced-motion option in the widget.
- The widget is deprecated since The Plus Addons for Elementor Pro 6.5.0 and will be removed once 6.6.0 is released.
- It is Pro only. With the Pro plugin off no wave is rendered at all.
Troubleshooting
The wave is not moving
Check the page on the front end rather than in the editor, and make sure Amplitude is not near zero — at 10 the line moved only about 7 pixels, which is hard to see.
All the layers look like one colour
Open each Wave Loop row and set its own Shape Color. The row title in the panel shows the colour value, so you can tell the rows apart at a glance.
Raising Speed made the wave slower
That is expected above the default. Bring Speed back towards 0.15 and adjust in small steps.
The wave is cut off
The strip hangs outside the section, so a container with Overflow set to Hidden hides it completely. Set that overflow back to default, or turn Flip Divider on.
