Download a FREE Timeline Section Made with Divi’s Transform Options

hello divination and welcome in today's tutorial I'm gonna show you how to download a free timeline section made with Divis transform options this is the final result we're aiming to achieve so without wasting a lot of time let's dive in and let's get started alright so before we begin if you prefer to just download this timeline section you can go to this post which I'll link to in the video description below so all you have to do is to click the link and then this will take you to this page scroll down until you get to this area here so normally there will be an opt-in box where you just enter your email address and then once you've entered your email address you'll get this button here which says download the files then you can just click here and this will download the files for this section timeline alright so i've got ahead and download it anyway so you can just install it easily by adding it as a layout alright so what we're going to do now is to build this step by step so what we're gonna do is to start by creating a brand new page so I'm gonna come over here click on add new we're going to give our page a name so I'm just gonna call this free timeline section made with TVs transform options click on use Divi builder so this is going to be built from scratch so I'm gonna go ahead and click on start building so the first thing we're gonna do here is to add some padding so I'm just gonna close this and go into our section settings next I'm gonna click here on design spacing so on the top here we're going to give this 12 V W and on the bottom we're gonna give this 0 V W and make sure you have to go in and type the V W because if you just put a 0 it defaults to pixels now it's time to add our row so I'm gonna save click this plus button here to add our row and this row is gonna have a single column so I'm gonna go ahead and select this so we're not adding any modules yet so I'm just gonna close that and go into the row settings so in here we just need to make some adjustments to our gutter and our width so I'm gonna click here on design sizing you've got a width we're gonna select yes and we're gonna set this to 1 and then over here for width gonna set this to a hundred percent so I'm gonna drag the slider all the way to a hundred percent and the max width as well needs to be changed to a hundred percent next we're gonna come over here to the Advanced tab so what we want to do here is to make sure that this design is only visible on the desktop so to achieve that you want to click here on visibility and make sure you disable on phone and tablet so now we need to add our modules so I'm gonna save this and then we're gonna come over here click this plus button and I'm going to search for my image module and select it right so over here I'm just gonna click and search for my image that I'm gonna use and this is the image and the other way of getting this image is to download that layout and once you install that layouts on your page this will add the image to the image library so I'm gonna select here on my image click upload an image so you can see here it has been added next I'm gonna come over here to design click on sizing and here we want to make sure that it covers the whole width so we're gonna click on force full width so that's pretty much done I'm gonna save this now the next stage is to add another row so I'm gonna click here on this plus button to add my rows and we're going to need four columns so I'm gonna click here on my four columns and again we need to adjust our gutter with and our width so I'm gonna click here on this gear icon into my row settings click on design sizing we're gonna make sure that our gutter width is set to one like that so what the gutter with does is it reduces the space between your columns so by setting it to gutter to gutter with one it means there's no spaces between these columns but right now it's difficult to see because there's nothing here in these columns but when we add some content in there you will see the difference all right so the next thing I'm gonna do is to go to our width and make sure we set it to 100% as we did before and then over here for the max width the game we're gonna set this to 100% right so now we need to adjust our padding so I'm going to scroll all the way down here to spacing so we're going to start with being on the desktop so here we're gonna set this to zero both to the top and the bottom and then we want to go into our devices here click on tablet and here we're going to set this to 15 for the top and the bottom and this needs to be 15 V W by the way all right so I'm gonna add activate my chain so now that value has been applied to the top and the bottom and we're gonna do the same for the mobile phone as well set this to 15 V W activate my chain so that's all looking good so we're gonna save now it's time to add all our modules so I'm gonna start here with the first column click this plus button and the module that we're going to add here is a blurb so I'm gonna search for it and select it right so this is where you know if you want to leave this dummy text you can leave this as it is but I'm just gonna use lorem text so I'm just gonna add a title as well next we're gonna sit an icon because right now by default we have this image but we need to have an icon so I'm going to click on use icon and I'm going to choose the icon are going to use and I'm just gonna go with this little shape right here next we're gonna add a gradient background to our design so I'm gonna click here on background and then we're just gonna add our two colors for our gradients so I'm gonna come over here on the second tab and click this plus button right so for the first color I'm just gonna paste it in here like that and by the way if you want to use the exact same colors as I am using I will leave a link to the post in the video description below right so my next color here is going to be white so I'm just gonna click here on this area here and choose white and then I also need to adjust my start and end position so here I want to set this to 40% and in position to 40% as well now it's time to go to the design tab so the first thing we're going to do here is to add our icon color so I'm gonna set this to white and icon placement here make sure it's set to top I conformed sighs this is where you can come in and adjust this the size of this icon so we can activate this choose yes and we're going to set this to 5vw for the desktop next I'm gonna click here on my little icon and this allows me to go in and edit my mobile devices so I'm going to click here on tablet and on the tablet we're gonna set this to 17 VW and finally for the phone we're gonna set this to 18 VW now let's go to the text settings so here we're going to instead of using the default text here we're going to change this to a specific one and we're going to go with in fact let me go to my body text here so right now you can see it's set to default so we want a font called deed act gothic so I'm gonna search for it and here it is I'm gonna selected so now I'm gonna go to my title font so again this one needs to be deducted gothic and I'm gonna make it bold so I'm gonna click here on this drop-down set this to go to bold and on the text alignment we're gonna Center it and now let's add our sizes so the title text size is going to be 1 VW and I'm gonna go into my mobile options here so for the tablets we're gonna set this to 2.7 okay there we go so and for the phone we're gonna set this to 4 VW finally we're gonna come over here to our line height and we're gonna set this to 2.8 right so for our body text here we also need to go in and make sure that everything is looking great so I'm going to just switch back over here to my desktop so the first thing I'm gonna do is just make sure that everything is all centered so my budget text size is going to be 0.7 VW now I need to set my sizes for the tablet and for the tablet it's gonna be 1.5 VW and for the phone is gonna be 2.1 and then finally for the line height we're gonna set this to two e/m right so for the next stage we need to add some spacing some margins padding on to blurb so I'm gonna come over here to spacing so we're going to start with our left and right margins right so next I'm gonna come over here to my padding and add to VW and this needs to be applied both to the top and the bottom and then left and right needs to be set to three VW so next we're going to add a border so I'm gonna come over here to border and our border corners here are going to be set to 20 pixels so notice that because the chain is activated my 20 pixels here on the rounded corners is going to be applied to all the sides now at the bottom here we can't really see this because we don't have a color or a shadow and this is what we're going to do in the next stage so next we're going to add a box shadow so I'm just going to come over here select my box shadow and we're going to go with this first option here so now you can see my rounded corners now that I've added this shadow all right so the intensity here is a bit too much so we want to go to our box shadow blur strength right here and set this to 80% or 80 pixels and then for our shadow color I'm just going to come in here and make some adjustments to this right so I'm going to paste my values between the brackets like that so as you can see here we've reduced the intensity of that shadow right so the design of this is pretty much complete I'm just gonna go ahead and save and then the next thing we're gonna do now is to clone this four times so there's a quick way to do this I'm gonna use my shortcuts so I'm gonna hit command C that's because I'm on a Mac but if you're in a PC it's ctrl C and then to paste its command V if you're on a PC its ctrl V right so that's what I'm adding right now so you can see I've just quickly added them there in place so to differentiate these all you have to do is to change the colors the gradient colors so to do that I'm just gonna come over here click this gear icon and then I'm going to scroll down here to background and all I have to do to change my first color so I'm going to paste my color in here now as I mentioned before the colors are musing throughout this design found in the post which I'll link to in the video description below alright so what you want to do is to go ahead and add the rest of the colors by just following the steps that I've just shown you in this example all right so I've added all my colors so they all look different now so here comes the fun stuff this is where we're going to add our transform settings to complete our design so we're gonna start off with the first one here I'm gonna click on this gear icon click on design transform so I'm gonna come over here to my second tab set my value here - 6vw and on the bottom here we're gonna set this to 2vw right so notice that as I'm entering these values here it's being applied both to this side and this side so what you need to do is to click on this chain to break it so that we can add these values independently so there we go so now that I've added this you can see that the positioning of this has shifted so if I scroll up here you'll notice that this is where now my module is so next I'm gonna come over here let's click on this little icon so I can adjust my tablet and phone settings so here in the tablet view we just need to set this to zero and the bottom to zero is wrong come over here to the phone this also needs to be set to zero like that great so what we need to do now is to continue with our design and add these transform settings to our next module so I'm gonna save this one here scroll down go to my second one click on this gear icon design transform click on the second tab on transform translate break the chain and the values that we need here are sixteen point six V W and then over here we need to set this to minus 78 okay now let's just double check and make sure that this is in position and and as you can see this is right in position great so what we also need to here is to go into on tablet views and our phone views and make some adjustments here as well so here we're gonna set it to zero VW and same here for the bottom come over here to the phone and this is already set so that's fine great now let's move on to our third one so I'm gonna save this scroll down over here click on this gear icon click on design transform click on the second tab so here you need to start off by breaking this chain set this to 17 VW and over here we're gonna set this to minus 46 now let's just double check make sure it's in position and it is save that and then go to our final one click here on this gear icon design transform just click on the second tab and here we're going to add minus 66 to the bottom and over here we're gonna set this to minus 24 right so now this is in position so we're gonna save this and then we're gonna come over here to row settings and set some negative margins so I'm gonna pick Iran design spacing so for margin bottom here we're gonna set this to minus 15 VW so pretty much this is our final design I'm gonna save this and then we're gonna go through our design and take a look one more time so I'm gonna save the page exit the visual builder and this is our final design so there you have it thank you all for watching if you like this video please give me a thumbs up and do follow us on our social media platforms by doing so you'll be notified every time we release new tutorials until next time thanks for watching and I'll see you in the next video

Channel: Elegant Themes

Views: 4,495

Keywords: Divi Theme Tutorial, Divi Builder Tutorial, Divi 3.0 Tutorial, Divi Tutorial, Divi Quick Tip, Extra Theme, timeline section divi

Id: rrWr7EkSskk

Length: 15min 13sec (913 seconds)

Published: Fri Jun 14 2019