How to Create Animated Shape Divider in Elementor

Animated Shape Divider addon is a new global feature from Premium Addons For Elementor plugin that can be used with Elementor Sections, Columns, and Containers to enable you to create unique animated SVG dividers. If you’re not familiar with Animated Shape Divider Addon, take a look at this tutorial.

Creating an animated shape divider has never been this easy. In this article, we will show how to add an animated shape divider to Elementor flexbox container, section, or column.

Animated Shape Divider Feature From Premium Addons For Elementor


  • You will need the Premium Addons free plugin installed and activated on your website.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated.
  • Make sure the feature is enabled so you can find it in the Elementor editor. To enable it navigate to WP Dashboard -> Premium Addons for Elementor tab -> Features -> Switch on the Animated Shape Divider feature.

1. Enable Animated Shape Divider Addon

Navigate to Elementor container, section, or column style tab, then enable the Animated Shape Divider.

Enable the Animated Shape Divider addon option from the container controls
Enable Animated Shape Divider

2. Choose SVG Shape

Choose the divider shape source and layout, you can use the ready SVGs or you can get a custom SVG from an external source.

SVG Source field in the Animated Shape Divider Addon
Choose The SVG Source Between Default and Custom

You can design and build custom shape divider SVGs using the following free websites:

  • Design4Fun: Click on any shape to copy its SVG code.
  • SVGWave: After customizing the shape, click export from the bottom right.
  • GetWaves: After customizing the shape, click the download icon.
  • Wavelry: After customizing the shape, click on SVG under “Save as”.

Then, paste the custom SVG code in the input field.

3. Enable Animation

After setting the position and applying the needed Short/Long Axis and Offsets.
From the Animated Shape Divider tab, scroll down and make sure the ‘Animate‘ option is enabled.

Enable Animate in the Animated Shape Divider Addon from the container controls
Enable Animate in Animated Shape Divider

Elementor Shape Divider Animation Customization

You can customize it even further!

  • Prevent Stretch: This option is used if you want to animate the divider without stretching the SVG.
  • Animation Speed: Set the animation speed in seconds.
  • Animation Direction: Select the animation type between Normal, Reverse, or Alternate.
Animated Shape Divider Addon animation customization options
Shape Divider Animation Customization Options

You Did It!

Now you can design and build amazing animated shape dividers using the Animated Shape Divider feature. We look forward to seeing what you will come up with.

If you still need any further assistance, feel free to contact the Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our channels to get updates about new features, improvements, and bug fixes.

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.