How to Create 3D Motion Scroll Effects in Divi

hello divination and welcome in today's video i'm going to show you how to create 3d motion scroll effects in divi this is the final result we're aiming to achieve so without wasting a lot of time let's dive in and let's get started all right so the first thing we need to do is to create a brand new page so i'm going to come over here and click on brand new next i'm going to give this page a name so i'm just going to call it perspective and use dv builder now for this design we're going to build everything from scratch but you can also use the same technique on an existing page so i'm gonna go ahead now and click on start building and we're gonna go with a single column here so i'm gonna go ahead and select this now with that selected the next step now is to go into my section settings so i'm gonna close this click here on this gear icon and here we need to add a top padding so i'm going to click here on design spacing and we're going to add a padding of 40 vh now this is because we want to give this enough space for us to see the scroll effect okay so now that we have this all set we're going to save this by clicking here on this check mark then the next part here is to go into our row settings so i'm going to click you on this gear icon now i'm in my row settings the next step now is to add a bit of css code so i'm going to click here on the advanced custom css and i'm going to paste my css code in here so this just adds my perspective and by the way if you want to use the exact same code as i'm using throughout this tutorial i will leave a link to the post in the show notes below all right so now that we've added our perspective i'm going to save this and then it's time now to add our text module so i'm going to click here on this plus button and search for my text module there we go so i'm going gonna select it and all i have to do here is to add my heading text and it's just gonna be a recent work now i'm gonna make this a heading one so i'm gonna highlight it click here on this drop down and set this to heading one okay so now that we have heading one all set we need now to stylize it and make it look beautiful so i'm gonna come over here now to the design tab click on heading text and uh make sure you're on the h1 tab because this is where heading one is okay so now i'm gonna search for my font and my font here is called a railway so i'm gonna search for it and here it is i'm gonna select that next we really want this to be nice and bold so i'm gonna change my font weight to bold i'm gonna make this centered as well and now i need to set my size so i'm going to scroll down a little bit further and add my size as 6vw okay so pretty much i am happy with that i'm going to now save so next i'm going to add an image so i'm going to click here on this plus button search for my image module and here it is now it's time to upload our image so i have an image that i've already uploaded to my media library so let me just go ahead and search for it and here it is now before i continue i'd like to remind you that in this tutorial i'm going to be using the dimensions of 880 by 1265 pixels so make sure you have a similar size for you to get the exact or similar results okay so now that i've selected my image here i'm going to click upload and here is my image all right so now we need to further customize this by coming over here to design and the first thing we need to do is to align it to the center next we need to set our height so i'm going to come over here to sizing and our height here has to be 600 pixels so i'm going to go ahead and manually add it in here at 600 pixels next we're going to add a box shadow so i'm going to come over here and the style we're going to go with is this one right here so i'm going to select that so here for the box vertical position i'm going to set this to zero and the box shadow blur strength is going to be 60 pixels so i'm going to go ahead and add it in here and then finally we need to add our color so i'm going to click here on this eyedropper tool so the color i'm going to add is going to be between these brackets here so i'm going to paste it like that and pretty much we've added all the information that we need for our image all right so the next part is to go to our column so to quickly do this i'm just going to click here on this three little dots which is uh the expand settings i'm gonna click the layers and i'm just gonna expand this so that i can see all my rows and images so what we need to do here is go into the column settings so i'm just gonna click here on this gear icon here to go into my column settings now that i'm in my column settings i'm going to come over here to design transform and we need to choose this one here transform origin okay so go ahead and select that and make sure this is right there in the middle okay next we need to come over here to transform rotate so i'm going to go ahead and select that and i'm going to set this to a 30 degrees all right so now that i've added this i'm going to save and save one more time the next step now is to go into my text module so i'm just going to expand this as well and go into my text by clicking here on this gear icon it's much easier this way when you use the layers all right so now that we're here what we're going to do next is to come over here to advanced and then you want to click on scroll effects so the first effect we're going to use is the vertical motion so i'm going to go ahead and select that and enable it it's very important that you enable it because this is how we're going to add all our settings next i'm going to come over here and start adding all my settings so i'm gonna start off here with minus four and here in the middle it needs to be zero and finally over here it needs to be four okay so now with that set that's looking okay and over here on the viewport bottom and top everything needs to be left the way it is okay so moving on the next step now is to come over here to scaling up and down so i'm gonna go ahead and select it make sure you activate it and we're gonna start off here with our starting scale at 100 and in the middle of here it needs to be at 100 and then finally we need to set this to 50 so pretty much that's all we need to do here for our text scroll effects so now i am going to save this next we need to go into the image settings because we also need to add our image scroll effect right so to again we need to head over here to advanced scroll effects and we also need to start here with the vertical motion activate it and now we can add all our settings so first of all i'm going to drag this all the way down here to zero and then i'm just gonna add zero here as my starting offset and the middle it needs to be zero and then over here it needs to be minus six point five okay so now that i have that all set the next step is to add our scaling up and down as well so i'm going to click here and activate it next we're just going to add our starting scale which needs to be at 130 degrees uh in the middle here it's found at 100 and then finally this needs to be a 50 so pretty much that's all we need to do let's save this and let's do a quick preview and see what this looks like so i'm just going to close this okay so pretty much that's our final design we'll do a preview once we've designed all the three designs okay so moving on let's head over to part two where we're adding 3d uh rotation and motion to images in their columns so i'm going to click here on this plus button here so we're going to add a regular section and this time we're going to go with two equal columns and before we start anything here we need to go into our row settings by clicking here on this gear icon now here in the raw settings what we need to do is to add a top margin of 200 pixels so let's go ahead and do that the reason why we're doing this is because we just want to give this design a bit of breathing space so over here we're going to click on design spacing and we need to go to our bottom margin here set our 200 pixels and then on the padding we need to set this to zero and we're going to activate this chain so this these two values are the same all right so with that set now the next step is to give this row a box shadow so i'm going to come over here to box shadow choose my shadow style so here i'm going to start with my box shadow vertical position and i'm going to set this to 40 pixels and then the blur strength is going to be 50 and here my box shadow spread strength is fine at -6 pixels the final thing we need to do now is to add our color and this color has a lot of transparency so let's click here on this eyedropper tool and just replace the color that we have here between the brackets like that so you can see here it's gone just a bit lighter all right so with that set so with that set i need to come over here to the advanced tab custom css and add this css code so this is just the um perspective right so now that i have this perspective all set the next step now is to go to column one settings so i'm going to save this and then i'm also going to use my layers so i'm going to select my layers here and go to my row so i'm going to start with my first column so i'm going to click here on this gear icon so now that i'm in my column settings what i'm going to start off with is by adding a gradient so i'm going to come over here to background click on the second tab and let's start by adding our first color so our first color here is going to have some transparency so i'm just going to click here and then drag the second slider down because this now gives us our options for rgba so i'm just going to highlight this and paste my values in here and then next i'm going to add my second color so i'm going to click here and paste my color in place add my gradient direction which is going to be 35 degrees and with that set i'm going to come over here to design spacing and i'm going to add a padding of 5 both to the top and also to the bottom now before i proceed i'd like to remind you that if you want to use the exact same colors as i'm using throughout this tutorial i will leave a link to the post in the show notes below all right so with that said the next step now is to add our transform so let's go ahead and do that by coming all the way down here to transform and what we need here is transform rotate so i'm going to select it and i'm also going to set my settings here to 30 degrees on the x-axis and then next i'm going to come over here to advanced scroll effects so here on for scroll effects we need to uh stylize this but this time we're going to go with horizontal motion so now that i have horizontal motion selected i need to activate it okay so now that it's activated we are going to split this middle part here to 60 and bring it all the way down here to 40. okay so make sure it's 60 and 40. so now that i have this all set pretty much i'm good to go so i'm going to go ahead now and save save one more time so now in column 1 we need to add an image so i'm going to click here on this plus button search for my image module and select it next i'm going to add that image that i used in the first example so i'm going to click here select my image and note it's 880 by 1265 pixels so now i'm going to click upload an image and pretty much this is what it looks like now let's head over here to the design tab and here on the design tab we need to go to alignment and make sure it's centered and then we're going to come over here to spacing so here on spacing we are going to add our margin and it's going to be -20 pixels to the top so let's go ahead and do that and we also need to add -20 to the bottom next we need to add our box shadow so the style we're going to go with is the first one here and then the box shadow horizontal position needs to be at 40 pixels or minus 40 and then the blur strength uh we're gonna set this at zero pixels and the box shadow blur strength actually you know what this is what needs to be zero the box shadow vertical position needs to be set to zero and then the blur strength needs to be at 40 pixels all right so now that we have this all set the final step now is to add our box shadow color so let's go ahead and do that by coming all the way down here clicking on this eyedropper tool and pasting our value like that so that's looking good now it's time to add our image scroll effects okay so let's go ahead and do that so i'm gonna click here on advanced scroll effects and let's start here with our vertical motion so i'm going to make sure it's selected and then activate it next we're going to split this into two so we need to again we need again to set this to 60 and here we need to set it to about 40 and then 4 and -4 is fine with a mid offset of zero so pretty much that's looking good next we need to uh move on to the next motion effect which is the horizontal motion activated set this to minus four and four okay and now we just need to split this into two so you need to set this to 60 and bring this down to about 40 percent and then save okay so you can pretty much see the effect there as i'm scrolling and that's looking really really nice okay right so now that we have this all set we need to now work on the right column all right so on the right column all we have to do is to click here on this plus button and search for our text module and select it so i'm just going to add some dummy text in here and the first part here is going to be our header or heading okay so i'm gonna highlight it and set this to heading two like that i'm just gonna close my layers here so it's out of the way okay so now that is uh my layers is out of the way i'm going to come over here now to design text and we are going to set this to poppins next let's set our text color so i'm going to come over here and this is going to have some transparency so i'm going to drag the slider down and paste my value between the brackets like that so that's going to be our color our text size is going to be 16 so i'm just going to nudge this a little bit until i get to about 16 and then our line height is going to be 1.9 that just makes it much easier to read and then next i'm going to add a margin to the bottom so i'm going to come over here to spacing and margin bottom is going to be 30 pixels now let's work on the heading so i'm going to click here on this little brush tool so this is going to take us to our heading settings so you can see here it's just set to default so let's use our font which we used earlier on and it's called railway our font weight is going to be bold and our text size is going to be 48 pixels so it's going to be nice and big and then for our line height it's going to be 1.5 this is just that it has enough space so it makes it easier to read so pretty much i'm happy with that i'm going to save this and next i'm going to add a button to this for our call to action so i'm going to search for my button module and select it all right so now that i've selected my button you can choose whatever text you want to be on this button but don't forget you need to come over here and add your url so for now i'm going to add a blank link so with that all set now the next step is to stylize this button by coming over here to design button and make sure you activate use custom styles for button all right so now that i have uh selected that the next step now is to add my background color so i'm gonna add it by just pasting it in here now you can see that this has carried over our border which we don't need so we're gonna set this to zero just to make the button look much better so the button text here needs to be set to white so we can easily read the text on this button so now that we have this now we are going to set our font weight and we are going to come over here set it to bold and we also going to make it all caps now just for consistency's sake i'm also going to set this to poppins so now we have our button styled and looking good so it's time now to save and we're also going to go into our column 2 settings so i'm going to click here on this little icon to go into our layers and i'm going to expand my row here and go into my column two settings so here in column two settings we just need to add a bit of padding so i'm gonna come over here to design spacing and we're going to set this to 40 pixels and this is going to be all around so this just gives us some breathing space and makes it look much much nicer all right so i'm just going to get this out of the way save this one more time and here is our second column and as you see this scroll happening you can see that our animation is happening there which is great all right so now let's move on to our third design so to do that we just need to go back over here to our layers i'm going to open this and with that open now to save us a lot of time i'm just going to duplicate this row okay so let's go ahead and do that so now that i've duplicated the row i'm going to expand this and just reverse our columns so the top one here is going to come to the bottom so basically what is this what this is going to look like is just a reflection of what we have on the top one so let's see if that's the case okay so let's do it one more time drag this down and there we go so now this is on the right and this information here is on the left so next we need to go into column two transformation settings so i'm gonna click here on this gear icon design transform so this time we need to go to transform rotate and this needs to be minus 30 degrees because it's facing the other way so we want it to face uh the the right way so i'm just going to add minus 30 degrees there and pretty much that's our final design so i'm going to go ahead now and save save one more time and let's do a quick preview all right so this is our final design you can see here our perspective is working and this is our second row and then the one that we flipped there we go so there you have it thank you all for watching if you like this video please give me a thumbs up and do follow us on our social media platforms by doing so you'll be notified every time we release new tutorials until next time thanks for watching and i'll see you in the next video take care

Channel: Elegant Themes

Views: 7,605

Keywords: divi tutorial, divi builder, divi 4.0, divi 4.0 tutorial, divi builder tutorial, divi theme tutorial, elegant themes

Id: KB3kFv2gayg

Length: 17min 57sec (1077 seconds)

Published: Mon Aug 24 2020