How to Create a Vertical Sticky Timeline Layout in Divi

[Music] [Music] do so well hello divi nation welcome to a brand new divi use case live stream where each week we show you how to add new design and functionality to your divi websites and today in this use case live stream we're going to be showing you how you can create a complete sticky timeline layout in divi don't forget to check the video description for more info on this use case let's go ahead and jump in and get started well hopefully you're having a great day night morning wherever you are let us know well first say hello and let us know where you're from in the comments and actually first give me a thumbs up if you can hear me okay in the in the live streams coming in clear for you guys so i'll know that we are good to go um let's see hello planet sounds welcome optimize speech hello hello welcome of course as we go along feel free to answer or ask any questions you may have and i'll try to get to those as we go along all right um okay hello hank from the netherlands awesome um ashraf um hello i got a smiley face i think that's a good sign um all right welcome um or i'm not sure how you pronounce it david uh from france hello uh roxanne gave me a thumbs up and so i'm thinking the stream's coming in okay so we're good to go welcome kamal from the uk arabella from brazil and miguel welcome hola so um just to give you a heads up of where we're going today with this tutorial this is a vertical a sticky vertical timeline layout and the content that we're using today is a gallery as you can see this is an image gallery and we're organizing these images by month here's my month uh column here it's got december and then the year over here the 2000 2020 and as i scroll down you see it stays stuck until we get to the next month and then when we get to the next year the year changes so the month will remain sticky as well as the year whenever it's appropriate so it's a great way to categorize your content in a nice layout of course this has a you know a versatile um it has many applications i should say you could use it for a you know a history pay or a history section on your about page you could use it for i don't know uh a resources page to you know categorize your resources or downloads or updates things like that so this just to kind of give you a heads up of what this may look like on mobile so as you can see still looks great on mobile um i'll show you if we have time how to optimize it from mobile i know uh this is actually the most tricky part of this layout but the initial functionality of the sticky elements and all that are super easy to do with divi's built-in sticky options and i'll show you how to do that so that's where we're going uh let's go ahead and jump in and get started we're going to be starting with a blank slate here a brand new page building on the front end with dibby and as those of you who are trickling in joining us if you are just joining us today we're going to be using or excuse me creating a vertical sticky timeline in divi so all right welcome steve eddie yep so so here's what we're gonna do first thing we're gonna do is we have a default section already we're going to add a column structure we're going to do this i believe it's like two-fifths or two-fifths and three-fifths something like that layout column structure and the first thing we're going to add is a text module and then we'll optimize the row and the columns a bit later but first thing we'll do is add a text module and we want to create our heading so we're creating the heading section just to go back to our preview here that's this sticky bar at the top um with our timeline on the left and the gallery on the right just to kind of keep it at the forefront let letting users know what you're viewing so the first thing we're going to add is the text timeline and we're going to optimize or style that text a bit just going to use the oxygen font and let's make it bold uppercase and we're going to increase that size to 50 pixels and then on the tablet we're gonna do 30 and then on mobile we're going to do all the way down to 18. don't have much room to spare on mobile so we got to make sure it's nice and tight all right let's do let's go back to my desktop view and we're going to do a line height of 1m basically the s exact same height of the actual text so and then the text alignment we're going to actually align it to the right okay that takes care of that let's do some padding i'm gonna add a little bit of padding to the top of that text module 5 pixels and we're going to save that out all right so that's our first side of the heading with our timeline text to create the one on the right we're just going to copy and paste or i'm just going to duplicate it and drag it over all right so i'm going to open up that duplicate here and let's go ahead and change the text to say gallery and then the text alignment we're going to have to adjust that but first let's let's give it a nice color paste in that nice almost maroon-ish color and then we're going to make sure and adjust the alignment to the left because we want it to kind of hug each side of those columns there and to make sure that this alignment stays left on on tablet and phone i'm just gonna make sure and have that set on tablet and phone as well okay all right let's jump in and optimize our row really quickly we're going to give it a custom gutter width so go to sizing and then use custom gutter width and we're going to bring it down to one because i don't want any spacing in between the columns we're going to add that spacing else or with some custom padding so if you're ever wanting to you know have more control over the spacing if you're not happy with those gutter widths those default gutter width settings of one two and three and 4 you can always just bring it down to 1 and then add it yourself with some either some padding or some margin to those columns so uh the width i'm going to change it to under 100 and then the max width let's do 1280 and i think just make sure and update the padding we don't need all that default padding let's change it to 10 pixels on the top and bottom and to make sure that this column layout doesn't break or stack upon or stack on mobile to like a single column we're going to add a custom css snippet to utilize the flex display or display flex property so i'm just going to type in display flex and then i'm going to do flex wrap no wrap so make sure that it doesn't stack upon one another and keeps it on the same horizontal column structure on mobile as well actually i don't i don't need to add it to the desktop i just need to add it to mobile so i'm just going to deploy my responsive settings click on the tablet view and then paste in the display flex flex wrap no wrap and that's as you can see that's what it's going to look like on mobile all right now the i'm going to use this is kind of like a tricky um actually i'm gonna pause i'm gonna i'm not gonna add the padding and custom structure to the to the to the columns or the i am gonna add the padding let's let's just do it forget what i said we're trucking along okay so the padding uh on desktop let's go to the column so we're gonna add them add some padding to our column as you can see it's kind of too close to one another so i'm gonna open up my left column settings i'm gonna go to my padding my spacing and on the top i'm gonna add 10 pixels and on the bottom 10 pixels and on the left i'm going to add 20 pixels and on the right i'm going to add 20 pixels all right and then on tablet i'm basically going to leave everything the same except on the right i'm going to take it down under sorry the right and left i'm going to take it down to 10 pixels again we need to make sure we have enough room on mobile all right so in my advanced tab so this is a cool trick if you want to give your columns a custom width you can do that so i'm in my column 1 settings here and if i go to main element you know this is not you don't really have to do this but i think for this layout it was kind of necessary because i really wanted on mobile to have as much room on the right side for that gallery content and so in order since on mobile devices the default layout structure would kind of go to a 50 50 i think is what that is so for my column my left column and because i have my row set a gutter width to one i don't have to worry about any margins interfering with this um width so i can just set it to width 30 percent so and then i'm going to make sure and add important after it so that it overrides any of the default divi styling so now my left column is 30 of the viewport width and i want to make sure and add that again i got ahead of myself i only want to add that to the tablet so so just make sure and have it only in the tablet tab and add the width of 30 on mobile the phone will inherit the tablet styling there so we don't have to add it to mobile i'm sorry phone all right so i'm going to save that out and real quickly let's go into the right column here add the same uh spacing that we did for the one before it and i know we haven't gotten to the timeline yet but this is kind of crucial to making sure everything lines up appropriately but we'll get there and i'm going to add a let's go to the border i'm going to add a left border to this column it's going to add like a little divider so i'll just add a two pixel border you can see nice little divider there that color's fine and let's jump over to the advanced tab and let's give it a custom width of 70 and that should do it all right let's jump into our section now section settings i'm gonna give it a a dark background of you know two and make sure and take out a lot of that padding we don't really need so let's take out the top and bottom padding since this will be a sticky heading don't want it to take up too much real estate all right and then let's go ahead and make it sticky so i'm going to go to my advanced tab scroll effects and under my sticky position i'm going to put stick to the top and that's it now my header sticky header is ready to go all right now we're ready to create our sticky timeline so uh before i do that i'm gonna just jump in and make sure answer any questions you have check in on you in the chat here um hello guys who are just joining us all right looks like no questions yet you're probably just ready to get to that timeline so let's go ahead and jump to it if you are just joining us i do want to welcome you to this week's divi use case live stream and today we're going to be we are currently building a sticky timeline in divi and we have created our sticky header here and now we're about to jump in and design our sticky timeline so to do that i'm going to create a new regular section and before we start adding any rows or content i'm going to jump into my rows settings take out the top and bottom padding set it to zero and let's go ahead and add a new row with this column structure here which is i believe a one-fifth one-fifth three-fifths i hope my math is correct um layout and the idea is to match the above header um row layout so that the two align so that the timeline you know lines up nicely with the timeline heading and the gallery lines up nicely with the gallery heading all right so i'm going to actually close that i'm not going to add a module just yet but i'm going to jump start the design of the row by copying the the style of the row above in the header section so i'm going to copy those rows styles and then paste them into this one and as you can see my columns are lining up nicely with the above heading which is what we want i do want to adjust the row settings a bit so i'm going to go in there and i'm going to add some padding a little bit more padding so let's do 50 pixels on the top and bottom of the row and let's go to the custom css and the i want to make sure that the the flex no wrap is added there on tablet which is what we want and it is so that's good go back to desktop view let's save that out and now we can add our first text module which will hold our year the date element of our year just to kind of give you a preview of what we're looking at that'll be this one here the 2020 and we're going from most current to um to the you know the the oldest from newest to oldest basically so we're going to create our first year element and once we create this section with the rows it's really a matter of duplicating it and creating other months or years for your content as needed i'll show you how to do that so once we get the first one really set up with all the style elements in place it's going to be super easy to add more years and months and things like that all right so let's add our text module in column one and i'm just gonna put in the the number 2020 for the year and i always like to deploy my layers view so i might need it i'm going to open all of my layers here and i just want to make sure and you can see i'm editing that text module in the first column here all right so my title font i'm going to make sure and match it with the oxygen font same one we used in our header make it bold make it uppercase and for the text size we're going to do 40 pixels on desktop and then on tablet we're going to bring it down to 24. and then on mobile we'll do 18. and then let's scroll down and do our text alignment and we want it to align to the right of that column so that looks good i'm gonna make sure that that stays that way on tablet as well and and so here so here's a key to this design everyone so the the sticky position so this we're going to add to the this year this text element and to do that go to advanced tabs scroll effects and sticky positions so i'm going to add a stick to top and the for the year um i'm going to do a sticky top offset of 50 pixels and that means it you know it will have some space above the once it's stuck it's going to still have some space above so it's not like hugging the top of the the the browser window and so for the bottom sticky limit make sure you can see what i'm looking at um we're going to set it to section this is the key here because we're going to do something different for the month we're going to stick it to the row or add our bottom sticky limit to the row but for the for the year we're going to set it to the section all right and let's save it out now for our sticky month we're going to you know copy copy this one this module and we're going to paste it in there looks like it's adding it's it's jumping down on me for some reason all right so i'm going to open up the the duplicate here since it's our month i'm going to add an abbreviation of uh for december and let's go to our text and let's take out the upper case and let's go to our sticky option and instead of let's go to our scroll effects instead of leaving the bottom sticky limit to section we're going to change that to row all right looking good and over here in the right column we're going to you can add any content you want but uh just for this example we're just going to add an image gallery and i'm going to add some images to the gallery quickly just add these in there i'm adding six images for this example and if you scroll down i'm gonna make sure the image count is six and make sure to take out the title caption and the pagination so it's a nice clean design i'm going over to my design tab and again we're using the the the custom gutter width of one for our row and so that that's why you don't see any spacing between these images in the gallery but we can add some very easily with one little snippet here i'm gonna go to my custom css and for the gallery item i'm actually gonna add this i'm gonna paste it in here it's just some padding and you can see now i have some space between each of my images or gallery items and i do want to add some padding to the actual module or around the module as well so i'm going to go to my design tab go to padding and let's to the left and to the right let's do 30 or three percent all right and just like we did for our i'm gonna actually save it out right now i'm going to refresh and think that should fix any layout problems i might be having with the visual builder nope looks like we still have that weird spacing here um the it's probably having to do with the i'll see what it looks like on the live site real quick yeah on the live site it's fine um for right now it's just on the visual builder it's doing something weird um but we'll fix that hopefully as we go all right so i'm gonna go in my row settings now let me pull up my layers view again because actually what i want to do just like we did for our heading up here for our two columns structures on mobile we're going to give them a custom width because we really need to you know have like for example let's go back to our our final design here um if i i just want to show you what this looks like on mobile real quick so if i go to my mobile view you can see that we really need that left those left two columns to be really small so that we have a lot of room for that the gallery on the right side if not it would have been like way over here and that would have wouldn't have been optimal so that's why we're having to change the custom or the column width on mobile so let's do first padding so i'm going to go to my visual builder here and i'm going to open up the settings for my first column here the one with the year 2 2020. and let's give it some padding so let's do a left of one percent and then a right of oops two percent we don't need much just enough to get it off the the edge a bit now let's go over to our advanced tab and add our custom width for our column on tablet okay so we're going to do a width of 15 because if you remember our and and it's not being represented here because we have some custom code here in this preview but if you remember our heading the this one let me go back to my view this heading up here this left side we gave a custom width of 30. so we're matching that with these two columns so each of these columns will have 15 percent width which will equal 30. so it'll match up nicely with the heading above it okay that out um open up column two settings add the same padding to the left so um left one percent right oops two percent and then the custom width on tablet we're going to do also 15 all right so for our third column let's open up our third column settings we are going to add the same padding to the left and to the right of one percent on the left two percent on the right and then we're going to again adjust our width of this row which will be on tablet will be 70 so with 70. so if you're new to divi and you don't you're kind of scared of these um custom css boxes you can leave it as is you would need the the flex in the row the the display flex and flex no wrap but um you won't have a lot of space on the right side if you don't adjust the column width and this uh layout is available for download in the blog post that was released today so check out our elegantthemes.com for slash blog to check that out and there's also a link in the video description to that blog post you can grab it download it see it for yourself make tweaks use it on the next project whatever you need all right so duplicate um once we're done with that i'm going to save it out and i'm going to just get a little preview of it on the on a live page here okay so everything looks good uh let's take a peek at mobile here and so we're looking good on mobile as well so that's what we're looking for now as you can see if i scroll down those elements stay stuck and it's not until we add the other rows and sections that will really see the full functionality all right let's jump back to our visual builder first thing we're going to do is duplicate our row because we want to add more month so the idea is to add all your months in the section and then once you added all your months then duplicate the entire section for another year if you want another year category or whatever so so let's duplicate this row and as you can see there it is down there and as you can see when i scroll down you'll see my month start to move up but my year stays um but we don't really need a year for this row because it's just a month so i'm going to go to my text for the year on this duplicate row and i'm just going to take out the text don't need it then i'm going to go to my month i'm going to change it to november so there you go that way our our year will stay but our month will change until we get to the next section we're going to create in fact let's just create one more row just for kicks so i'm gonna duplicate that row and i'm going to update the month for that row change it from november to october there you go so now i have three months under my 2020 year so let's now that we have successfully created our first section if you want to create another year category let's duplicate the whole section and that way when we get down to it you'll see that that year will move because it is stuck to the top of the section um or the limit is at the section level not the row so the months will have a sticky limit to the bottom of each row and then the year will have a sticky limit to the bottom of each section which is how we get this functionality so now all i really need to do is change the year text to 2019 and we can actually create or duplicate that year one more time or that whole section one more time to get a 2018 year and because all our design elements are in place it will all look great hopefully on the live page so here we go so now as i scroll down you'll see my month will change because it's stuck to the set to the row and then my year will change because it's stuck to each section all right so it's looking good and let's go ahead and take a peek on mobile again just to make sure we're looking good on mobile as well all right let's jump in i know i've been ignoring you for too long so let's make sure i'm not missing any questions that you might have um bonsoir game47 welcome uh looks like we are quiet with the questions today i have never had a live stream without one question so somebody's gonna have to break the ice before i before i quit here i'm just kidding um so uh just to remind you the uh to check out our blog post for more information on this use case live stream and you can you know see that blog post here on our on our blog and it'll have more information a step by step on how to build it and of course this free download just enter your email address and of course if you already have joined to our or have subscribed to our email list it won't re-subscribe you or anything just enter your email and click download all right so one final look at our design here okay opening in a new tab so here's our final design our sticky timeline and let's just wrap it up here check one more time in our in our questions there's no questions i'm going to wrap it up awesome well all right that's all i got for you for this divi use case live stream and please be sure to subscribe to our blog newsletter our youtube channel and like us on facebook and make sure to click to get those notifications so that we can let you know every single time we have something new for you we have a new live stream things like that we don't want you to miss out also our next live stream will be this friday at 3 p.m eastern time that is the weekly wp roundup and we'll be back here next week next tuesday at 3 p.m eastern with another divi use case live stream all right so also check out our blog for more information and check the video description for more information um including a way for you to contribute your own unique content to our elegant themes blog so check that out thanks again we look forward to seeing you in our next video bye guys you

Channel: Elegant Themes

Views: 2,414

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

Id: 5uObVuv6Gz4

Length: 43min 13sec (2593 seconds)

Published: Tue Oct 13 2020