How to Create an Expanding Layers Scroll Effect for Engaging App Illustrations in Divi

hello Divi nation welcome to a brand new Divi use-case livestream and where each week we show you how to add new design and functionality to your Divi websites and in this tutorial today in this livestream we're going to be showing you how you can add an expanding layers scroll effect to feature some really cool app illustrations on your website and don't forget to check out the video description for more info including a link to the blog post that goes along with this use case and without wasting time let's go ahead and jump in and get started everyone alright so first off I just want to make sure you can hear me loud and clear go ahead and give me a thumbs up in the chat here welcome everyone hello mister be paid shout out to the Divi nation hello everyone all right so hello Jen's says great stuff recently keep it rolling I plan to do that today thank you very much hi they're all from Germany from old Germany welcome all right loud and clear Thank You uncle social for that verification sounds like I can get started excuse me also real quick I know we got people rolling in joining us but here is what we're going to be doing today this is a quick kind of preview here of the scroll effect I've been doing a lot of scroll effects recently this one is just basically a recreation of our motion effects or scroll effects demo page that went out whenever we released this feature I think it was like a week ago but this one is showing you how to expand layers I'll show you how to do that this is the effect here of course each scroll effect kind of starts off at the bottom of the viewport here and it kind of gradually increases towards the middle and then ends at the top so that's you can see those expanding layers the text over here on the right and the button is also they have some scroll effects but we're really going to be concentrating on these layers here and these are images that we're going to add some you know transform rotation to get this kind of 3d effect along with the scroll effect as well and add some borders some space and get real creative with it to make really any image you can use Amy any excuse me any image you want with this technique too you can even use screenshots of your own website stuff like that and then expand it using this layout excuse me all right so that's where we're going so let's jump in and get started we're gonna get started with new page and we're going to be editing on the front end here so I'm gonna click to use edit with the Divi Builder alright let's go ahead and build from scratch looking good as we've done so many times before most of us so let's go ahead and do a two column layout here because I'm gonna feature our images over here in the left column and before I do that because we're doing scroll effects we're gonna need some room to scroll so what I'm gonna do is just add some top and bottom margin to my section here all right some go to spacing and I'm just gonna add a TV excuse me a tbh top margin a TVH bottom margin all that is is 80% of the viewport height and that's you can add anything you want I'm just quick and easy way to get some room so I can scroll up and down to see my effect as I build out my design of course you're gonna take that out whenever you bring it to your you know your own layout or page alright let's go ahead and get started adding our three images so again left column here that's going to add our first image module and it's important that we add an image that is going to be the same one throughout so I'm sorry not the same one but the same dimensions throughout sorry about that that way they can stack perfectly on top of one another and then expand from there let's see so this one's about seven 50 by 1624 so this is actually taken from the mobile app landing excuse me layout pack that is available for free in the Divi builder so you can find those images there and that's the mobile app layout pack and these are just some images taken from there which are free to use so this one I'm gonna add as you can see it's pretty large right here we're gonna actually shrink it down a bit and I'm going to make this a custom this image a custom size of 300 pixels wide so a width of 300 pixels and think we can leave the max width alone I'm just gonna set it to 300 pixels just in case and then the module alignment I'm just gonna go left and as you can see my image has already shrunk a bit and then let's do a border so before I do my border I'm gonna add some spacing by default you know Debbie's going to add some bottom margin I'm just gonna take that out if you have a you know the default gutter with selected so that's just gonna clean it up a bit you probably would never see it but I like to do it anyway the border let's go ahead an add because it's the bottom image we want to create this border here I don't know if you can see it let me zoom in there you go that's actually a border it kind of mimics you know a iPhone a little bit just gives it some depth around the first image as you can see the other images here do not have that border let's go ahead and give the rounded corners of 40 pixels and let's update the border with 215 pixels and that's important we got to remember that value because we're gonna have to add some some padding to the other images to kind of replace that spacing created by this border because we want those images to lay on top of each other you know very precisely so when we add a border to this image the image inside of it actually shrinks so we need to take that into account when we add our other images as well and you'll see what I mean as we go along the border color let's just go ahead and make it white and I think I'm gonna take down the opacity a little bit we're not gonna be able to see that yet but I'm gonna take down the opacity to get again this the see-through effect of my border here alright let's go ahead and do a a box shadow to our to give it you know a little shadow here all right I'm gonna increase the blur strength to 48 pixels it's going to make that vertical position match the horizontal position of zero pixels so there's no offset and then let's do 48 kind of increase that as well analyst oops sorry about that let's go ahead and take this down to about 20 percent opacity or transparency of your shadow color there so there you go it's looking good it's actually really surprisingly easy to create especially once we can duplicate this and I'll show you how easy it is to you know try and use the transform with what am I looking for rotation to create the effect that's really cool let's go ahead and duplicate this one I think we're done so that's our first image and now we're gonna duplicate this one to create our next one so before I do that I just want to welcome you if you are just joining us welcome to this week's to be used case live stream where each week we show you how to add new design and functionality to your Divi websites today I'm showing you how to create an expanding layers scroll effect to showcase your apps or it really any screenshots or images and so if you want more information please check the link to the blog post in the video description below and that'll help you out alright so I have a question from uncle social here let me make sure I can read it when you add the boarder the image inside actually shrinks oh I didn't know that okay so is that just the case in this example or every time you use a border in Divi so I think this I can't remember the technical term it's it's well I'm not gonna try and guess right now but it's basically the default way a the bont to say box layout or in CSS where you're whenever you add a border it kind of takes away from what's inside of the container rather than add the container if that makes sense so in other words whenever I add a border to this element it's actually not going to add the border or increase the size of my container it's only going to basically accommodate and shrink the other stuff inside the container to make it fit and there is a term for it and it's very very common and I can't think of it but in fact there may be the article that I wrote on understanding length units that ultimate guide to understanding length units actually covers this concept so go ahead and check that out uncle social maybe that'll clear it up I'm gonna I'm gonna jump in and get started adding our next image so let's go ahead and duplicate this one alright so if you're not if you are not familiar with our new feature release let me just go ahead and show you that real quick this is our layers view and that is found at the bottom here of my in my settings menu so you have this new icon the layers icon which is really cool and it allows you to pop up this layers view in addition to your you know your design setting modal's that pop up as well but this allows you to identify any Divi element and I'm any Divi element in a list kind of layers view so there's my section there's my column excuse me there's my row and this is my column in my column I had this image and let me mean I'm zoomed in too far I have my image and then another image below so if I let me go ahead and delete that image here from the layers view and then I could duplicate it also from the layers view so you have all this functionality in these different layers view and the different modules columns and in sections so you have that full power it's almost I like to think of it kind of like a wireframe view mode that's on the front end so it's really powerful and neat to use and especially in this design whenever we're going to start stacking elements and whenever you layer stuff on top of each other it could be hard to select it in the visual builder so having this late excuse me layers view will help you to identify those very quickly without toggling back and forth to the wireframe view mode and things like that all right so I hope that helps all right we had a few few new people joining us fritz Jackie welcome let's see all right so I've duplicated my image and I could open my image module settings for my second duplicate here I need to change my image and let's go ahead and change it remember it needs to be one that's the exact same size so make sure it's the exact same dimensions and for this one I'm actually going to need to update the settings to take out my border because I don't want the border on this one so let's do that keep my rounded corners because I want that to match on all my images I do want to take out my border width and and you can see it was very subtle but uncle social just kind of speaks to your question if I go back and forward let's watch watch the size will increase just a tad when I take out that border width there you go so anyway let's go ahead and add that back using some padding so let's go to my spacing and remember we had a 15 pixel border all the way around summer I had 15 pixels of padding all the way around and as you can see that images is shrinking up nicely to fit we wanting it to fit you know exactly on top of this other one so that looks good let's go ahead and add our position now to do that we're gonna go to our advanced tab position options and we're gonna make this absolute when I do that you'll see the magical thing has happened and it's now sitting on top of my other image perfectly that's because the default location is set to the top left but you know by default and that's also where that image is in that column so but now for this image actually you know what I need to take out that box shadow I don't really want it there you can leave it but I think it looks cleaner without it so let's just go back to my design settings and let's take out the box shadow for this second image there you go and you can't see the image below it because it's covered perfectly but that's okay that's what we want let's add the vertical motion and you'll see it start to move go to my Advanced tab go to scroll effects and here's our vertical motion tab going to make sure and select that in an able vertical motion alright one thing to note is whenever you are sometimes you know isolating an element in transforming it using the scroll transform effects you may need to save it out to see the results so let me just add the one we're adding here we're going to do the first or starting offset to zero the mid offset we're going to keep at zero as well so this the so starting offset is zero meaning there's no offset it's not going to move away from its original location and then and it's going to do that at zero percent of the viewport bottom which is down here so since it's not moving we're not to worry about it but here in the middle here we're gonna move it that middle offset all the way down to zero as well make sure and this up a little bit and then we're gonna do zero because we're wanting it to gradually it's actually already set to zero we're wanting to gradually expand over nice and smooth almost like a linear animation as we go from the bottom to the top and for the ending offset it's gonna be pretty subtle so we're gonna do negative one all right so we'll see that happening in just a moment for the horizontal let's go ahead and click on horizontal enable that then we're gonna add the same exact well almost the same exact so zero percent sorry don't want to confuse you so zero percent for the viewport bottom at zero percent and then keep it at zero or one I should say yeah so the mid so the mid offset is going to offset it to 1 and then the ending offset it's going to be one negative one point five and that's going to be set to yeah that looks good all right let's save this out so we can see what that looks like all right so now you can see where it where that new location is it's kind of offset one upward and 1.5 outward when you scroll or horizontally so there you go it looks like I got something wrong I have a I think I have a negative added in the wrong spots it should continue to go upward to the top right but it goes back so I need to fix that let me go ahead and go back to my image here and somebody that looks good ending offset is it looks good all right I think I know what the problem is my horizontal one maybe should continue to go this way positive not negative let me see if that works okay there you go now it's continually going in the right direction which is what we want there's a couple or one more or scroll effect on add to this second image and that is to add some stading in and out so let's go to the fading in and out this one's going to have a starting offset let's go ahead and able it of 0% at the viewport bottom at 0% of the viewport and then for the mid let's do one see actually we'll keep it at was we do want to get 100% let's do but we're gonna break this up and this will increase the the amount of time we'll have it kind of in place in the center so we'll do a 10% gradual here so when it gets to 10% from the bottom it's going to keep this fade in and out scroll effect until it gets to 15 all right make sure we can see that 15 okay looking good and then at 35% it's going to be at a 70 percent opacity you can see over here it's already becoming transparent so as I come down you'll see that it's kind of hidden right and then as I scroll up it'll start to appear become fully visible and then go back to a 70 bit percent transparency and of course it with those vertical and horizontal scroll effects as well so all right really cool effect let's go ahead and add another image real quick to do that I'm just going to use my layers view here and duplicate that image we just created and edited and I'm gonna open up my settings create it's actually sitting on top of the previous one which is a good sign want to make sure it's exactly the same dimensions let's create add a new one there and we need to update this one let's go ahead and change the vertical let's just go to my scroll effects for the vertical we're just going to kind of increase it one more so that it goes upward a little bit more and then for our mid offset let's do excuse me for our horizontal motion let's set the mid offset to two and this one two three our ending offset that is and there you can see it kind of gradually going upward and to the right and then change our fading in and out let's start it at five percent this time and the mid let's do one hundred percent because we want to keep it I think that's the default sorry so it's the mid let's keep it at 100 percent but let's change these values here to 30% let's do 30 percent we're gonna start we want to start to see it fully at 30 percent of the viewport and hold it there till 40 percent actually we want to hold it for the rest so let's just keep that at a hundred percent and that's just gonna hold it so once it gets the 30 percent it's gonna hold it at that full opacity for the duration and that's basically it so let's go ahead and save it out see what it looks like on a live page here alright you can see that effect let's go ahead and add a a background here I'm gonna copy my background that I used earlier and let me go ahead and add it to the section here so and that's basically a simple gradient background and let's give it some padding because you can see it's kind of going above and outside of that section let's okay save that out now there you go looks like I'm pretty much where I want it I think it's the second one's expanding a bit too far I'm not sure why but starting in the right location might need to tweak that a little bit but that's basically it there's your effect now you're wondering how I get that 3d effect and sometimes if you use you know transform options on the same element that you're adding scroll effects there's going to be a conflict so this is kind of the best of both worlds let me show you what to do here let me go to my row settings and then I'm gonna edit my column settings and I'm going to add a transform to the column so there's no conflict there so let's go ahead and add a skew of 8 degrees make sure you can see that and as you can see it adds it to all of its child elements as well because you're actually skewing the entire column and let's go ahead and save that out and you'll see the effect happening in kind of a 3d alright pretty cool stuff I think see if we have any questions here because we're pretty much done sorry for ignoring you guys in the comments here let's see oh ok so uncle social about the boarders Adobe Illustrator can set the boarders to the outside of the path got it yes so it does there is a default way that it normally happens I know in Divi with you know CSS and the how you set it up but that's pretty pretty normal you can change that as well and CSS if you want let's see mr. B asks it's got a bad connection asks if it's going to be available for review later yes it will be available in our YouTube channel and also in our Facebook page so you can always view it later on no no problem Dibby Dibby needs an export static HTML button I'm not sure how to pronounce your name sorry app au um a one so I'm not sure I I think I know what you mean an export yeah so you can basically just get all of it kind of like a a page source type deal that would be helpful a good suggestion there let's see uncle social instead of padding to replicate the solid border effect could you have used a transparent border with with good question the answer is no because I actually that was the first thing I tried thought but it actually will show the image behind which is weird I know but or I forget I think it does show the image or something happens there that it's not what you want thanks Karen says very fun I agreed to be is great to design pages but I miss the export gotcha I mean there may be a way to do that easily I'm not quite sure what you want there but maybe someone in the comments can help with that all right all right so this would be actually useful for you know illustrating a quite a number of things so a lot of different applications again you can use it for screenshots of your own website just make sure they're all the same dimensions you can actually add a you know I actually fond mock-up here in the back and layer those images on top of it to make it more professional if you want so a lot of things you can do with that and all right very good uncle social one more thing comment here Debbie a humble WordPress theme plugin is now more feature pack than Adobe Dreamweaver ever has been it's crazy yes that is really crazy it's and it's just getting even more and more feature-rich to be able to do things in Divi that you would normally have to do in all those Adobe products so I agree totally awesome so hopefully we've learned something give a little inspiration going here but I think I'm gonna close us out if we don't have any more questions you just double-check the questions here all right all right well that's all I got for you this week guys thanks for tuning in and please be sure to subscribe to our blog newsletter our YouTube channel and like us on Facebook and don't forget to make sure you select to get those notifications that way you can be notified anytime we have something new for you like new live streams or freebie layout packs we release every week we actually have our next live stream which is coming out on Friday 3 p.m. Eastern the WP roundup and please be sure to check us out next week the next Tuesday at 3 p.m. Eastern for our next Divi use-case livestream thanks again for watching we look forward to seeing you in our next video bye you

Channel: Elegant Themes

Views: 10,400

Keywords: expanding layers scroll effect, divi tutorial, divi builder, divi 4.0, divi 4.0 tutorial, divi builder tutorial, divi theme tutorial, elegant themes

Id: rdWK5IosiCM

Length: 38min 31sec (2311 seconds)

Published: Tue Mar 10 2020