If you’re a fan of these blob shapesthat have been seen on the way up quite a lot recently, then stick around becausein this video I’m going to show you three absolutely effortless ways tocreate these blob shapes and embed them on your Elementor website. These threeare the easiest ways and they do not require any coding skills, no third partyplugins and you do not need to install any additional software! Let’s see howwe’re gonna do that.
So, the first one is the slightly animated blob shape thatcan be created with the help of HTML and CSS. I think this one is pretty coolbecause you can adjust the speed of the animation, adjust the number of copies,and you can move it around and you can place it anywhere you want as a reallycool element to decorate your page. Now, in the second example I’m gonna show you how to put any image in a blob shape. So, we’re going to draw or generate blobshapes in Figma, then we’re gonna put our image in there. I’m gonna show you aquick way how to do that! For those who do not know, Figma is an absolutely freeweb-based software. You do not need to download it on your computer and youdon’t need to pay to use it and it’s extremely easy to start with and superquick to export any assets you need to embed on your Elementor pages! And thethird one is going to be using Lottie animations.
I’m not gonna talk too muchabout it and for those of you guys who do not know what this is, just shout outin the comments if you want to make a separate video talking about Lottieanimations, because I do think this has a lot of potential! I believe that we’regoing to be seeing a Lottie animations on the web more and more often. They look great, they can be scaled to any size, they’ll load super fast, because theseare basically a piece of code that you can put on any web page includingElementor and make your assets look just great. So, these are the three ways we’regoing to be exploring today. Let’s start with the first one. There we are in theElementor editor and I’m going to grab the HTML element and place it over here. I’mgonna put my updated version of the code over here and this is what we have.
You can either apply solid color to your blog or you can add a gradient. And thesuper handy tool that is gonna help you pick gradients a lot faster is calledCSS gradient. This is super handy and it’s very fast and easy to work with. Youcan adjust the type and angle of the gradient andyou just grab the code and you place it wherever you like, so this is where weare now and if we go to ‘Advanced’ and we’ll go to ‘Positioning’ and we changethe width to ‘Inline’, so it crops all the extra space here and we change theposition to ‘Absolute’. We can now move this blob around, and we can place itanywhere we want it to be. Now here, in the height and width parameters, we caneasily change the size of the blob and make it bigger or smaller, change the speed of animation to make it way way slower or make it a lot faster, and wecan also create the copies of it – to add a bit more depth to the element itself.I’m going to copy everything that I have written over there. We don’t need this bythe way.
Now, I have three copies in the row andfor the copies two and three, what we’re gonna do is change the position andopacity. And also the speed, of course, to see the variation in the movement. Therewe are! Copying these two properties over there, lowering the opacity even more, so it’s like ’30’ and changing the speed tosomething like ‘3’. Now we need to move the shapes up, so their position matcheswith the position of the very first blob. By using negative values we move theshape up and in the same to the second one. So, that’s pretty much it for thefirst shape! What’s great about it is that it’s going to look crisp and sharpscaled up to any size. Moving on to the next one. Now, in Figma we’re going to usea couple of plugins to make this process even faster and easier. I’ve found twoplugins that help you create organic blobs and I’ve put the links in the description down below 👇👇👇 and then we’re going to just click “Install plug-in”.
Now another one is this one, we’re going to install it as well. And also to you makethe process of inserting images in my Figma layout faster I’m going touse the “Unsplash” plugin. I’m gonna click “Install” and let’s jump straight toour work area. Now, to access the plugins that we have installed there in theplugins -> a drop down, we’re gonna open the “Unsplash” tab. There it is. We’re justgoing to search for something like people in the office. There it is, there’sour photo. Now we’re gonna go and open another plugin. Let’s try this one. Nowthe complexity – let’s turn it down to “3” and contrast – move it right there.Okay, now if we scale it up and rotate it I’m going to position itjust like this. And I’m going to drag it underneath the image, select them bothand click “Use as mask”. Now what we can do is move the mask around and see if wecan find a better place for it.
Maybe something like this. Okay, looks nice. Let’s try another plugin. Go to plugins -> make blob. Ibelieve it was this one. Here this one is a little bit more visual. So here we havethe intensity of the deformation and the complexity. Pretty much, these two are theexact same thing, but the ‘make blob’ one gives you this visual interface, so youcan see what these properties are actually doing. Okay let’s go withsomething very, like really wild! Let’s add this blob and you can also… okay,something random – that’s pretty sick! Okay, let’s add one more very simpleshape – let’s transform them a little bit. Now, I grouped these two together andthen dragged them in the same group with my photo and clicked “Use as a mask” and thisis what we’ve got! We still can move this shape around and adjust its size.
And there we have it! This is probably the quickest way ever to mask your images using blob shapes by using Figma and a couple of plugins which are all completely free to use and you can export your assets like right now. Let’s go to the letters panel over here and select our mask group. You can rename into something else like “Blob photo” whatever and make sure it’s selected. Go to “Export” and here in the preview you can see what we actually have selected and you choose what size you actually want to give to it. And choose the format for the export. If you want to preserve the transparency of the backgrounds of the image, choose PNG and you’ll be able to insert it anywhere on your Elementor page – just like a regular image. And now the last one is probably the most exciting one at least for me! and I’ll leave the link to this particular page in the description down below and I know there’s too much going on over there, and let’s just go to the search and look for the blob elements! And they’re gonna show up in a second There we have it! You can filter these animations by color, style and the type. And we need the free ones.
And if we scroll down, we see different kinds of this blob submitted by different users, by different people who have contributed to creating thisparticular set of animations. Okay, so now let’s open one of those and actuallywhat we need to check first is this. This animation is available to download and use for free under Creative Commons license. Before using any sort of images,videos, music, animations that were created by someone else make sure thatyou check the license and if you actually are allowed to use theseelements in your commercial projects. Meaning, on real websites for clients, for example. Okay, let’s jump back up and this is apreview player, you can scrub through and see that this is animation actuallyloops beautifully and this is what we need!
But first I’m going to show you howyou can change the color of this animation, because you might think “oh Ido not like this color, it doesn’t fit my color palette” or something, but there isa way to actually change the color of this animation and I’m going to show youhow. Before we proceed to embed this on our Elementor page, what we’re going toneed is this “Edit layer colors”. You need to create an account on the Lottiewebsite to be able to edit your elements that you choose over here. So, once youhave the account created there – it is no problem. It is for free, you do not haveto pay for it and just click on this option “Edit colors” and it opens the so-called Lottie Editor.
There are multiple layers in the animation, you can changethe color of each of the layers separately. Let’s try this one, forexample. So, as you see we have… In total, we have three layers over here and youcan go in and change the color of each layer separately. Like that. This is justfor the demonstration purposes. Now I’m going to quickly fix this. Animations that are simpler and all wehave one layer are even easier to modify because they will have this one singlelayer and what you’re gonna do is just pick the color you like. There we go.Let’s say we like this blue. Now, how do you save it and how do you embed it on yourpage? If you’re gonna grab a ready animation without any modifications, it’seven faster and easier because you scroll a little bit down and you choosethis HTML thing and it’s gonna send you to this page which is like a codegenerator that’s gonna give you a number of settings to enable or disable. Andyou’re gonna copy this code snippet, and you’re gonna paste it on your website.
That’s simple. But now what if you just modified your animation like we did overhere. The process is going to look a littlebit different. If you copied this thing – and we can actually do that – and get backhere and paste it over there which is actually the place where you have to putthe link for your animation objects, you can see that it actually shows us thatinitial file before our modifications! And this is kind of a problem and how wecan solve that – is by going to export as Lottie JSON. Open this tab, by the wayhere is the history of all of your changes. If you just need to undo some ofthe changes before exporting and there we go. Just click on this button over here and it saves your JSON file. And what you donext is you close this editor window and you get all the way back to the Lottiefiles homepage which is lottiefiles.com and you go here to preview. This is whereyou can not only preview, but also save your JSON files over here, and they’regoing to be kind of hosted on your account.
This is why you need it – theaccount on lottie files – to be able to save these animations. Now, you simply drag and drop it over there and you just uploadedyour modified blob. There it is! You do not need to click “Publish” to publicbecause it is gonna display this animation under your account like youcreated it, but you don’t need that. What you need is Lottie animation URL andyes, if you want you can proceed to editing the colors further, but we’regonna copy this Lottie animation URL. This is a completely new URL, because youcreated a new item in your so-called media library on lottiefiles.com onyour account and now we’re back here, where our code generator sits.
And we’re going to replace this code with the newly generated code for our item that we havesaved on our account. So we’re going to disable the controls, we’re gonna leavethe autoplay and loop on to make sure that this animation plays continuouslyand it starts once the visitor opens the page. You can adjust the animation speedas well, so it can be something crazy like that or something super slow, tooslow. Something quite slow like this. There are a couple more settings for youto play with but we’re gonna go straight to the generated code field and copy allthe entirety of it and actually get back to our Elementor editor and we need tograb the HTML element again and without any other actions just place it here, inthis field, and this is pretty much it!
Now if you find it to be too small, youcan always adjust the width and height of the element and this will change thesize of the blob itself. Don’t be scared to scale it up because it will not losequality – as you can see it’s just a piece of code and what it is doing, it’s notembedding a video here, but actually the animation processed with the help of theJSON code! If you want us to talk more about Lottie animations and how theywork, just put a request down in the comment section down below! And I’ll beglad to get back to this topic, expand on it and let you guys know how to use it to benefit your website’s look! Now, doing the same thing again as we didwith the very first example going to “Width” -> “Full width” -> “Inline” and theposition:absolute and what you can do is you can drag it around and put itanywhere you like. Okay you guys, this was pretty much it for this video where weexplored three super easy and quick ways to add animated and static blobs to yourwebsite! I hope you enjoyed this one.
Let us know in the comment section downbelow – how often you use blobs on your websites? And if you’re going to use anyof the methods presented in this video to try it out on your website? And if youneed to sell or buy Elementor templates, WordPress themes – there is Templatemonster marketplace where you’re always welcome as a creator or as a customer! By the waynow we’re accepting way you way more types of products other than WordPressthemes and Elementor templates. If interested in that kind of stuff don’thesitate to check it out! Okay wish you guys a great day! Thank you so much forwatching! See you around!