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