---
title: "How to Create Animated Shape Divider in Elementor?"
url: https://theplusaddons.com/docs/create-animated-shape-divider-in-elementor/
date: 2024-05-21
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "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...."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Create-Animated-Shape-Divider-in-Elementor_-1024x536.jpg
word_count: 946
---

# How to Create Animated Shape Divider in Elementor?

## 

- Advanced Separators en The Plus Addons for Elementor Pro crea un divisor de onda animado que se mueve sin parar y puede apilar una o más capas dentro de una sola franja.
- Wave Loop permite definir cada capa con Shape Color Type, Shape Color, Shape Color 2, Height, Bones, Amplitude y Speed, y una fila posterior se dibuja sobre una anterior.
- Shape Height cambia la altura de la franja y de todas las capas, mientras que Flip Divider invierte la onda y la mueve dentro de la sección en lugar de dejarla fuera del borde.
- The Plus Addons for Elementor Pro 6.5.0 marca Advanced Separators como obsoleto y el widget se elimina cuando se lanza The Plus Addons for Elementor Pro 6.6.0; con el plugin Pro desactivado no se renderiza ninguna onda.

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](https://theplusaddons.com/docs/add-separators-in-elementor/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/advanced-separators/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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.

![Shape Height set to 140 in the Advanced Separators panel, with the wave strip on the section edge](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-wave-height.webp)

- 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 Color Type and Shape Color inside an open Wave Loop row](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-wave-color.webp)

- 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.

![Bones, Amplitude and Speed inside an open Wave Loop row of the Advanced Separators widget](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-waveloop.webp)

## The Result

Three layers, the last one a gradient, on the bottom edge of a section:

![Three stacked wave layers, purple and an orange-to-yellow gradient, on the bottom edge of a two-column section](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-result-wave.webp)

A single blue wave on the top edge of a section:

![Marketing demo of a blue wave separator running across the top edge of a section](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-separators-wave-demo.gif)

## 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.

## Related Docs

- [Advanced Separators widget overview](https://theplusaddons.com/docs/add-separators-in-elementor/)- [Add a shape divider in Elementor](https://theplusaddons.com/docs/add-shape-divider-in-elementor/)- [Add a horizontal shape divider in Elementor](https://theplusaddons.com/docs/add-a-horizontal-shape-divider-in-elementor/)- [Add a vertical shape divider in Elementor](https://theplusaddons.com/docs/add-a-vertical-shape-divider-in-elementor/)

## Frequently Asked Questions

**Q: Why isn’t the animated wave moving on my page?**
A: The first thing to check is the front end, not the Elementor editor, because the wave runs continuously on the live page. If it still looks static, Amplitude may be too close to zero. The page notes that at 10 the line moved only about 7 pixels, which is easy to miss. In The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH this effect comes from the Advanced Separators widget, so tiny motion settings can look broken when they are just too subtle.

**Q: How do I stop all the wave layers from looking like one colour?**
A: Each Wave Loop row has its own Shape Color, so identical-looking layers usually mean every row was left on the same colour. Open each row and give it a different Shape Color if you want the layers to stand out. The panel title also shows the colour value, which makes it easier to tell rows apart quickly. That matters because every row is a separate SVG layer inside the same strip, not one shared shape.

**Q: Why does increasing Speed make the wave look slower?**
A: That happens because Speed is not a simple faster-or-slower slider. The page says motion peaks around the default 0.15, and very high values can look sluggish because the setting controls both animation rate and animation step length. Measured movement per 320 milliseconds was 2.71 at 0.05, 3.68 at 0.15, and only 0.42 at 1.5. Small adjustments around 0.15 work better than jumping straight to a high value.

**Q: Why is my animated wave cut off by the section?**
A: The strip hangs outside the section edge by design, so any container with Overflow set to Hidden will clip it completely. That is why a wave can disappear even when the widget is working correctly. Setting overflow back to default fixes that clipping behavior, and Flip Divider is another option because it mirrors the strip and moves it inside the section instead of outside it.

**Q: Can I use an animated shape divider on a vertical section?**
A: The Advanced Separators widget supports vertical waves, but they behave differently from section or row waves. A vertical wave has a fixed 110px thickness, Shape Height is only available for Wave with Section/Row, and vertical waves are hidden on screens 767px wide and narrower with no setting to change that. In practice, that makes vertical waves more limited than horizontal ones in The Plus Addons for Elementor Pro.

**Q: What should I know before building a new page with this widget?**
A: Advanced Separators is Pro only in The Plus Addons for Elementor Pro, and the widget has been deprecated since Pro 6.5.0 with removal planned for 6.6.0. It attaches to the container it sits in, so place it inside the section or column you want affected rather than treating it like a standalone element. That setup matters because its position in the layout does not control where the separator appears.