Add FREE Animated Images to Your WordPress Website (Elementor + LottieFiles)

1. Introduction: Welcome back to another awesome Skillshare class with me, can Besser. It's always a pleasure to have you here. Do you want to learn how to add animated vectors to your website like this? I want to show you how to add loaded files to your WordPress website with Elementor load, the file was created by the Airbnb team and it's open source. And as you can see, the service has been used by designers and developers from very many companies worldwide. Some of them are the biggest brands in the tech industry today. We're going to do all that for free. You won't have to pay for any plug-in or any service with always spend any more time. Let's go ahead and get started. 2. Let's Add the Animated Images: Here we are in my dashboard. This is a brand new installation of WordPress, so I don't have any plugins installed except the ones that come by default. I'll go ahead and select the two of them by checking this box and deleting them. I just don't want to have them there. Then now that we have a clean slate, I'll click Add New. And of course, I need to add Elementor. Install Elementor. I have to mention that elementary itself has the option to add animations to your website, but that is available in the Pro version of Elementor. So if we switch to the official website, as you can see here at amazing animations to your website with lots of widget. You need to go pro in order to be able to use that feature. Since this is available in the pro version, is there a way to do it for free without spending any money? And the answer is yes. So going back inside our dashboard, as you can see here, we have additional Elementor add-ons created by third-party developers. And some of these additional features that come for free with these add-ons. The features that are premium or in the Pro version of elementary itself. So we want to install premium add-ons for Elementor. And this is the add-on that will give us the feature to add animations to our website. Now that we have the two of them installed, we can go ahead and activate both of them at once by going inside installed plugins. I'll select both of them by checking this box here. And then I'll go ahead and say activate and apply. Right? And now that we have the two plugins installed and activated, I have to mention that I'm using the Astra Theme. So if I go inside appearance, you'll notice that my active theme is Astra. Going inside pages. I'll go ahead and create a new page. Let's call it landing. Then I'll go right here in these settings, I'll go to template Elementor full width. Then I'll go ahead and publish it. Probably stat override. So let's go to Edit with Elementor because there'll be doing that from the front-end. Right? So here we are. What we want to do is add new. I want to add a new section. So I'll add this double column section. And on this column here, this is where we're adding our animation. So I'll click the plus sign here. And then came here, I'll type Lottie. You'll notice that we have the elemental pro version and the premium loading animations version. So if we click the Elementor Pro version, we can't use it because as you can see, the log here says you need to have the pro version. But the good thing is that we've been stalled the premium Elementor Adams plug-in and it allows us to add the loading files using it. It will present us with the edit premium Lawdy animations options here. And the first thing you'll notice is that we have a file source. In the file source we have two options. We can upload our own file, our own animation if it's in the right format. Or we can add an external URL. So we'll go with the external URL. And that means we need to grab a URL from loading files and drop it in here. Will go inside loading files. And in here, I'll go to the search bar and type for any type of animation I need. So let's say, for example, sharpening. Then hit Enter. As you can see, we have several options here to choose from. Uh, most of them are free, of course there has to be some premium versions. I'll go ahead and select maybe this one right here. So I'll click that. And it'll bring up this pop-up with all the details we need. Now this is the URL we need to copy, so I'll click that to copy it, and now it's copied. I'll go inside our Elementor page and paste it inside this field. It'll take a moment to show up. There we have it. Now you'll notice that it's too small. The first thing you need to do is maybe increase its size. You can also just type the size you need directly in here. Let's say 500. Then let's update that. Preview the changes. There we have it, the animation on our website. So you can go ahead and add more details to your website. So maybe you might want the heading there. Limited shopping. Might want to change that font color. Maybe the topography changed Montserrat font size. Maybe. I'll select the column itself. Column that's holding this area. Go inside and go inside. Advanced. Uncheck the margin, and then let's give it a top margin of 70. Alright, then let's click this icon up here to add some text. Let's click it again to add a button. Let's change the color button to this yellow. So I'll click the button. And then under button, under Style, go to color. This yellow right here. There we have it. Update that. And let's preview the changes. Maybe you can give these fonts color this blue. I'll go and select this blue, brown color consistency. And now the blue matches with the blue on this. And then let's click this Lawdy animation going inside style. So as you can see, we have many different options here. We can also increase the animation speed. The speed will increase in small increments because as you can see, we are increasing in points. And we can also choose what triggers the animation. Maybe on hover, when someone hovers over it, that's when it animates. On scroll. When someone needs scrolling, that's when it starts to animate. Insight style. We can also go inside the CSS filters and play around with these settings right here. So for example, we can increase the brightness. We can play around with the contrast. We can also increase and decrease the saturation of the colors. We can also play around with the hue just to see if we can get our brand colors, right. Alright, let's update that. And let's preview the changes. And there we have it. When we hover over eight, that's when it animates. When we're not hovering already, it's not animating because that's the setting we chose. That's how to do it, guys. I would recommend you go ahead and play around with all the settings and see how creative you can get with them. And that marks the end of our tutorial. I hope you learned something today. And above all, I hope you'll do something awesome with it. If you like the class, don't forget to leave a review. It might help another student decide if this is what they're looking for before they actually watch it. If you're using Elementor and you'd like to learn how to build awesome webpages and fully working websites. Check out my profile. You will find several classes there where I teach you how to do that. Otherwise, it was a pleasure teaching you this today and I'll see you next time. Peace.