How to Create Section Divider Scroll Effects in Divi

well hello divination and welcome to a brand-new welcome to a brand-new livestream divi use-case livestream that is sorry I'm struggling this day but today we've got something exciting for you every week we show you how to add new design and functionality to your Divi websites and actually today we're going to be showing you in this livestream how to create section divider scroll effects in Divi don't forget to check the video description for more info on this use case and let's go ahead and jump in and get started first of all let's go ahead and make sure y'all can hear me give me a thumbs up in the chat if you can welcome everyone hopefully we can have some great learning experience despite our circumstances we can hang out a little bit learn something new about Divi all right Diego welcome and Bryan thanks for the loud and clear alright looks like we're ready to get started so just a little glimpse on what we're gonna be doing today a little sneak peek you can see that if you've familiar with Divi at all you're familiar with the new section dividers that's available within a section in the section settings and that's what we're going to be looking at today and that is a very useful tool for creating those wonderful transitions between page content on your page and today I'm just going to show you how you can introduce the new Divi scroll effects to these section dividers and add some cool motion effects so here this is a real simple one we'll go slow you can see how the divider is slowly moving across the page as it wraps around that content there here's another example and here's an overlap Bing one this is a real cool effect here and so this is kind of what we're doing it shouldn't take too long it's very simple to do but it will introduce you to a concept that will allow you to be really creative in your own design making some really cool motion effects with those section dividers so let's get started I'm gonna create a new page and it's going to make sure and deploy the Divi Builder here and again please be sure to check out the blog post that went along with this use case it went out there this morning it's on our blog right here so check that out for more information on this as we go along let's go ahead and build from scratch on this design and let's go ahead and give our first section this is going to be our content so we're not going to start with our divider here so I'm just going to start with a text module in this one column row here and I'm going to give it an h2 header and please ask any questions that you have along the way and the chat hopefully we will or I will get to you it as soon as possible and if I can't answer it hopefully someone on the chat will and just a reminder these videos will be available on our YouTube page and our Facebook page for viewing later on so please check that out and if you haven't subscribed yet to to our channel please do so so you can get notifications every time we have a new video for you so thanks Wayne from the UK says hi hope you are all keeping safe I as well and probably hunkered down in your house like I am today and so I'm I'm glad to be hanging out with you guys let's go ahead and jump in and get started I'm gonna create my h2 heading here so that's just a little piece of content and after that let's go ahead and add our margin to our section all right so I'm gonna exit out of here we're gonna come back to this section divider excuse me this section amount sorry text module and we're gonna go to our section so I'm gonna edit my section here because I need some for testing purposes I just need some breathing room to scroll around here so just gonna add some top margin to this just temporarily we would take this out of course if we were doing or adding it to our own site so I added some top margin of a TVH which is 80% of the viewport height and let's go ahead and leave that there I can actually take out the padding here I'm gonna take out the bottom padding of this section as well all right let me get back to my text module now it's way down here and let's go ahead and select it and open it sorry so my section content my text module content I'm going to add update my text font let's make it Roboto always like that one and let's make it centered see this and let's get down to the h2 tab to target my heading to font settings and let's go ahead and make this a different color let's make it a light color kind of like that light greenish blue there and we're gonna have a dark background so it'll look nice once it's done and for the size let's go ahead and make it 80 pixels on desktop and let's deploy those responsive settings and let's make it on tablet let's do 50 and then on phone let's do 30 alright easy enough now I'm breaking this content it's going to consist of a heading and a little snippet of text here this is what we're going for so here's my heading here there's my little snippet of text but I'm gonna break it up into two sections so that I can add my divider my section dividers in the middle you can't really tell because they don't have any height on them but I'm gonna add them in the middle that way it kind of serves as a middle point for our content and that way it'll kind of fit nicely behind our two blocks of text there alright so let's go ahead and add a new section new regular section below the current one and let's give it a one column row let's add another text module and let's go ahead and update the style a bit let's do the Roboto font again and for the text color let's just make it like a really light gray let's bump it up to 16 pixel text size and make sure my line height is 1.5 M's and let's do my text alignment to Center to match the design here and I'm gonna give it a set width so I'm just gonna set the max width to 400 pixels and align my module to the center there all right it looks like I have a little bit more spacing than I would like let's just go ahead and save this and let's go back to my section containing this little snippet of text here let's go to my section settings and I'm going to this is very important for this design by default you will have indivi your settings will have a background set for your sections even though on the back end it says that you don't have one you if you truly want a transparent background you'll need to click on this to add a background and just bring this dial down all the way so that it is truly a transparent color and and that'll make sure you have no background behind that section and you'll be able to see those dividers styles behind it and that's what we're going for we make sure that this section as well has no background so imma do that so both content sections here need to have no background or a transparent background and let's go ahead and get rid of this top padding on the second section just to kind of sorry wrong one just to kind of bring those two blocks of content together a bit more all right so that looks good let's get some more scroll ability down there below this section so again I'm opening up that section settings Analysts adds some margin a TVH to the bottom so now that I have that margin on top and bottom I'll be able to scroll up and down for testing purpose all right so let's go ahead and start creating our animated section divider and that's gonna exist in between these two blocks or at least two sections here all right and let's do that let me go ahead and actually you know what I'm gonna deploy it's my new favorite thing these layers so I'm gonna deploy the layers feature here so I'm open up my settings and my head's in the way so let me move my dial over here to the left and if you see right over here my settings menu sorry not my dial my settings menu you'll have this new layers icon here so I'm gonna click on that and that's going to deploy my layers view box so I like that I'm gonna keep it over here for now bring my settings menu back in its bottom placement and now I can you know like you would in a like a photo editor like Photoshop or sketch or something you'll have like a layers that you can actually view and edit and and make makes it easier to select things that are especially being overlapped or don't have any height or are in a fixed or absolute position things like that it would be harder to kind of click on it when you're in the visual builder this makes this so much easier all right so we need to create a new section so I can do that one of two ways I can do it here like normal or I can actually click on this blue I don't know if you can see that I mean su min there's a blue plus icon next to my section in the layers view and I can click on that let me get out of here and when I click on it you'll notice that it pops up insert section over here in the visual part of the Builder so I can go ahead and add my regular section and that ensures it's in the middle there which is what I want I don't need a row for this the only thing I'm going to need is the actual section because the only thing I'm interested in for this section is the dividers so this will have no height no padding nothing we basically just want the divider styles to show up but I do want to make sure again and take out the background so I'm open up the section settings and again give it a transparent background and now I can start you know adding my divider styles actually before that I'm gonna do I'm gonna take out the height so I'm gonna set my size and give it a height of zero so and then I want to make sure and take out that default padding so now it should be flush and basically have no height then after that let's go ahead and add our divider styles so I'm gonna go to my dividers here this is where I can add my top and bottom dividers let's start with the top one I'm gonna add this one here never never took the time to name these but I'm sure you have your own names for them I am NOT going to give a name for them right now if that's what you're looking for I think it's this one that I did yes so this one here and let's go ahead and do a color here let's do this dark purple and I want to give this a height so the divider height here I'm going to use a VW length unit which makes it kind of a scale nicely when you adjust the width of the browser so it's kind of like a tip there to use the b/w length units for section dividers if you want that section divider to look the same as the browser like on tablet and phone and things like that all right so let's so let's also do a point six so this is a little trick for our section dividers if you want to you can kind of bend the rules a bit and you don't have to repeat it by you know one two three times you can actually do it by a little decimal value there so I'm doing point six there that kind of makes it kind of wider bigger whatever you call these hills so let's go ahead and add this one divider flip let's make it flip horizontal and now let's go back up and add a bottom divider which we want to for this one you can mix it up but I'm going to match it with the same one and let's give it the same color I'm using solid colors here you might be tempted to use the transparent colors here but you might find that it's difficult to get rid of especially in different browsers there's this little thin annoying line that shows up between these dividers I find it just easier this is happens especially when you're doing what I'm doing here you're stacking them on top of each other which is not the normal use of a section divider and sometimes you'll have a little thin line there if you're using a transparent background if you know what I'm talking about good if not don't don't be too concerned with it but just in general it's better to use a solid color here for this kind of thing alright so I'm gonna do a divider height to match it's 220 V W and let's do the divider horizontal repeat two-point let's see-oh point 5 this time a little bit different and let's go ahead and adjust our divider flip both horizontally and vertically you can play around with those how you like I kind of like the way this design looks so I'm gonna stick with it now we're ready for scroll effects so to do that we're already in our section settings just go to the Advanced tab go to scroll effects and here's where we can have the fun moving this stuff around I do want to pause we have a question from a couple of people here let's see asam Kelly I'm sure most people know this bow why use vh + BW instead of pixel actually real quick all you can all you need to do this a great question and it's I have a very informative article on this so just search for length units on our blog I'll do it really quickly and find this post here and a guide to understanding Appliance applying CSS length units and it's going to basically cover everything you would need to know about the differences but the short answer is vh + BW are relative to the browser width and a pixel is an absolute and it will a length unit which means it will stay the same no matter how you resize the browser or the container that it's in hope that answered your question that was a good one though uncle social says let's see Jason is about to refer you to his blog post on elegant features yes but he's busy so I'll do it for him thank you very much you called it all right good job whatever uncle social said some there you go there is an echo you've been you've been with us for far too long uncle social you're starting to read minds ok let's continue alright let's go and add our scroll transition effects so what I want here is to move it from left to right to add some motion but I also I'm gonna add some horizontal motion but if I do that just to show you here I'll close my layers view for a moment and I if you can see as I move up and down you can see kind of the where it breaks off at the end right so we don't want that so to compensate for that we also want to add a scaling up so we want to make it larger so that we won't see it on the right and the left so that's kind of the main idea here is to scale it up make it bigger so that we can move it from left to right the same concept goes for things like what's that called the Ken Burns effect or the parallax effect uses the same concept makes the background image bigger so you can move it around in the background all right so let's go ahead and add our horizontal motion let's just keep the defaults for this one but I do want to make add some scaling up and down as well but for this one I'm gonna do my my let's see okay here we go yeah I want to make it 200 to start so let's go two hundred percent view part excuse me viewport bottom you just make sure you can see what I'm talking about here so on my set scaling up and down you move this over my I'm gonna set this viewport bottom starting scale to 200% that's going to basically double the size of my section divider at the very start at the very bottom of the the viewport when I'm scrolling so as soon as it becomes visible it's going to be 200 pixels 200% scaled up so when it reaches 50% actually I'm gonna break this up into two values so that it'll stay at a certain percentage in this little midscale area here so I'm gonna set this to let's do 150 so that's 150 percent and it's gonna hold at 150 percent between 45 percent and 65 percent of the Beaufort and then it's going to end let's do 150 alright so there you go scroll out here or zoom out and so now when I go to the right and left our scroll up and down you can see that the the right and the left cutoff points are being hidden on the left and right side of the browser which is what we want all right so on I do want to adjust this on tablet a bit because it will show differently like because getting back to the question from Assam earlier about the viewport excuse me the length units the this here the horizontal motion is actually using pixels in the value so the starting offset from my horizontal motion by default is for at zero percent and then negative for at you know a hundred percent of the viewport so what that means is for basically is equal to 400 pixels and so when you get to tablet because it's a fixed or an absolute length unit of pixels when you move it over 400 pixels on tablet it's it's not compensating for that smaller browser width so it's going to move it at a greater distance because the other you know the divider is shrinking so that's why we need to adjust it on tablet so to do that I'm going to give it on my horizontal let's just make it three and my starting offset make it three and then my ending offset let's do let's see what do I have negative three I guess so there you go and that should do it almost let's just do negative two I guess we have to play with it just to make sure you it's not moving too far but you get the idea and let's adjust the scale as well on tablet let's do we're gonna make it bigger so I'm gonna start off at 400 so basically double the size on tablet maybe that's too large but it's good for now and then let's do one let's do 300 in the middle there and then let's do 400 on the end there you go so on tablet it looks pretty good I'm gonna save that out all right let's check any questions asam thanks its thanking you mostly uncle social for helping alright I have a question from LA here ooh sorry if I'm mispronouncing your name any offer and the works on the home let's see in corona buyers time any offer to two who works in the home in crime I'm not sure what you're getting at if it's a offer from elegant themes like for our products maybe is what you're getting it I'm not sure but I'm not I not to my knowledge that we don't I don't think we're having a special offer for this but good question let's continue on if you are just joining us I do want to welcome you to this Divi use-case livestream that we have this week and we're showing you how you can add a section divider scroll effect and that's what we're doing here basically adding scroll effects to section divider so you can check out more info in the chat by clicking on the link to our blog post that goes along with this so let's go ahead and get started or not get started let's continue we're basically done our first design so we've added our section divider scroll effect to this one and it sits nicely behind our content and now I basically want to show you how easy it is to create new styles and you could probably already guess the easiest thing to do is just to deploy the layers view again and let's go into our section our middle section that contains our section divider styles go back to our dividers and we could change the divider styles on the top and bottom to something like this and get a brand new design see that one you can also let's go ahead and save that and let's check out what that looks like on the live side here so there you go let's go ahead and one thing you can also do because of this kind of layout is to duplicate the section and because it has no height to it you can easily overlap section dividers on top of each other really easily and it creates opportunity for you know all a whole lot more creative movement in the background so I'll show you what I mean just getting back to the example here that we're gonna do as you can see this is actually three layers of of sections with each with a different section divider color and a different section divider scroll effect and and so it's pretty easy to do all you need to do is duplicate that middle section with our divider style and well actually I'm gonna I'm gonna actually delete that one I'm gonna go back first before I start duplicating and I want to get the divider style that I want I'm going to change the divider style to this one here that you can't see because of my head here we go so that one and let's match it here I like this one because it has some kind of transparency in the top and bottom portion which allows you to see the colors of the other ones behind it so let's go ahead and save that out and let's duplicate our section now alright so it'll look the same because it's actually directly on top of the previous section and it has all the exact same colors and scroll effects so it's gonna look like nothing happened but something has so let's go ahead and click on the new section that we made and let's open the settings let's change up our divider color here let's choose this bright green and let's do the same for the bottom bottom is the top in this design there you go and it's still directly overlapping because we need to adjust the scroll effects kind of offset the design so let's go ahead and go to Advanced tab let's go to our scroll effects and then for the horizontal motion scroll effect let's go ahead and do start our scroll offset at 6 it's basically we're just kind of adjusting these values to kind of offset the movement and let's end it at negative 3 alright so I like how you can actually see the results as you do this when you scroll up and down in the visual builder so you can see it's starting to create that kind of blending and overlapping effect and then on tablet let's go ahead and adjust it to 3 starting offset and let's do negative 3 which is I believe the default but yeah so negative three ending offset all right looking good let's go back to desktop and let's go to our let's save this one actually and let's duplicate it this entire section that we just created with our new section style or divider style and let's open up our third layer our third section if you will and let's change our color just like we did before with the last one this time let's make it a lighter purple and let's do the same for the top and bottom divider all right and let's update our scroll effect let's first do the horizontal motion on desktop which is needs to be set to three starting offset and the ending offset is negative two let's see what that does by scrolling up and down here good let's see let's just keep it like that for now and let's save it out and you'll notice that this lighter purple is on the front if you want to change the order of what what section is on top of the other you can actually move the sections here the the one in the bottom is going to take precedence it's going to be stacked on top of the one before it or you can open up the settings which is what I'm going to do them open up my first section divider settings and go to my Advanced tab go to my position settings scroll down and adjust the Z index for my section and I'm going to up it one and so now that section is going to sit on top of my other ones and let's go ahead and save it out and let's check out the live version all right and so you have a nice unique colorful motion effect for your section dividers all right let's see if we have any questions so some another question here I missed how these stack without being placed above or below the other dividers so good question they are let's just do a quick look at the wireframe view to just kind of show you the setup here so our first section was a Content block basically that holds our our header and that's this one here and then the bottom section is what holds our text body or a little text block here so these are two sections and in the middle are our section dividers these are all sections that have been given a height of zero pixels so that's why they're stacking on top of each other they have no height whatsoever but you're still able to see the section dividers because they are overflowing outside of the section container if you will so they are stacked on top of each other with without any spacing whatsoever like padding and they have no height so that's how they're stacked and then we just add those section divider styles to each one of them and then they overlap nicely so hope that answers your question alright let's go ahead and see what it looks like on mobile hopefully I didn't miss any steps along the way I'm just so alright so here it is on phone I think what's happening here is my header is jumping on two lines so I didn't expect that that's pushing this block down a little bit farther but this is how it would look on a phone and let's do a tablet here so you can see the section divider styles adjust nicely and you can tweak those values however you like Wow okay so let's go ahead and see if we have any more questions before we wrap up for today thanks for all of your questions okay we got one from uncle social can you fix the two line mobile header for my sanity if that just the font size setting I think I know what you're talking about but I'm not quite sure sorry I can't answer that right now but hopefully it's it sounds like it's a common issue or but if if there's someone here that can address that that would be helpful let me check facebook over here alright so we have one from Domenico how can you adjust the z-index of the dividers I did answer that but if you missed it just real quickly just go to the section that you want to Oh looky here so if you've run into this issue see it doesn't look the same for some reason just go into the settings here and update the this might be a little bug if that we need to get ironed out but the divider horizontal repeat here just adjust it back to what it's supposed to be sometimes it kind of resets on you I'm not sure why I figured that out while I was building this but once what you can do to get back to your question is to click on the section that you want that's holding your divider style and then go to advanced position and then adjust the z-index for the entire section as you can see this one's set to one by default they will all be set to zero and so basically you just give the higher the index to the one you want to sit on top good question another question for Michael social in the mobile preview you just gave us the moving section dividers wrapped on to two lines that was all yes exactly that was the reason why it had the the issue I think I gave it too much of a - meaning - too big of a size on on phone all right guys all right I think I'm just gonna wrap it up here thank you guys that's all I got for you this week be sure to subscribe to our blog newsletter our YouTube channel and like us on Facebook that way you don't miss out on any future freebies or use-case live streams we're going to be doing our next one will be done this Friday at 3 p.m. Eastern Time it's the weekly WP roundup so we look forward to that hopefully you'll join us also next week we'll be back here with another Divi use-case live stream and we do those on Tuesdays at 3 p.m. Eastern all right you can also check our video description for more info on this live stream and also there's a link in there where you can actually can help contribute your own content to our Dibby or elegant themes blog so learn more about that thanks again for watching we look forward to seeing you in our next video bye bye you

Channel: Elegant Themes

Views: 16,594

Keywords: divi tutorial, divi builder, divi 4.0, divi 4.0 tutorial, divi builder tutorial, divi theme tutorial, elegant themes, section divider scroll effect

Id: o_vHfTTLhKc

Length: 43min 52sec (2632 seconds)

Published: Tue Mar 24 2020