Cloud Animation Effect using Elementor | Wordpress Elementor Pro Tutorial

[Music] hey what's going on guys my name is jim fahd in this tutorial i'm gonna show you how to create this nice cloud banner animation effect using elementor page builder and you can use this type of nice cloud banner animation effect on your landing page or your portfolio page or your single blog post page like here you can see the nice background image so you can change this background image on your each blog post page you see it looks really great so at the above of your page if you put here your blog image and then here is the nice cloud animation effect then you can write your blog post here so of course it would really look great only with this background image also if you want you can put a title like this actually i will show you only the way how to do that and i know you're super creative so then using your creativity you can make it on your way alright so without further ado let's now go inside elementor page builder so here inside elementor page builder first i want to create that section that will be bottom of our banner that's the content section that's pretty easy so let's click on this plus icon take a single column structure so first here i just wanna add a heading widget and i just wanted to say elementor cloud banner animation effect now let's make its alignment to centered go on restyle tab let's make the text color two hash two two two two two two now let's do some typography from here one family let's set it to popping spawn and found the weight let's make it eight hundred all right now after the heading here i'm adding some text here so here i'm pasting some dummy text and let's now duplicate it couple more time to give it a feel like a real page so i'm duplicating it couple more time all right now let's add some spacing around this section so go under the advanced tab of this section and let's add some padding in percentage so first unbind it and select the percentage on the top let's give it five percent and on the right and left let's give it 10 percent just to make it realistic to make it look like a real website content all right now we will be creating that cloud section at the top of this section so to add it you know just click on this above plus icon here let's now click on the plus icon to take the new section and select the single column structure from here so right now this is our section first let's make the content with to full width also let's turn on the stitch section from here now height i'm selecting to minimum height and i want to give it in which that viewport height so i'm setting it to 70 or 75 vh and then it's very important make the column position to bottom you see the column is now at the bottom all right now let's add the background image of this section so go under style tab and here is the background type select the classic now click on the image let's select this big property image from here by the way i will be providing all the images i'm using in this tutorial you will get the image download link in the description so let's select this property image and click on insert media now let's fix the positioning of the image so from here position i want to position it to the bottom center attachment to scroll and repeat to no repeat and size yeah i wanna make that to cover now inside the column i wanna take an inner section so click on this plus icon and drag an inner section inside this column here so by default we have got two columns here is the left and here is the right so first inside the left column click on this plus icon here i'm adding an image widget here inside now i just want to duplicate the left column that contains the image couple more times so i'm clicking on this duplicate column icon let's duplicate it couple more time once again duplicate and duplicate it one more time and let's just delete the empty column because we don't need it so inside the inner section we have now five columns and within each column we have an image widget i have taken five columns here because i will be using five different cloud png images here and also in the description you will get the download link of the cloud images so inside the first column let's click over the image now let's click here on choose image so inside the download folder you will get all these cloud images and you can see there the names accordingly cloud1.png then cloud2.png cloud3.png like that so inside the first column i want to use cloud1.png and accordingly that inside the second column i'm inserting the cloud image to this one click on insert media now select the third image you know that will be this image so click on insert media let's select the fourth image from here this is the fourth cloud image click on insert media and let's select the last cloud image from here so this is this now click on insert media all right so we have now the five cloud images here this time with each of these columns we will be adding a class name that's very important because we will be doing all the css based on that class name so let's now select the column that's containing the image widget go under its advanced tab and here you will find css classes i'm adding a class name here that's clouds now i'm copying the class name and let's add the clouds class name on all other columns so here go on the advanced tab here is the css class let's add clouds let's do the same for the third one under advanced tab add the css classes clouds then same with the fourth one go under advanced tab add the css class here same with the fifth one go under advanced tab here is the css class that's clouds all right now we will be using some custom css code with this clouds class but no worries i already have written that code for you so you can just go to jim fahad the digital.com i will put this pages link in the description from that page if you scroll down a bit here you can see it says could affect css but it shouldn't be good it would be cloud that's my bad i'll fix it as soon as possible all right so from here just copy this css snippet and then go inside elementor page builder you can paste the css code anywhere of the page because we are using a class name so you don't necessarily need to do that within this column you can do the custom css anywhere of this page so for that i'm selecting the inner section you can do it anywhere now let's go under advanced tab and here expand the custom css by the way you will only get the custom css option if you are using a limiter pro if you don't have elementor pro i will put the elementor pro purchase link in the description you can get elementor pro from that link all right now inside custom css i'm pasting the css code snippet boom so here it's just three line of css scores first i made their position to absolute and then i made their width to 100 viewport width that's why it's covering the whole width of the viewport and from bottom i positioned them to zero by the way if you want to make the width more less like 50 viewport width you can do that in this way but i wanna make it to 100 vw and i made it important so it will overlap all other css of elementor's default all right so we have got our nice cloud and now i want to add some animation with it so now to add the animation let's again go to jimfahrethedigital.com and from this page if you scroll down a bit you can see here cloud animation css and again it's my mistake it's not code it should be cloud i will fix that as soon as possible and from here don't just copy this whole chunk of snippet from here you can see animation one underneath that just copy this line from here and paste that inside the cloud css so right after bottom zero just hit enter and paste the animation code the animation will not happen immediately because we have just created the animate animation here and now we need to create that animate animation using keyframes again i have created that for you already so let's go to gym for the digital.com here just copy this keyframes animation snippet so from here to the very bottom this snippet i'm copying it now let's go inside elementor page builder now remember we should paste the keyframe snippet outside of this curly braces not inside of this curly braces so outside of it hit enter and paste the code whoa we have got our nice animation now it's moving from the left to the right because if you have a look on the keyframes animate i can describe you it very shortly because i don't want to make this tutorial complex so here you can see the beginning position of the transform is minus 100 percent and the ending position is 100 percent so the animation always starts from the minus 100 percent that means the cloud starts from the left 100 percent of our screen i'm giving you an example instead of 100 if you set it to minus 50 now you can see the animation oops i write here 500 but i'm writing here 50 so the animation will always start from the midpoint of this screen like this but i don't want that so here i'm again setting it to 100 percent like this so it looks great but you know what it looks like a moving track or moving car not it's looking like a real cloud because real cloud doesn't move like this like a truck or like a car and that's why i want to add another animation that looks more like clouds and for that reason first of all i'm disabling this animation from here so from here i'm disabling this animation by the way if you happy with this animation you can keep it like this but if you want to take it to the next level then you can follow along so again i'm removing the animation one css snippet from here so now to add the more realistic cloud banner animation effect i want to add some custom attributes with each of the columns that contains the images and you know we have already used some custom positioning i mean some absolute positioning and that's why we will be using the navigator because otherwise if we click anywhere of the screen we may select other object or other element of the page so whenever you use absolute positioning it's always great to use the navigator option of the elementor page builder so from the bottom left corner click here to open the navigator now you can see the whole layout so this is our first section and inside that we have taken a column and then here we have got our inner section and within intersection we have our one two three four five columns and within each column we have our images and we don't need to do anything with images because we have done all the work with the columns so right now i have selected the first column here from the navigator now let's go to its attributes it's under advanced tab again you will only get the attributes tab if you use elementor pro and you will find elementor pro link in the description all right now let's open the attributes tab from here and you know if you're good at html we usually write attributes in the way like key equal inside the quotation mark the value name but inside elementor page builder is a bit different here you need to write first the key name or the attribute name and then you should put a pipe and then you need to write the value so here again you don't need to write anything by hand if you don't want to you can just go to gym for the digital.com from this page here you can see column custom attribute so just copy this snippet from here now let's go inside elementor page builder and paste that snippet inside custom attributes so here you see the attribute name is style then the pipe symbol and then here i have written a variable name because later i want to calculate the value number with the animation duration all right i don't want to make this tutorial complex i am explaining it very simply just you you need to write here style first then the pipe symbol and then exactly like this you can write here dash dash i then colon equal one now i'm just copying it let's now go inside the second column expand the attributes now paste it here and here just instead of one i'm typing here two now let's go to the third column expand the attributes and paste the snippet instead of one i'm writing here three now let's go inside the fourth column under advanced tab open the attributes paste the snippet and here i'm writing instead of one two four now let's go inside fifth column open the attributes paste the code and instead of one i'm writing here five all right now let's go back to the animation css snippet that we have written a few times ago so i have written that inside the inner section custom css so i'm selecting inner section from the navigator now from under advanced tab open the custom css and now here inside the clouds class we need to put our new animation css so for that you can again go to jimfahrethedigital.com and under this cloud animation css if you have a look here you can see animation 2 don't copy with these comments because if you copy this with these comments it won't work just copy this line that says animation and ends here with infinite so just copy it go inside the limiter page builder and paste it inside the curly braces here so i'm pasting it here so it says animation then the animate animate is basically the animation we have created using keyframes and here i have used the calc function i have set the animation duration to 8 second and i multiplied with the variable number and you remember we have set the variable number for column one to one then two three four like that and that one two three four five will be multiplied by eight so each of the cloud will have different moving timing and that will finally look like a real cloud let's say we have set here eight seconds so the first cloud will move within eight seconds because eight times one equal eight then the second cloud will move within eight times 2 that 16 seconds and like that the third cloud will move 3 times 8 equal 24 seconds like that and if you want to make the movement more faster then you can set here two pixel three pixel or five pixel instead of this eight pixel like here instead of eight you can put here five but i wanna keep it eight second by the way you cannot see this animation within elementor page builder but let's now have a look if you click on this green update button to save your work and click on this eyeball icon to preview i'm clicking on this eyeball icon now here we can see our amazing cloud effect so it's now moving in a different motion because i have said different moving seconds with different cloud images that's why it's now looking like a real cloud movement all right now let's go inside elementor page builder again because now i wanna show you if you want to add any text within this banner how you can do that you know it's very simple just click on this rubik's cube icon and drag a heading widget inside this section but just have a look here in the navigator as we have used the absolute positioning and that's why it's going inside a column here and that's why i said always use navigator when you have used absolute positioning on your page so you see our new heading here is sitting inside here in this place but i want to place that outside of this column so i'm dragging it here let's just put it above the inner section in this place i think you can barely see it because it's under the clouds here so first of all let's adjust its positioning so let's go under advanced tab and bind the margin and i want to add some negative top margin so here i'm adding minus 300 pixel of padding now you can see it all right now let's go under content tab and here i'm writing cloud make the alignment tool centered go under style tab to do some styling with it text color let's set it to white then typography you know my favorite font is popping sponge so i'm sitting through poppins and i want to make this really huge so i'm setting the font size to 140 pixel like this font weight let's make it really bold 900 and then if you want you can add more blend option like from here you can add the screen option or you can add the multiply or overlay effect if you want but i just wanna make it simple so i'm keeping it normal also if you want you can add some text shadow from here you can adjust their horizontal position or vertical position from here in this place and again when you are happy with it just click on this green update button to save your work let's now have a final preview of our animation now it looks really great so in this way you can put any heading or any text here within this banner but lastly i want to show you another thing if you have a close look you can see here a tiny transparent color at the bottom of this banner so to remove it just go inside elementor page builder from the navigator just select the column because it's coming from the extra padding of the column i haven't done anything is the default spacing from elementor so just go under advanced tab and unbind the padding so now it's set to zero pixel of padding and we can no longer see that unwanted spacing now click on the update button and now have a final look of the animation it looks really great you can put here your blog text or any heading if you want and you see it looks really realistic and yep that's it if you like it please give this video a big thumb up and don't forget to subscribe this youtube channel also press on that bell icon to get notified before anyone whenever i will upload a new video on this youtube channel also if you want me to help you on any elementor project or wordpress project then you can contact me through my website that's jim for her thedigital.com i will try my best to help you personally once again thank you so much for watching this video i will see you in the next video for now bye bye

Channel: Jim Fahad Digital

Views: 4,800

Keywords: Cloud Animation Effect using Elementor, Wordpress Elementor Pro Tutorial, elementor tutorial, elementor, elementor pro, wordpress tutorial, wordpress, wordpress landing page design, elementor landing page design, wordpress elementor, make a website, create a website, jim fahad digital, ferdy korpershoek, web learners, nayyar shaikh, landing page, how to make a wordpress website, how to create a website, build a website, elementor css tricks, elementor tips and tricks

Id: eC6PGGEJ9pA

Length: 20min 54sec (1254 seconds)

Published: Thu Jun 24 2021