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.
Key Features
- Blob Source
- Shadow
- Z-Index
- Stroke Color
- Fill
- Horizontal Offset
- Vertical Offset
- Animate
- Scroll Parallax
- Hide Blob On
How to Generate SVG Blob Shapes for Elementor
Blob Source option helps you to generate blob shapes from External Source 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 helps 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 in PX, EM or Percntage (%).
- Generate New Shape: Click this button to generate a blob shape based on the selected Size, Nodes, and Randomness settings.
Add Styling to Elementor Blob Shapes
You can style your Elementor Blob shapes by adding a shadow, Stroke color, and filling them with Color, Gradient, or Image.
- Shadow: Switch on to enable shadow for Elementor Blob shape.
- Shadow: Customize your shadow by setting Color, Horizontal, Vertical and Blur.
- Z-Index: Set z-index value for Elementor Blob shape, it’s very useful when using more multiple Elementor Blob shapes.
- Stroke Color: Pick a color for stroke border around Elementor blob shape.
- Stroke Width: Set size for Elementor Blob shape storke.
- Stroke Dasharray: Apply Dashed Stroke, you can enter a single value or multiple values sepatated by “,”. dash,space,dash,space,… etc
- Fill: Set background for Elementor Blob shape from Color, Gradient colors and image.
- Color: Pick a color for Elementor Blob shape background.
- Choose Image: Assign image for Elementor Blob shape background.
- Image Position: Set image position width, height, x-position and y-position.
- Gradient Colors: Pick gradient colors for Elementor Blob shape background.
- Color 1: Pick first gradient color.
- Location: Set location for fist color.
- Color 2: Pick second gradient color.
- Location: Set location for second color.
- Type: Set type of gradient Liner or Radial and set their settigns.
How to Add Elementor Blob Shapes With Custom Position?
You can change the position of your blob shapes using freehand feature or set vales for Horizontal and Vertical offsets.
- 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.
Did you check Premium Parallax Elementor Section Addon before?
How to Show or Hide Elementor Blob Shapes on Responsive Screens?
You can show/hide your blob shapes on different device types.
- Hide Blob On: Select the devices you need to hide this blob shape on. You can select desktop, tablet or mobile.
Conclusion
Elementor Blob Section Addon brings attractive and organic animated shapes to Elementor sections which will help you to create eye-catchy websites. So, it will be very helpful for website designers and creators to enhance your pages and attract your web visitors.
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 YoutTube channel to get updates about new features, improvements, and bug fixes.
