Divi Feature Update LIVE - Divi Scroll Effects

hello and welcome to the DB feature update live this is a show where we talk about the latest DV features in depth we discuss about them and also show you know pretty much how they're used so I'm really excited this week because I'm gonna be talking about our latest feature which is the DV scroll effects this feature is awesome so before I dive into the actual feature and what it does and a few examples I'd like to welcome you all please let us know where you're watching this from in the comments box below and if you can hear me loud and clear please also let me know before we get started right looks like he's checking to make sure that everything is working okay here so we are live here on Facebook and we also like live here on YouTube awesome right so we have uncle social here say good morning hello and happy Monday awesome good to see you uncle social now the teacher is not a counterfeit this is a this is an original t-shirt alright so we have I think it's Jo from Holland good to see you Louise from France we also have web solutions from Sri Lanka Richard Richard masters and we also have been Stephen from Stafford oh is that Stafford in the UK we also have been from Morocco we have pi ash from USA Febreeze oh please do forgive me if I don't pronounce these names correctly okay so I'm just trying my best here for breezes from Italy awesome we also have wow I come pronounce this but from Spain claudio from italy as well should kill saying hello you've got NIDA from dubai good to see you too should kill also from Dubai Oh even a few people from Dubai today that's awesome yes some man from Pakistan awesome awesome right Steven from Stanford awesome right it's good to see that we have some UK fans here awesome alright so let's get started with the show so what we're going to be talking about today are the scroll effects in TV so these scroll effects are really really awesome so what they do is these are advanced animations and transitions now these happen only when you scroll so they're not static so only when you start scrolling is when you start seeing these animations so they're really really cool and also any item can be animated so this can be a header it can be a module it can also be a section so is really really cool and I'm going to be showing you how this feature actually works so the first thing you need to do is to make sure you update the DV to the latest version so in order for you to see these updates you need to be running the latest DV update alright so now I'm going to in fact what I've done ahead of time is I've just gone in and I've just installed a premade layout here so this layout is is from our free layout pack so you can go ahead and also use one of these and also by the way I forgot to mention if you if at any point you have any questions please leave your questions in the comments box below and I'll do my best to respond to those questions all right so I've installed this layout so what I'm going to do is I'm just going to do a few tweaks here and so that we get off to a starting point right so now I'm just gonna come over here to this image here and I'm just gonna reset this so I'm just gonna look for weight was modified and I can see here that we have a margin top okay let's get a hit of that margin okay so now we have this basic layout so the first thing you need to do is when you when you want to use these scroll effects stays a new UI that has been added oops so first of all you choose what you want to animate so in this case we want to add animation to this section so I'm gonna come over here to my section settings straightaway you need to go to advanced click on scroll effects so this is where all the action happens so you can see here we can enable all these so this is the vertical motion we also have the horizontal motion fading in fading out scaling up and down rotation and blur so let's start off by adding a blur effect to this so I'm gonna select blur so make sure you select the item that you want to use and then you want to enable the blur now these now this interface here is very very important so the start and end position it slows down the animation okay the animation speed and then here in the middle this is where you can adjust the static on the actual page so let's say you want this part to do to remain as it is while you're scrolling this is where you adjust how long you want that to be and then the the view point and top view point this is where you can add your delay animation so let's go ahead now and let me and let's animate this so as you can see here this blur effect has not taken effect yet because we haven't added out our values here so I want to start adding my value now if you want to see how far this can go you can just play around with these and just make it massive like you can see right now it's in 78 and everything is just gone crazy okay but of course we don't want it that crazy so let's bring it down to let's say about let's say about 18 okay and then the starting blur again let's set this to 18 so now just by adjusting these two notice what happens when I scroll you can see now it blurs as I'm scrolling that easy now the next thing I want to do is to to adjust my viewport here so if I drag this to about let's say 8% and my top here is well there we go so now we can see that we've just added a very basic animation all right so that's great let's save this let's move on to the next item so let's say we want to animate this and we like this to move up as we scroll the page so to do that all you have to do now you know just here when we added this effect it was on the actual section now we want to do this on a on a modules just to show you that this can be done pretty much you know anyway so let's go ahead and do that so over here if we're gonna go into our module settings advanced scroll effects now here we are going to do the vertical motion so I'm going to activate it and you can see it right away as I'm scrolling it's gonna be scrolling up okay so it starts over there and then as I'm scrolling it is going up with my scroll so you can further adjust this if you want so let's say we want to delay this add that and let's say we also want to split this so we can have this in the middle while we scroll so let's take a look at that it pauses there and then it continues so this is what these this area does here so this just introduces this the time you want the animation to stay on the screen so the longer you edit you know the the longer it's going to be on the screen so let's play around with this setting one more time so let's say let's bring this this down to 8% right so let's say we want this longer on the screen right in the middle there so now let's scroll there we go and there it goes okay so that's one quick way of adding our vertical scroll now you can also add multiple items onto this animation so it doesn't mean that once we have this vertical scroll that's all we have we can actually go in and add another one on top of what we have here already so let's say we want to add blur as well so you can add your blur right in the middle there I know right now we cannot see it clearly now let's add a bit more okay so you can the starting point there at 40 but of course ideally he don't have it crazy like that I can mentioned so let's bring this down so I'm just gonna bring it down to about eight okay so as I'm scrolling there it's it's blurry and then as I approach the center of my viewport it gets into focus and then I can also add my ending blur so let's set this to about eight as well there we go so as I'm scrolling off you can see that it's blurring so as I mentioned these these animations are happening as we're scrolling so let's do it one more time so there the main section is blurry now this one comes into frame okay it's in focus and then it blows again as it goes off the page great now let's save this and let's also add a bit of animation to let's see what else we can animate but before we do that any questions so far any questions so far looks like the chat is really quiet actually that's a very good point uncle social says yeah these blur effects would be good for an opticians website if you wanted to increase scales yes absolutely and now I agree you can find a creative way of actually using that right any questions so far in fact let me check what's happening here on Facebook on Facebook here we also have quite a lot of you tuning in this is awesome okay so no questions so far that's very interesting okay so if there's no questions I would appreciate it if you give me a thumbs up so Facebook YouTube please give me a thumbs up then okay yes I think you can right-click and extend these effects let's try let's try it out right let's try this switch around let's see if we can extend these so back over here I am going to right-click you guys like putting me on the spot you know I haven't tried these these features yet but there we go extends style image tiles no hang on let's go back gonna make sure I'm in frame here okay there we go so let's see if we can extend this so I'm gonna right click extend image tiles yes we can extend them and we can also make these styles default so if you're creating a template and you'd like these defaults you can always go in and make this default so your template so every time you add an image it's going to have the same style so yes we can extend image style so you can see here extend image styles you can say on this page on this row on this column and so on but I'm not going to do that yet we may find a use later on as we're working on our animation here okay so let's work on a totally different animation so I'm just going to get rid of this section here I don't really like that alright let's try a zoom effect so the zoom effect I'm gonna add it on let's see why don't we add it here on this button here so I'm gonna go into this button click on advanced scroll effects and now I'm gonna click on the scaling up scaling down I just call it the zoom effect you know I'm gonna enable this so again this is right now we can adjust the scaling so mid let's bring it up a bit you know let's bring it up to about 114 so just by that little tweak you can see as I'm scrolling I know it's very subtle you can see there it's it's it's getting bigger and then it gets smaller okay I guess maybe this is not the right example here so let's disable that and also that's the really cool thing here if you are not if you don't want these animations you can just disable them by just clicking here and then it just goes off right so let's add some animations here so here I'll also want to add let's say it's zoom effect I think we can really create clearly see it over here so I'm gonna go into my settings scroll effects zoom up and down and then I'm just gonna scale this up to about let's say 122 okay I think that's noticeable okay great now let's tweak this and make sure that it's working okay so as you can see it's starting off at 70% and I don't really want that because it's starting off smaller than the rest I mean I guess this could be an effect that you may want but you know what I wanna start this at 100% okay just like the other ones so let's add a hundred percent here okay so now it's the same size with all the other guys so that's our starting and then our midpoint here is that 50 but you know what I wanna increase this because I want this to stay on the screen for a little bit and then move off right so let's try it now so as I'm scrolling here you can see it's getting bigger bigger bigger it stays on and then as I'm going off it starts getting smaller right I know we can't see these clearly let me save this exit the visual builder let's save this one more time so what I'm gonna do now is X the visual builder so you can see all these effects clearly right so there we go so we added a blur effect here so there you go you can see blurring and our image is gonna come there there we go and as I'm scrolling down those three images I'm gonna come into effect keep an eye on that keep an eye there it's expanding and then it gets smaller awesome right let's go back in so any questions so far okay so let's move on and let's work on something else so I've done the blur effect let's do let's do a different one let's do a horizontal effect so I want to add this on to it's gone from on to this image here so I'm gonna click on section settings advanced scroll effects now let's do a horizontal motion okay so here now first of all you have to make sure you enable it and then you can adjust your viewport here okay so you can adjust where you want it to be as you're scrolling so now let's see what the basic one looks like so if I scroll here there it is pretty cool and also you can start you can also adjust the the starting offset so as you can see here you can play around with this so I'm gonna go to let's say 8 okay so you're gonna stop there but this is not a good example because ideally you want this information you want people to be able to read this information so let's disable that let's move on to the next one I think this one here can work okay so let's save this and let's add our effect on this one here so I'm gonna go to my module settings advanced scroll effects okay let's move on the horizontal one now if I scroll you can see there it's moving as I'm scrolling and as I mentioned before you can also go in here and further adjust this so if you want this static at some point in the middle of the scroll you can just add its two points so now let's try it one more time there we go so it's moving and then while I'm in the middle of the page it's sort of like stops and then it continues great and there's our animation here so pretty much you can animate anything you want and let's do one more here so let's fade this image in and out so I'm gonna save this one here so now I want to scroll and fade this image in and out so again I'm gonna come over to my advanced scroll effects fading in and fading out activated then now I can play around with my starting opacity which is gonna be zero here and the midpoint is gonna be 100 and then at the end I want this to be zero okay so let's see how that works so you can see here there is nothing there on the on the right now it's coming in now it's fully visible and as I'm scrolling it's gonna start disappearing look at that now it's gone so this is really really really cool and you can actually start using these effects on or on your existing designs so it doesn't take away from what you've already designed so if you're just joining us this is the DB feature update live today we are talking about the DV scroll effects this feature is really really awesome it adds your animations and transitions to all your modules sections and rows as you scroll on the page so this adds another layer of creativity onto your existing websites and I'm pretty sure that all your clients or even your own websites will look really really awesome once you start adding these but the rule of thumb is do not exaggerate it because remember design is about communication you want people to be able to come to your website read information nice and clearly but you know what if you if it turns into a very crazy mishmash of things happening on the screen it takes away that design aspect of of your website so make sure you use these in a very subtle way and don't go overboard with them just you know just use them in a in a way that is that enhances the communication of what it is is on your website so as I mentioned this is the Divi scroll effects these are available right away if you have an updated deviate go ahead update Divi and you will be able to see these updates now I'm going to take a quick look here at the comments Clark says done the update still no scroll effects what version of Divi are you running oh just a note here uncle social just mentioned that the score in fact it works on tablets and mobiles unlike hover hover effects okay so to be honest I haven't even tested that so thanks a lot for that if you've tested that that's really good to know o'clock please let us know what version of Divi you're running so it could be that you haven't updated evey yet oh you haven't done it correctly it could be that and also if you want to get access to these scroll effects let me just show you again quickly where you can find them just in case you may have missed this so I'm just going to save this right so to access the scroll effects all you do is you go to the section settings and you click the Advanced tab so this is where you go the Advanced tab and then all the way down here this is where you can go to your scroll effects and this is where you can find them right I'm just taking a look here the questions sophiana have you tried adding these onto onto the theme builder because that may be what you know what you may want to do here Sophia and I think I have answered your question you can do these if you go to your theme builder in fact you know what why don't you try and do that so I'm just gonna save this and see if all this works in the theme builder so let's save this oops you know I like testing stuff that you haven't done before it's sort of like puts me on the spot but at the same time it's exciting so let's see if this actually works on the theme builder right some come all the way down here theme builder let's build a global header here so I'm just gonna build a basic one here I'm not gonna go crazy with this so let's add our menu okay let's use that as our main menu save that and let's just add a button here mothers will add a background color so let's go with this dark background and let's just do a few adjustments here for spacing to zero okay there we go and also here on our menu I'm just gonna remove the background and change my colors there okay so over here let's just use in color it's easier to read and change our font and let's make it all caps and increase the size a little bit okay so we've just quickly designed our header here now let's see if our animations actually work so if I come over here advanced there we go scroll effects there absolutely they so we can actually use these scroll effects on our theme builder so I was quite nervous and because I wasn't sure if if we could get these on on our team builder put's yes you can see here that we have our scroll effects but to be honest I don't think it's a good idea to have these scroll effects on the header or even on the footer those items need to be static and they shouldn't be pretty much obstructed in any way so yes the feature is there but just use that carefully let's take a look here and see lay says-- did you see the question about the effects under the sliders or slides yes I mean these effects can be I mean are available pretty much everywhere in fact let's go ahead and okay I'm just gonna save this these effects are everywhere I mean you can find them on heading sections and modules alright let's save changes here and let's go to our page so let's add a slider here so I can just show you quickly that you can also have these effects on sliders as well okay so let's add a new section a regular section single column set a slider okay so I'm not gonna go into the design because this is not a live stream about design it's just a feature update so let's say this is our slider factory you know what them just add a background image here because this looks really ugly so I'm gonna go with let's go with that okay so that's our image right there so now let's say I want to add the same effects I can come over here to scroll and you can see here I can add you know my my effects here on this actual slider so I can add my vertical I can add my fade in fade out if I wanted to so you can see here I can add my ending at zero I can add my static position here just increase it a little bit okay let's have a look here okay so let's let's save this yeah sure if you can see that but it is working but you know what let me do something dramatic so you can actually see trying to look for something very dramatic here hmmm this is strange the blur is not working that is strange let's go back in one more time hmmm this is weird right you know what looks like it's not working on the slider so I guess what I could do here is let me add it to the actual section and let's see what happens there yeah he looks like this is not working in fact all my fix are not working what did I do wrong I think I need to reload my page cuz it looks like all my effects are not working yeah something happened everything is reset yeah you can see here yep everything was reset and you know my computer fan is running like crazy so I guess it's because of this livestream that things are just going crazy on my computer but let's go back in and see what we can do here with this so I'm just gonna add oh there we go looks like it's back now there we go it's working yep now it's working right so let's add our slider one more time and then I'm gonna do one more example so I'm gonna enable the visual builder here so sometimes if this happens you may want to clear the cache or exit the visual builder and then go back in right so let's add a slider here so I'm gonna click here on this plus button and add our slider yeah my computer has gone really really really slow now so you can see here I mean right now I'm actually stuck I can't even do anything I guess this is because of yeah my computer you know it's just the fan is actually you screaming crazy right now so I guess it's because I'm trying to do this at the same time with the live stream so this is why I have a serious lag so you can see here I'm trying to click and it's not working yep things are very slow here let me just try and reload one more time yeah things are quite laggy here my computer has just gone really really slow on me so unfortunately I can't go in and do that but we are going to have even more tutorials on how to use this feature so let's take a look here at some more questions and perhaps maybe while I'm taking questions here things can die down here in my browser so I can show you a few more examples right kevin says Nick give this man a MacBook Pro yes I think we need to do a campaign where where you can you know pretty much send emails and just bombard Nick with all these questions I email saying by Mac and Mac Brook you know that would be really cool because all my days this is a very very old machine I think it's about what seven years old now so I'm just overloading it with work so yes that would be really cool hope Nick is watching this right I'm going to take a look here at okay let's have a look you know what I had one more feature that I wanted to show you on this scroll effect and fingers crossed I hope this time is gonna work because it's really awesome I want to show you how to add some spinning effects while you're scrolling on your screen so let's try that and see if that's gonna work so it looks like the computer has quiet it's quiet now it's not really screaming like it was before right so what we're gonna do now is I'm gonna add some spinning facts here so come over here to advanced scroll effects and we can add rotation okay make sure it's enabled and you know what I can hear the fans kicking in again this is so messed up right so let's save this and let's see if I exit the visibility' if that's gonna work right so I can see here on my section everything looks black it's working so let's scroll all the way down our image comes into effect there there's our horizontal animation and then upcoming we're gonna get that zoom effect okay so let's see if that image there we go that images is spinning did you see that there we go so you can see there the image is spinning so you can actually go into your gallery here and just you know add different images spinning at different at different times because the really cool thing about this is well once once you go into the actual Builder you can change the positions of where this is spinning so let's go back in here to a gallery and see okay so this one here we've really done that one so let's work on a different one here so let's go on to this one here click on advanced scroll effects and this time I'm going to do a 45 degrees here save that and over here let's do a another one so we've done 45 let's do 270 save that so let's take a look now I'm gonna save this and exit the visual builder so keep an eye on the image gallery okay so now let's scroll all right keep an eye on the image gallery there we're almost there there we go so you can see our images here spinning at different times there we go so they that's another way of how you can play around with this feature and add more animations to to your to your site listen I'm not being nervous I mean I don't know why you think I'm being nervous why do you think so okay you want to see this in the phone sighs all right let's do that so let me switch back over here and oops so let me shrink the browser okay so this the browser there and you can still see the animation happening there so you can see it actually works and this start from the top actually so there we go it goes into focus and then it goes out of focus and then watch the image coming up there Eric so as you can see it actually works but you may want to adjust these on different mobile mobile devices so let's say you want some of these to show on mobile devices you can activate that or disable it so let me show you quickly how you can do that so if I enable visual builder here I can actually disable some of these on mobile devices if we need to so let's say the effect that's happening here we don't want it on mobile devices all you have to do is to click advanced scroll effects and then you can see here that we have this little icon that we normally get you know everywhere on our settings so if you click on that so you can come over here on tablet and you can make for the adjustments if you want to here and then on the phone you can also make for the adjustments so it's pretty much up to you how you want this to look on different screen sizes okay so any questions any questions I'm just taking a look here at Facebook as well Eric here says do we need to update DV yes absolutely you need to be running the latest TV so in order for this to work you need to be running the latest TV so make sure you go to your updates and update TV to the latest version okay let's have a look here and these days why do you say so often that it is messed up so much I don't know what you mean if that's something that I say often I guess it's some it's one of those things that I say without even realizing that I'm saying it okay let's take a look here let's see if we have any more questions Stefano says I want you t shirt unfortunately I only have one when we did the the Divi Meetup it was I mean I only had one because I ordered the the wrong size so one of my colleagues actually gave me one of these so unfortunately I cannot give you this one but if you do come to where we going would camp what camp in Portugal I may have a t-shirt for you so just remind me okay Java VSA is this slow down the loading of the page to be honest I don't know if it really slows down the loading of the page I haven't tested it out but usually with these features they don't really you know slow down your computer at all but we do need to make extensive you know test and compare and see you know what it is you know then the differences between the two but my answer to that is I'm not sure okay ah cavi that's actually a very good suggestion and I will say this to the team in our meeting tomorrow having these t-shirts in the the marketplace will be really really awesome Louie says I want that t-shirt too right should I make the promise okay if you remind me okay if you remind me in Portugal if you do come to word camp in Europe in Portugal I will try and get you know your sizes for you so drop me an email with your size and I'll talk to the team and see if we can get some t-shirts but if not I'm really sorry but I'll do my best okay so just those two I don't want to get into trouble leigh says i haven't noticed much on my updates so far hey what do you mean by that i mean when you say you haven't noticed much on my on your update so far Oh Pedro is coming too to Portugal that's awesome so Pedro make sure when you when you come they just give just remind me about this livestream Fabricio says don't you really like my question what's your question for breezy oh maybe I might have missed it let's have a look I'm gonna scroll back now and see what your question is you know sometimes on this live stream you can you know you can just miss things cuz so many things are happening so fast okay for a blizzard used to save me time just type in the game please and just add it on there find it for breezy so you know add your question again one more time Clark says me too alright so Wayne he says here you fail to receive a notice on the live stream right that's what you need to do if you haven't done this yet if you haven't done this already please hit the subscribe button and hit the bell notification because if you don't do that sometimes you get these updates and sometimes you don't get this notification so right now please if you haven't done so already hit the bell notification I mean hit subscribe and hit the bell notification if you do that you'll be guaranteed that you'll get this update Fabricio I'm still waiting for your question I haven't ignored you add your question again please so I can respond to it I'll Aiden says come to Iran please okay so okay so the good answer to your question is in fact let me read the question out so it says do you think it is possible to obtain effects that go to discover other contents or overlap as on this page I don't think you can do that this feature here is just for pretty much animation animating single items on the page so it doesn't really communicate with other content and reveal other content it's just animating that those particular items on the page okay let me respond to a legends saying come to Iran please yeah I would come but obviously you have to what can I say I would need someone that I know when I'm when I'm on there and when I'm over there because I mean it's brand-new place for me to me to visit I've never been to the Middle East or those areas so yes if you are there and you can be my guide yes cool we can make a plan I don't mind I'll actually like visiting so many places okay any more questions right I'm quiet here because I'm looking at the comments tarik full-screen menus I think I think you can achieve that in your designs if by creating your your menus yourself in the in the in the Builder so you can try and just play around with the with the settings there and you can have you know four menus oh you mean full screen menus you know something that covers the whole screen correct me if I'm wrong I'm not sure if that's what you mean I just thought maybe you want full screen meaning it's called edge to edge but full screen I'm sure those are updates that will be coming very very soon right let's have a look here do you have any more questions listen says your welcome to India - bro yeah I mean why not to be honest I'm really serious about this I love traveling I mean when I first went to Spain Barcelona it was awesome I mean in fact meeting the elegant themes team there it was really really cool and even Mexico when we're in Mexico I mean that just because I haven't really traveled you know to be honest all up in trees a few countries but now that I've actually been to about four or five countries it's something that I want to explore and I don't mind going to all these you know countries you know India I mean as well I heard it's a fascinating place so yes out am I going to India - let's have a look here alright guys I think we have come to the end of our livestream I think we've covered quite a lot here this is going to be available on our YouTube channel and also a Facebook channel so if you joined us late you can always go back and watch this first you know the final thing I'd like to say here is when you use these scroll effects please use them in a subtle way don't go crazy with them because you don't take away the design and the communication aspect of your page because remember in web design it's all about communication it's not about just adding decorations which do not really bring value to the user so make sure you use this in a way that complements you know whatever it is that you're designing don't just add animations for the sake of adding animations so that's what I'd like to say and also these scroll effects you can get them after updating Divi to the latest version so make sure you're running the latest TV and once you do that you can access these by pretty much going here to your Advanced tab and all the way down here scroll effects this is where we have this feature so it's also available on menu it's also available on ROS modules and also sections so pretty much is everywhere you go into it and make all your subtle adjustments alright guys so I'd like to thank you all for tuning in onto this live stream I'd really appreciate your time as you can see you can see I enjoy and curator I do these live streams because I get to communicate with everyone and you know especially reading all your questions I'd really love this community so I'm just hoping that we get another feature update so so that next week Monday I'm back again here on this live stream alright guys this does it for this week thank you very much for watching and I'll see you again the next live

Channel: Elegant Themes

Views: 13,281

Keywords: divi scroll effects, Divi Theme Tutorial, Divi Builder Tutorial, Divi 4.0 Tutorial, Divi Tutorial, Divi Builder

Id: Jh_15Cvwg3w

Length: 56min 9sec (3369 seconds)

Published: Mon Feb 10 2020