3 EASY ways to make BLOBS in ELEMENTOR with No Plugins // Elementor Design Tips | TemplateMonster

[@templatemonster]

Here is the code snippet to create the base for the 1st blob shown in the tut! 👇



.container {
}
.shape {
background: linear-gradient(315deg, rgba(35,66,189,1) 0%, rgba(0,147,255,1) 100%);
animation: morph 6s ease-in-out infinite;
border-radius: 60% 40% 40% 60% / 60% 30% 70% 40%;
height: 400px;
transition: all 1s ease-in-out;
width: 400px;
}
@keyframes morph {
0% {
border-radius: 60% 40% 40% 60% / 60% 40% 60% 40%;
}

50% {
border-radius: 40% 60% 60% 40% / 40% 60% 40% 60%;
}

100% {
border-radius: 60% 40% 40% 60% / 60% 40% 60% 40%;
} }

[@ivanconsulting6081]

Thanks for this code
So the next question would be, how to replace the colour with an image instead?
Where would we insert our image url in this code?

[@CraigFlintmslamt]

Excellent. Thank you.

[@ryzeonline]

So helpful, thank you so much for your great tutorials.

[@iabbaskhan]

Very helpful video.

[@sfmikica]

This was super useful!! Thanks!

[@khanfaysal993]

Hey TemplateMonster, can you make a tutorial on how to mask the lottie blob (or any other shapes) animation to an image?

[@johnsirrine3926]

these tutorials are fucking legit. You guys rock. Who else is making this type of content!?? No one, I say.

[@nurabrahamhasan3540]

search oooh boi

[@templatemonster]

Wow! Thanks a lot, John!

[@tillu27]

Amazing .... Now I'm going to hit the notification bell 🔔💥...

[@templatemonster]

Awesome! Thank you! ❤️

[@BryanPhilips]

Holy smoke! Amazing. Thank you for sharing. Please expand in Lottie animations 👍

[@templatemonster]

Thanks a lot for your positive response! It’s important for us to know you guys like these videos!

[@schmekis1]

How do you add content on top of a blob? For example, what if I want to put text into the blob?

[@ElliottPrendy]

Legendary

[@hasibuzzamantonmoy8845]

Guys, please please make a video on horizontal scrolling sections/pages with Elementor. Thank you.

[@templatemonster]

Hi! Thanks for an idea! We'll definitely consider making something with the scroll. As for now, please check out this video th-cam.com/video/99R03H5KO84/w-d-xo.html Hopefully, you'll find it useful! ❤️

[@India.stories]

Hello! Thanks for the great content as always! Can you please guide us how to do an off canvas navbar/sidebar, which turns into icons when collapsed and icons + text when expanded. I tried with pop up widget but it’s not working nice

[@templatemonster]

That def sounds interesting. If you could send a link to a website/demo with similar effect that would be helpful :)

[@manjuarun4u]

That is wow

[@rocketgrowthstrategiesdigi4535]

Really like Lottie files, just wish you didn’t need After Effects to make them.

[@rahulnalam2537]

guys, please make a video on the morning brew newsletter kind off an online newsletter for Mailchimp. thanks

[@ПростоНестор-м2в]

Pls, make video full scroll page, Thank you.

[@laksamanatholut448]

I did not found Unsplash Plugin, where to access

[@templatemonster]

Here it is www.figma.com/community/plugin/738454987945972471/Unsplash
Please check the links in the description! :)

[@spare9434]

Where's the code please? 1:50

[@spare9434]

because my code shows no blob and it looks like your code

[@templatemonster]

here is the code snippet for the the blob base

.container {
}
.shape {
background: linear-gradient(315deg, rgba(35,66,189,1) 0%, rgba(0,147,255,1) 100%);
animation: morph 6s ease-in-out infinite;
border-radius: 60% 40% 40% 60% / 60% 30% 70% 40%;
height: 400px;
transition: all 1s ease-in-out;
width: 400px;
}
@keyframes morph {
0% {
border-radius: 60% 40% 40% 60% / 60% 40% 60% 40%;
}
50% {
border-radius: 40% 60% 60% 40% / 40% 60% 40% 60%;
}
100% {
border-radius: 60% 40% 40% 60% / 60% 40% 60% 40%;
} }

[@spare9434]

@@templatemonster thank you, i'll try and see if it works better

[@spare9434]

@@templatemonster I missed the tiniest bit (face-palm)
please can you show us where you find your graphics, art for decorations please?

[@rafaeln.castrom.6453]

amz.!!
tears in my eyes.. ;(
what about Lottie files video?
ths.!!

[@templatemonster]

Thanks! We’ll look into making sth with Lottie.

[@usmanahmed7400]

Make video on lotie animation
(Free)

[@templatemonster]

Hey! Please check our latest vid on Lottie th-cam.com/video/IqgQ6NA-ojA/w-d-xo.html

[@bySterling]

Luv Lottie File$! I’ll def checkout Figma #YOUROCK 🙌🏻⚡️💪🏻💻💥👏🏻 So we could make a full page Lottie blob and then make inline and absolute with a 1 Z index as a background and then overlay Text, Image, Icon widgets on top w a higher Z index rt? Just curious if you thought this the best way to layer all together BIG thanks always!

[@templatemonster]

Thank you for being active and always on point in our comment section! This REALLY means a lot to us ❤️

[@mdarafatkhulna]

Please give subtitles in Bengali

[@21stcenturyconnect]

Lottie files video