In this tutorial, I’m going to show you how to use the Premium Addons for Elementor Blobs Generator to create awesome blobs for your Elementor website. You can as well animate the blobs, use gradients or images, auto-generate the shapes, nodes and sizes and the ability to show/hide the blobs on different devices.
Note: The digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Elementor Blobs Generator Tutorial
With the Premium Addons for Elementor plugin installed, go to the PA Widgets and addons menu you’ll find the blob generator option, enable it by making sure it’s green. (01:33)
The Blobs Generator feature requires you to have Pro version of the Premium addons.
Steps to Generate Blobs with an Animation
You need to have the Blob Generator enabled in your sections. Do this by selecting a section, go to the Layout option on the left and go down where you’ll find the Blob Generator option, enable it.
After activating the Blob Generator, click the add new button and you’ll see 2 options for the Blob Source; that’s to import from an external source or to create your own. (01:55)
If you’re to use blobs from external sources, you’re given platforms where you can generate blob codes or codes that enable Premium Addons for Elementor to display the blobs on your website.
For example the Blob maker app, you can change the blob colors, the nodes and the randomness of the blob. Then you can copy the blob code and go paste it into your section (02:22)
If your pasted blob is not visible just go down to Z-Index and increase it from 1 to 2.
However, when you import blobs from external sources, you’re limited. For example, you can not animate your blob with Premium Addons and you can only change colors using the blob maker app, not in Elementor.
So go back to the blob generator and add a new item, change blob source to the “create your own” option. This means you’ll use the Premium Addons for Elementor to generate the blobs and they can be customized whichever way you want.
Go to the Z-Index and increase it to 2. Now you can customize your blob (03:28)
Change nodes to 2, randomness 7 and size to 710. Then you can click on Generate to regenerate the blob.
Now, go down to the color option and choose a color, and you can also make it transparent.
To position the blob on your page; give it a horizontal offset of 55 and vertical 17. (04:17)
Now the blob is visible and you can still navigate through the carousel.
Elementor Blobs Animation
To animate the blob; go back to your editor and on the left, scroll down and find the Animate option, activate/enable it.
Next is to edit the duration of the blob animation. If you make it 10 it will move really slow, if it’s 1, it will move very first. In this case, I’ll just use 5.
Also Read: How to Create a Toggle Off-Canvas Menu with Elementor Pro
Elementor Blobs Generator Responsive Settings
You are also able to hide the blob from certain devices. For example, you may not want it to be visible on mobile, to hide it:
Go to the Responsive mode icon at the bottom, choose the mobile device and you’ll notice the blob doesn’t come out so well.
So you can either resize and position it to look better, or you can simply choose the hide blob on mobile option. And when you preview, the blob will still show on all devices except mobile. (05:31)
Create Overlapping Blobs
Select the section and go down to the blobs generator, click to add a new item
Choose the create your own option on the source
Make it 3 nodes, randomness 5 and size 500px. Leave Z-Index on 1, horizontal offset 5 and animation duration 2. You can also choose a color you want. (06:40)
To have the 2 overlapping blobs seated on each other:
Simply go back under the last blob you generated and duplicate it. (06:47)
To create the third blob in this section, duplicate the last blob item and open it up.
Go to the offset option and enter your prefered figure or move the knob to position it where you want it. (07:11)
Read: Case Study: What is Site Structure and How To Get SiteLinks
Generate Elementor Blobs with Multiple Nodes
For the blob in the last section:
Select the last section, go to the blob generator, add an item and choose to create your own.
Go down and change nodes to 100, make randomness 4 and size 400.
For the color, use a gradient for this one, to do this you go to Fill and select Gradient. Now enter in your prefered gradient color codes.
Go to horizontal offset and make it 34, then go down to the animation option and enable, then make duration 4. (08:25)
And with this, your animated blobs should be done and look just great.
Hope this tutorial has been helpful. For any comments or questions please let me know in the comments section below. Remember to like and subscribe to my Youtube channel and Newsletter for more tutorials.
