‫whatsup guys and welcome back.
‫So in this video, we're going to be introducing a new elementor pro feature.
‫And basically, it's not related to the designing.
‫But this is a purely related with the animation here.
‫So if you have made the blog, then you should know.
‫But let's go out and let's work with and let's see how we're going to be building this.
‫So you can see this is right here.
‫This is right here.
‫Now, if I just load my page, you can see.
‫Nothing is happening.
‫But let's suppose that I want to add some stuff over here so that it looks much better.
‫So what you can do is that you can just go to add it column over here and then you can go and you can
‫go to this motion effect.
‫So this is the motion effects that you can add to your Web site.
‫And you can see we've got these crawling effects and we've got the mouse effects of mouse fixes really
‫small.
‫So we're going to first look at this and then we're going to be talking about this crawling effects.
‫Now, if I just switch this on, then you can see I've got this mouse track and the 3D tilt.
‫So this treaty tilt is just direct.
‫And I can see when I move my mouse how this image is moving.
‫So this is direct.
‫You can work with this Betawi here.
‫You can give it 10 and you can see how just very li speedily it's moving.
‫So this is what the 3D tilt means.
‫Now we're going to talk about the mouse tracks.
‫The mouse track is just like when you move your mouse.
‫Now you will see that the image will be moved and you can see how it's moving.
‫So you can work but you can also where it could direct.
‫So when you move alongside, the image will be moving just like that.
‫But a mouse track, the mouse effects is mostly not used.
‫So you can just uncheck this.
‫And now let's go in and let's talk about the scrolling effects.
‫So if you just switch the song, you can see we've got so many things.
‫So we've got first vertical scroll.
‫If you just crawl it right now, you can see how this image is going above.
‫And just like that.
‫So this is our great feature.
‫This seems like this.
‫You can work with this speed.
‫So if you just do it that way and you you just do it and you can see how this image is going.
‫Really above seem like this.
‫You can just switch this image to move downwards.
‫And I can see how this image is just coming, like how big is crawling.
‫So it seemed like this.
‫You can do it that way so that when the image reaches to 50 percent of the page, then the image will
‫not be moved.
‫So you can see just like this.
‫So this image is moving at 69 percent.
‫And then it doesn't move.
‫So how cool is that?
‫So you can do it that way as well.
‫You can just keep the speed to be a little less and then you can see how this image is moving.
‫Seems like this.
‫You can just bagna sort of default and you can choose a horizontal scroll as well.
‫So you can see when you move, you can see how this image is moving.
‫And this is how it's working.
‫So you can just do it on the 50 percent of the page.
‫The image will be still.
‫So this is you can see this is still the 50 percent of the beach.
‫We are actually in the main area.
‫That is why 50 percent will not be affected and it will only be affected when you move when you go down.
‫So this is out.
‫It's it's it's working.
‫So we're going to go and we're going to keep this did this and we're going to be doing some of the animations
‫over here at this site.
‫So now let's go to let's work with this one.
‫We're going to hit edit column and we're going to go to the advance.
‫And let's work with emotion effects.
‫So emotion effects.
‫We're going to do these crawling effects and we're going to do actually this horizontal scroll.
‫So you can see we're going to keep it to.
‫This right here, so you can see how how cool is it moving?
‫So when we go down, you can see this is moving till here and this is us looking and seem like this.
‫You can do it with this one as well.
‫And you can do add the horizontal scroll and you can do it to the right.
‫So when you do it, you can see how this is moving.
‫So we're going to do it to be 100 percent over here.
‫And now you can see how this image is moving.
‫So when you go down, this image is actually combining in two one.
‫So how cool is it?
‫Seemed like this.
‫You can work with the verticals crawl as well.
‫And then this is out.
‫This will be the effect of that.
‫So you can also keep it to be at seventy eight percent.
‫And I can see this is how it's looking.
‫So it's really giving a great effect when you move it.
‫So we're going to keep it justice.
‫And it's perfect.
‫So this is really a great thing that you can add.
‫Seemed like this.
‫You can add the blur effect, you can add the rotate effect, and you can see how this is moving.
‫So when you come here, we're going to keep it to be like this so you can see 70 percent, zero percent
‫on this.
‫And I can see you go down and this is how the images are moving.
‫So you can pretty well go ahead and you can do some stuff.
‫But I like it to be this way.
‫You can see how cool it is.
‫And make sure that when you were adding some animations, when you were adding some effects to your
‫Web site, make sure that you are just using the simple effects.
‫So I would not be using rotate in my simple basic Web site.
‫So if you were building a Web site that is more like a funky Web site, then you can choose rotate.
‫But for this particular e-commerce Web site, you can do a simple, the simple, the more simple, the
‫better it is going to be.
‫But now you can see this is right here.
‫This is something that you can add.
‫So you can go up for this particular section.
‫It can go the motion effects.
‫And now here you can add the scrolling effects.
‫And here you can add a particle or this horizontal scroll and you can see how this is gonna look like.
‫So you can see when you do it.
‫This is going to be moving like here seem like this.
‫You can do it for the speed to be 10.
‫And you can see when you go down, this will go more likely to be in a much higher speed.
‫So let's do it that way.
‫Let's go down and you can see how cool is it working.
‫So this is cool.
‫Seemed like this.
‫You can do it that if someone reaches 50 percent of the page and then he goes above, then the image
‫will be still.
‫So what you can do there is that you can click over here and then you can said this to 50 percent.
‫And now you can make it this.
‫So.
‫Now, when you were up, you can see the images will move.
‫But when you reach at a certain point, this is the 50 percent of the page.
‫Then the image will be still.
‫So you can do with this.
‫This this is really a great feature.
‫Seemed like this.
‫You can also use the blur.
‫Okay.
‫And you can see how is it.
‫So when you add each point the blur will be there and it's gonna be there.
‫But you're going to keep it to be 50 percent because it when we reaches 50 percent.
‫It should be visible to you.
‫So you can see you go down in see its blur.
‫I'm going to keep its full width and now I go.
‫Come here.
‫Now it's fully matched up.
‫So this is actually a great feature that you can add.
‫Seem like this.
‫You can add the rotate.
‫But I don't like it to.
‫So I'm not going to be adding it.
‫And same goes for the related products as well.
‫So this related product is basically a funky thing.
‫So if you want to add your date, you can do at it.
‫But I can understand this because when you learn something really very new.
‫OK.
‫Then you try to make it look much sexy.
‫So you're going to.
‫You can also add this entrance animation just like bounce in and it's gonna be visible to you just like
‫that.
‫Seemed like this.
‫You can added to this one.
‫And this image as well.
‫So we're going to edit this image.
‫We're going to go to this style and end emotion effects.
‫You can add the entrance animation to be rotate in so you can see this is how the image will look.
‫And when you go down.
‫This is the image will work.
‫So you can then go ahead and you can hit update over here.
‫And now, if you will come up here and you will refresh this page, then see how cool is it.
‫Here you go.
‫We go down.
‫And there is nothing.
‫There is nothing.
‫But when we will reach this page, you can see how cool is it.
‫And then this villes also zoomed up.
‫So this is how it's looking.
‫So now here is the last thing you can see.
‫It's right here.
‫The images just like here.
‫And we need to make sure that this image is fully inside.
‫So what you can do, you can go and you can hit a single product template and you're going to hit edit.
‫So we're going to be editing this and we're going to make sure that this actually fits in.
‫Whether it's a bigger mage or it's a small image or it's any kind of image.
‫So we're gonna make sure that it fits.
‫So what you have to do, you have to come up here and then you have to click edit image.
‫And now here, what you have to do is to go to D style and make sure he said the max would to be 100
‫percent and said the vid to be a hundred percent as well.
‫And then just go and hit update over here.
‫Now it will not cross its column settings, but it will basically in the hundred percent of that.
‫So when you will refresh it right now.
‫You can see that now.
‫It's actually resized more and it's fully in size and it's now coming up to be much perfect.
‫So now it will be applied to those product images that are small in size.
‫So that's whole free right now.
‫Now, I want you guys to go and explore each and every scrolling effect, the mouse effect, and see
‫how you can go and how you can manipulate and how you can build a great looking website.
‫Because now you know the design and now you can build any type of website the way you want to.
‫So that's all right now.
‫Now are totally done with the Web site and we will be talking mostly about the header and footer in
‫the next video and we'll see that how we can build our own particular theme, because you can see that
‫now we are using the priority of the Ocean wp theme and we are using everything that the Ocean wp is
‫giving.
‫So now from the next video, we will be working up the basic theme with nothing inside that.
‫And then I'll show you how you can use the elementor are fully hundred percent elementor to build each
‫and everything.
‫So stay tuned guys and babye.