One of the new website design trends is adding blob shapes to your web pages. Elementor Animated Blob Generator addon allows you to create trendy and attractive web pages by creating animated and organic blob shapes on your Elementor sections without the need to use applications such as Photoshop to create SVG blob shapes. Besides creating and customizing SVG blob shapes, you can animate and add scroll parallax effects to each blob shape.
Elementor Blob Generator is a new section addon that was recently added to Premium Addons Pro for Elementor.
Click here to check Elementor Blob Generator Section Addon demo page.
Requirements:
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
How to Generate SVG Blob Shapes for Elementor
Blob Source option helps you to generate blob shapes from External Sources or Create Your Own custom blob shapes.
- External Source: Create custom SVG code to create Blob shapes.
- Create Your Own: This option gives more customization options that help you to create more sophisticated SVG blob shapes.
Create Custom SVG Blob Shapes in Elementor
By Selecting Create Your Own option from Blob Source, you can create your own blob generator from Elementor panel directly by configuring the below options.
- Nodes: Set how many nodes of Elementor Blob shape. The more nodes you add, the more complex the blob shape gets.
- Randomness: Set the randomness for variation between nodes.
- Size: Set the size of the blob shape on Desktop, Tablet, and Mobile.
- Generate New Shape: Click this button to generate a blob shape based on the selected Size, Nodes, and Randomness settings.
- Shadow: Switch on to enable shadow for Elementor Blob shape.
- Z-Index: Set z-index value for Elementor Blob shape, it’s very useful when using multiple Elementor Blob shapes.
- Stroke Color: Pick a color for the stroke border around Elementor blob shape.
- Fill: Set background for Elementor Blob shape from Color, Gradient colors, and image.
- Horizontal Offset(%): Set horizontal offset in percentage on desktop, tablet and mobile.
- Vertical Offset(%): Set vertical offset in percentage on desktop, tablet and mobile.
How to Add Animations to Elementor Blob Shapes?
In Elementor Blob Generator Animation section addon, you can animate Elementor blob shape. You can also apply parallax effects to your blob shapes.
- Animate: Switch on to enable animation for Elementor Blob shape.
- Animation Duration: Set the animation duration for the blob shape in seconds.
- Scroll Parallax: Switch on enable horizontal and vertical scroll parallax for Elementor blob shape.
- Vertical Parallax: Switch on to enable vertical parallax for Elementor Blob shape.
- Horizontal Parallax: Switch on to enable horizontal parallax for Elementor Blob shape.
- Hide Blob On: Select the devices you need to hide this blob shape on. You can select desktop, tablet or mobile.
Did you check Premium Parallax Elementor Section Addon before?
Conclusion
Elementor Blob Section Addon introduces appealing and natural animated shapes to Elementor sections, allowing you to craft visually captivating websites. This tool is a valuable resource for web designers and creators, as it enables you to elevate your web pages and engage your online audience effectively.
We hope we were able to help you through this guide. You can check out the rest of our Section Addons like:
- Elementor Lottie Animation Section Addon
- Elementor Ken Burns Section Addon
- Elementor Animated Gradients Section Addon
- Elementor Parallax Section Addon.
If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁
Join the Community
You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.
