How to Create Animated Shape Divider in Elementor?

Updated onApril 9, 2026By

Key Takeaways

  • The Plus Addons for Elementor includes the Advanced Separators widget for adding animated section dividers.
  • Users can select Wave from the Shape Divider section to create a horizontal or vertical shape divider.
  • The Amplitude section allows users to set wave movement, with higher numbers resulting in greater movement.
Table Of Content

Do you want to create an animated shape divider in Elementor? These animated shape dividers can help break up sections of your page, add a sense of movement and dynamism, and create a more engaging and interactive user experience.

With the Advanced Separators widget from The Plus Addons for Elementor, you can easily add animated section dividers in Elementor.

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, make sure its installed & activated to enjoy all its powers.

LIVE WIDGET LINK

To do this, add the Advanced Separators widget to a container or section and follow the steps –

1. Select Wave from the Shape Divider section.

Advanced separators wave new1 how to create animated shape divider in elementor? From the plus addons for elementor

2. Then from the Row/Column dropdown, you can select where to add the shape divider. Here you’ll find two options – 

  • Section/Row – With this option, you can add a horizontal shape divider to a section.
  • Column – With this option, you can add a vertical shape divider to a column.

Let’s select Section/Row here.

3. Then select the appropriate position of the shape divider from the Divider Position section.

From the Flip Divider toggle, you can flip the shape divider.

4. After that set an appropriate height for the shape divider from the Shape Height section.

5. Then from the Wave Loop section, you can add multiple animated wave shapes. By default, you’ll find two items here, open one item.

From the Shape Color Type section, you can add a solid or gradient color to the shape.

Then from the Height section, you can set the wave animation height. The higher the height the lower will be the animation wave height.

Note: This height will correspond to the height set in the Shape Height section.

In the Bones section, you can set the number of wave curves in the animation.

Then from the Amplitude section, you can set wave movement. The higher the number the higher will be the wave movement.

You can control the animation speed from the Speed section. The higher the number the slower the animation will be.

Following this process, you can edit the other item. By setting different values and color for the wave you can create interesting wave animation.

You can click on the + Add Item button to add more waves.

Advanced separators wave demo how to create animated shape divider in elementor? From the plus addons for elementor

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What if the animated shape divider doesn't display correctly?

If the animated shape divider isn't showing as expected, ensure that the Advanced Separators widget from The Plus Addons for Elementor is installed and activated. This widget is essential for adding animated section dividers. Also, check your settings for the Divider Position and Shape Height, as incorrect values can affect visibility.

Can I use the animated shape divider to enhance a specific section of my page?

Yes, the animated shape divider is great for breaking up sections of your page, adding dynamism and movement. Using the Advanced Separators widget from The Plus Addons for Elementor, you can select the Section/Row option to add a horizontal divider or the Column option for a vertical divider, tailoring the effect to your design needs.

What settings work best for creating a smooth wave animation?

For a smooth wave animation, adjust the Amplitude and Speed settings in the Advanced Separators widget. A higher Amplitude increases wave movement, while a higher Speed value slows down the animation. This balance is crucial for achieving a visually appealing effect without overwhelming users.

Are there any limitations when using the animated shape divider?

One limitation to note is that the Advanced Separators widget can only be used with Elementor. It does not work with other page builders like Gutenberg, Beaver Builder, or Divi. Ensure you are using Elementor to take full advantage of this feature.

How can I customize the colors of my animated shape divider?

You can customize the colors of your animated shape divider by selecting the Shape Color Type in the Advanced Separators widget. You have the option to choose either a solid or gradient color. This flexibility allows you to match the divider to your site's overall color scheme, enhancing visual cohesion.

What happens if I set the wave height too high?

Setting the wave animation height too high can lead to an exaggerated effect that may not look good on your page. It's important to balance the height with the Shape Height you've set. A good practice is to keep the wave height proportional to ensure a smooth and visually appealing animation.

Last reviewed: April 9, 2026

Related Docs