Elementor Blobs Generator – Create Blobs with Gradients, Animations and Shapes

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.

Elementor Blobs Generator

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)

lSFZOUIcqWmgRufivHwgrFKNhdQaPZlmvMkHqJF6dGgZ V82R3B1i CjruHOL0FvZhPDXWq niHghj RTjqs6gk9bacOrJ6KGwKp3DwpvepeZQUp R30nhOlq XMv6DV6yp20G07

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)

VTyH1SE67mf38xn5FnAb6SwXL 4upv zBXDya0gMUUr tPGXc1DbQ8bkrE AqfUgtyVJ2BAbV7t8KHmU8b39s9F13

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)

rEY9iAXTJ9pos24oQcRbOT RgoNMipAa7d3Rboz48i J6t 5NKtrLmt3ECOjIooE300 ncm66yz6srRe yXVOo39aL K ph 12taizLqqb0gFdM ERD6l0iUkLKK0NhbkAe8dc2S

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)

uOXbWgVQx4V6ppGz4d lHph OID1bkrM0jeHa2ToUogqi8gwL E

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)

m7MHyvFIk bnKqNa

To have the 2 overlapping blobs seated on each other:

Simply go back under the last blob you generated and duplicate it. (06:47)

XDDpH3L29XZPLrynXsF LN s9QeEkxBSzkHaIz5hT25QTgvZufaKfxZAaIn46sGBN7bm3ba0GrHshb3Gv3yAHfgH9KXgSVfGSqbe7e1BN IjGzTn zu4kbwzKbE D2DDn4pP3mEo

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

877VFidaaWBhNwedYy3LgGMbJ2BGD8AXuwf2X2DwxbAKmkTQY7wXIstvQ2ZCLiOuhbV6SPWWB9avZQkFB PJ2y0aCYQvVh5gWwQ5IEm E k0kY

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)

N3iTLcCUgNs rSRG60XLOFBXIpDcdBldNp YPcrl 51dzodi9qUJE0IQ pPA

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users