How to Design a Unique Diagonal Layout with Divi

hello divination and welcome in today's tutorial I'm going to show you step by step how to create a unique diagonally out with Divi so this is the final design we're aiming to achieve so without wasting a lot of time let's dive in and let's get started okay so right now I'm logged in to my WordPress admin dashboard so I'm gonna start off by creating a brand new page so I'm gonna come over here to pages and click on add new so I'm gonna give this page a title and you can name this whatever you want but I'm going to name this diagonal layout one and then I'm gonna click on use the diffuser next we're gonna come over here to the visual builder and activate it okay so now that we have the visual field and loaded the first thing we need to do is to go into the section settings so I'm gonna come over here to this gear icon click on section settings click on background so we're going to start off by adding our gradient colors so I'm gonna come over here to the second tab click the plus button I'm gonna start by adding my first color here so I'm gonna click this color area now my color is going to be an RGB a value so I'm just gonna drag this slider down so I can flip this to RGB a so what you want to do is to paste the values within the brackets like this now if you want to use the exact same values as I'm using in today's tutorial I will link to the post in the show notes below right so it's now it's time to add our second color so I'm going to click here and again it's going to be an RGB a value so I'm gonna paste my color within the back brackets as I did before next we need to add our image so I'm going to come to the image tab click the plus button so I'm gonna go with this image right here so the dimensions of this image are nineteen twenty by twelve eighty two so I'm gonna click on upload an image so now we can see that our images added on to the background next we need to add some custom padding so I'm going to come over here to design click spacing so for the top I am going to add a 30 V W and then for the bottom I'm gonna add a 40 V W so as you can see this is pretty much covering most of my image so you can adjust this based on your screen size to what is better for you now it's time to say if I'm setting some click on save next I'm gonna add a text module here so I'm gonna click this plus button add a single column and I'm going to search for my text module select it and then right here I'm going to paste my content and basically what I've done here is I've just added my h1 tag and also the description which is creative services now let's go to the design tab so let's start off by going to the text font so we need to make sure that this is set to Poppins because this is the font we're going to use for this so I'm going to search for it and here it is so for the text size I'm going to set this to two WVW and for the text orientation I want to set this to centered now I'm gonna go to my heading settings so I'm gonna come to my heading text and it's set as heading 1 and then over here for the heading font I'm gonna set this to Poppins as I did before font weight I'm gonna set this to semi bold we're gonna make this all caps so for the heading text size I'm gonna set this to a 4vw so this size may be a bit too much so what we're gonna do is we're going to set a specific size for the tablet so I'm gonna click here on this little icon and I'm gonna click the tablet view and I'm gonna set this to 30 pixels like that so that looks much better now now if you want this in a single line you can always just drag the slider and just make the size a bit smaller so now I'm gonna switch back to the desktop and for the header letter spacing I'm gonna set this to 0.2 EMS and I may want to reduce the size here because this is now split into two lines so I'm gonna reduce this to 3 V W so because we're going to have a dark background we need to change this text into white or light background so I'm gonna come back over here to the text and for the text color I'm gonna change this from dark to light okay so that's all we need to do here I'm gonna go ahead now and save now I need to adjust our background image so let me go back here to my section settings click on background and then over here on the image I'm gonna click on background image blend and set this to multiply so that's what we have to do and I'm going to go ahead now and save next we are going to add a button below this text so I'm going to come over here and click on add module and I'm gonna search for my button module so I'm gonna select it so we need to make sure that this button is aligned center so it goes it goes on with our design so I'm gonna come over here to design alignment and then Center it now if we want to make customizations to this button we need to activate custom stands for button so I'm gonna come over here to button and activate it so let's start off with the text size so the text size here we need to set this to 16 for the button text color I'm gonna set this to white like that next we need to go to the button border-radius so I'm gonna scroll down now at the moment we have this rectangle but we need to have this button look like a pill so to do that we need to drag this all the way to 15 like that so now we can see that our design has changed and for the font we need to use poppins so I'm gonna come over here to my button font and select poppins next we need to add our padding so I want to scroll down here click on spacing and then I'm gonna go to my padding so what I'm gonna do here is I'm gonna have the same size on the top and the bottom so I'm gonna activate the chain and then I'm gonna set this to 0.2 am so now you can see that this has been added to both the top and the bottom and we're going to do the same for the left and the right so I'm gonna activate the chain and add my values so that's all we need to do let's go ahead now and save so now that we have all the elements that we need for our header section we need to go back into the header section now and add our diagonals design so let's go ahead and do that so I'm gonna come over here to the top left and click this section Settings icon and then I'm gonna click on design come over here to dividers so we need this divider to be on the bottom so I'm going to activate bottom and we're gonna choose our divider style so I'm going to click here so the one I'm gonna go with is this one right here I'm gonna select it so at the moment it's facing the wrong direction so I need to flip it so okay so you just click this button here to flip the divider now it's time to add our divider height so we're gonna set it at 20 V W so I'm gonna add my value in here next we need to add our divider color so I'm just going to add white for that so that's our first divider now as I mentioned before what you could do here is if this line is a bit too high the angle is a bit too high you can just play around with these values here and lower it if you if it's a bit too much for you so I'm just gonna leave mine at about 15 because I think this was what works with my monitor and then we can just go ahead now and save now it's time to add our second section so I'm gonna come all the way down here and click this plus button and this is going to be our regular section with a single column right so what I'm gonna do now is I'm gonna start by adding a text module so I'm going to click this plus button here search for my text module select it and then I'm gonna paste my content in here like that now as I mentioned before if you want to use the exact same content you can go to the post which I'll link to in the show notes below and use the exact same content but in your case if you want to use this design in your own works you can go ahead and add information that suits your design okay so now that I have all this in place I'm gonna save this and we're going to go and add some padding to our section so I'm going to come over here to my section settings click on design spacing so our padding is going to be 15 V W both to the top and the bottom so I'm gonna activate this chain link so that I don't have to add my values twice so now that has been added to the top and the bottom that's looking great so I'm gonna save and then let's go back to our text module and make more settings so I'm gonna click here on this module settings design so I'm gonna start over here with the text and then I'm gonna choose my text font which is poppins next I'm gonna go to the sizing because this is a bit too big so I need to adjust this so I'm gonna come over here to sizing and I want to set this to 70% and then I'm gonna Center it so we might as well go into the desktop settings so if I come my over here with this little icon I can go to the tablet and set this to 80 and for the smartphone I can set this to 100 great so this just ensures that this looks great on all devices so I'm gonna go back to my desktop view so I'm gonna go and adjust our heading text so I'm gonna click on heading text so this value here is heading 2 so I'm going to activate heading 2 and I'm gonna choose my font which is Poppins and then for my font weight I'm gonna set this to semi bold all caps and the size is going to be for VW so I'm just gonna add that here and now it's nice and big so we can see here that our text is a bit small let's go ahead and fix that so I'm gonna come back over here to our text and I'm just gonna increase this to about 17 and also increase the line height okay so that's looking great now I'm gonna go ahead and save okay so for the next section we're going to create a diagonal section with four images but keep in mind that in order for this design to work you need to use same size images because if you use different size images it is going to mess up our diagonal design so let's go ahead and add our section so I'm going to come over here click this plus button click on regular now we're going to need four columns because we're going to be adding images into those four columns next I'm going to add my image module so first of all I'm just going to search for it and then I'm gonna select it and then over here I'm going to add my image so I'm gonna click this image icon and then I'm gonna add my first image so the size of my image here is 600 by 850 but as I mentioned you can have different heights if you want to but it needs to be the same throughout okay so I'm going to click upload an image so now we can see our image here is in place next we're gonna come over here to the link and we are going to open this in lightbox so I'm gonna say yes now it's time to go to the design tab so I'm gonna first go to overlay and set it to on so for our overlay I can color we're gonna set this to white and then for the hover overlay we're going to add an RGB a value so I'm going to click here on this eyedropper tool so we can get our color palette I'm gonna drag this slider down a little bit and then I'm gonna paste my values within these brackets just like that so now if I hover over this image you can see that my changes have been updated let's go ahead and add our icon so I'm gonna scroll all the way down here and search for my icon and I can I need to add here is this one next we're gonna come over here to the alignment and I'm going to align this to the left next let's go to the sizing and set this to force full width and then we're gonna come over here to spacing and show space below image we're gonna set this to no so now we have all the settings that we need for our image module so let's go ahead and save and to save us time we're going to duplicate this and add to these three columns so let's go ahead and do this I'm gonna use my shortcut which is command C because I'm gonna Mac but if you're on a PC is ctrl C and then to paste its command V and if you're on a PC is control V right so now I can go into each and individual module and update my image so I'm gonna come over here update my image just like that save move onto the next one update my image save now we need to go into the row settings so I'm gonna come over here and click the gear icon for the row settings click on design so first of all we're gonna come here to the sizing and make this row full width so I'm gonna sit - yes and then over here we're going to go to use gutter with and activate it - yes but we can set the value to 1 so you can see here that as soon as I start reducing this the distance between these images is actually decreasing so that's what we want to achieve so I'm gonna set this to 1 so that we don't have any gaps between these images now we need to go to custom padding so I'm going to click on spacing so I'm gonna go here to the main padding so I'm going to activate the chains and I'm gonna add 0 on to the top and bottom and then left and right next we're gonna come over here to the two column one and we're going to add 15 VW to the top and that's for column 1 now for column 2 we're gonna add 10 VW and for column 3 we're gonna add 5 VW so as you can see here now these are now staggered and then we're gonna save our settings now that we have all our images in place let's go in and add our section dividers so I'm gonna hover over here and go to my section settings click on design dividers we're gonna choose bottom and I'm gonna come over here and select my divider style but now this is facing the wrong way so I need to flip it so I'm going to click divide a flip change my divider color to white next I'm gonna come over here to my divider height and set it to 20 VW but this is only going to be for the desktop so for the tablet and smartphone we're going to change this to 0 so I'm gonna come over here click this little icon I'm gonna come over here to the tablet I set this to 0 and then the smart phone I'm gonna set this to 0 as well okay so back to the desktop view we need to make sure that this divider arrangement is set to on top of content so now we can see that the line is going across the images so this is very important otherwise this won't work let's go ahead now and add a divider for the top so I'm going to come over here to dividers click on top and we're going to choose our divider style and as we did before we're gonna flip it change the color to white and then I'm gonna add my divider height and for the arrangement I'm gonna make sure that this is set to on top of content so now our divider has been added and all our images are in that diagonal design now it's time to save and add a new section so our next section is going to have our text content so what we're gonna do to save us time is we are going to duplicate this one right here and drag it to the bottom so right now my page is huge so what I'm gonna do to make things easy for me is to go into my wireframe view so I'm gonna click here on the expand settings click on wireframe view so this is the section that we need to duplicate so I'm going to come over here and duplicate it and then I'm gonna drag it all the way to the bottom like that now we can go to our desktop view and I'm gonna go in and update our text so I'm gonna click here in my text module settings highlight all the text delete it and paste the text that I need so that's what we have to do for this I'm going to go ahead now and save the next section we need to create is for the team members so let's add our new section so I'm going to click this plus button click on a regular section and this time we're going to need three columns so the modules that we need is the present module so I'm going to search for it and select it so let's add some URLs to our social media links so for now I'm just gonna add blank links because I don't have specific URLs to add in here so I'm gonna do that for Facebook Google+ Twitter and LinkedIn so you can see here that as soon as I've added all the links now those icons are showing on the bottom next we're gonna add our image so I'm gonna click this plus button next we are going to add our image so I'm going to click on the image click in this area right here so I'm gonna add my first image and click upload an image next I'm going to go to the design tab and add my custom padding so I'm going to scroll down here click on spacing so for padding is going to be 8% throughout so I'm going to activate my chain icon and add 8% and also for the right and left right so what we need to do next is to go to our text so we're gonna change our text color from dark to light so notice that as soon as I do that the text sort of like disappears that's because we got a white background but this is going to show once we add our background for this person module okay so for now I'm gonna go ahead and save and then I'm gonna copy and paste this person module on to these two columns so I'm gonna hit command C command V and then command V okay so now all that is said next I need to go to the row settings and add my background colors so that this text over here can be easily readable so I'm going to come over here to my row settings click on background so I'm gonna start with column one click the plus button and paste my value in here do that for the second one and the third one now let's go to the design tab so in here we're going to adjust the gutter width so I'm gonna come over here to sizing activate gutter width and I'm gonna set it to three we're gonna equalize the column height and then we're going to go to our custom padding so I'm going to click on spacing so I'm gonna start off by adding the custom padding of zero to the bottom and then for column one I'm gonna add 12 V W and for the bottom I'm gonna set it to six VW for column two I'm just gonna add 6 VW to the top and then finally for column three I'm gonna set this to zero next we need to make this row full width so I'm gonna come back over here to sizing make this role full width set this to yes so finally we need to add our diagonal lines so I'm gonna save this so I'm gonna copy the style from here scroll down and paste my style over here okay so here you can see that if you add the image in the person module it doesn't work so let's go ahead and fix that so I'm gonna go into my settings click on image and delete this okay so I'm gonna save this so what we need to do now is to add an image above this person module so to make things easier for me I'm just gonna copy this image here because it has all our settings and then come over here and paste it then I'm just going to drag this to the top above the present module like that and then what you want to do is to come into the module and add the image that we need so I'm gonna come over here and add our first image upload image so now you can see that it fits perfectly so I'm gonna save this and then I'm just gonna copy and paste this on these two columns like that face it one more time and then I'm gonna go into the module settings and get rid of the image just by deleting it and then dragging this one to the top save that first drag it to the top I want to do the same here go into the settings delete the image save and then drag this image to the top right so the final stage now is to go into the each and Eve each and every one of these images and change it so I'm going to come over here change the image settings and we're gonna change this to this image upload image save and then I'm going to come to this final one here delete the image and then add the one that I need and then finally click upload an image and save okay so we're almost done so all I have to do now is to drag everything into position so I need to duplicate this one more time and drag it all the way to the bottom like that okay so this is our final design so all I have to do now is to click on publish save the page and exit the visual builder 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 see you soon

Channel: Elegant Themes

Views: 12,327

Keywords: Divi Theme Tutorial, Divi Builder Tutorial, Divi 3.0 Tutorial, Divi Tutorial, Divi Quick Tip, Extra Theme

Id: xUuTc_Kt9Qw

Length: 21min 26sec (1286 seconds)

Published: Mon May 21 2018