Vertically Center Content in Divi - in Columns and Sections and for Any Divi Module

hi and welcome to this tutorial today we're going to be looking at the best way of centering a block of text in a column in fact not just a block of text but any module and also not just necessarily in a column but also we'll be looking at how you can center content in the middle of a section okay let's get started we're going to start with a new blank page and the first thing we're going to do is to enable the visual builder once that opens up we're going to choose the build from scratch option i'm going to click on start building before anything else i'm going to go into the settings for the section into background and i'm going to add a light gray background color so that we can see the rows more clearly i'm then going to add a row which is going to have two columns and i'm going to go into the settings for that row to background i'm going to add a white background to the row the first module i'm going to add is an image module and i'm going to put that in the left hand column in the right hand column i'm going to add a text module and i'm going to just paste in a bit of laura mipson the next step is i want to take this spacing out of the top and bottom of the row so i'm going to go into the row settings design spacing and i'm going to set the top and bottom padding to zero now that we've done that we can start styling this text i think it would look better a bit larger so i'm going to go into the text settings the design tab click on text i'm going to scroll down to this text size and i'm going to enable responsive option so that we can set a size for each of the three desktop tablet and phone options so with the desktop selected i'm going to increase this font size to 20 and i'm going to change the line height to 1.5 m next i'm going to click on the tablet and i think we need to see that looking a little bit smaller so i'm going to go with 16 and that's fine with the 1.5 m again by using ms as your measurements it's going to base the line height on the size of the font so when we decrease the size of the font it's going to decrease the spacing as well so that it all just works i'm then going to click on the phone tab and that is still way too big so i think we'll reduce this down to 13 points if i could type 13 to 13 points and that's looking good we also need to do something about the horizontal spacing of this text so i'm going to go back into design again into spacing and i'm going to add five percent to the left and right padding again i'm going to enable responsive mode on this and i'm going to check that that looks right which it does on both the mobile and tablet settings okay so now that we've dealt with that we can work out how we're going to get this centered into the middle of this column there's three steps involved in doing that so the first one we need to click on the settings for the row click on the design tab click on sizing and choose equalize column heights nothing will happen next thing we need to do is go into the row again but this time choose the second column which is the column with the text in click on the advanced tab custom css and you need to add one line of css which is display flex and again nothing will happen so finally you need to go into the text settings choose design and choose spacing and you need to type auto into the top margin and auto into the bottom margin and you will see we've achieved our desired result and we have centered this text within the column worth now having a look at what's happened on the responsive options and you can see because the columns are no longer sitting next to each other there isn't really a center for this to align itself up to so we do have an issue where the spacing at the bottom of this is rather tight so in order to fix that for the text module i'm going back into design and spacing and where we added the five percent left and right for the not for the desktop option but just for the tablet option i'm going to add five percent to the bottom and that will be carried through also to the mobile option so we've now got three different options we have the desktop version with the text perfectly centered we have a tablet version and we have a mobile version all looking good so now we've done that i'm going to go on and have a look at what happens if you've got more than one element that you want to align in this column before we do that now that i've set up this text i'm actually going to go into the settings again and i'm going to go to the preset function if you haven't used presets definitely something to look at and something i will be doing a video on soon and you want to go to create new preset from current styles and i'm going to give this a name of center lesson and i'm going to save it this means that when we come into our next example i can apply that to my text and it will automatically set up all the options for me for the second example we're going to look at how to center multiple modules in one column so in order to do that i'm going to add a headline in here so in other words a text module and i'm going to type in vespa scooters and i'm going to make that an h2 i'm then going to add another text module underneath and into that module i'm going to paste the laura mepson text that we used earlier and i'm going to apply the styling that applied to it called center text which you remember we applied in the last example thirdly i'm going to include a button at the bottom of this column and i already have defined the default styles for a button so now we need to go through the same settings with a few minor tweaks to get this centered first thing we're gonna do which is the same as before is we're gonna go into the design and sizing and we're gonna choose equalize column heights second thing we're gonna do is we're gonna go into the settings for the second column we're going to click on the advanced tab we're going to go into custom css and just like before we're going to type display flex but that's not quite what we wanted to see the reason for that is by typing display flexed we have enabled this column to be a flexbox container by default when you do that and you put items into that column it will arrange the items from left to right in other words it will fill as a row and so it's taken my headline it's taken my copy and it's taken my button and it's aligned them horizontally across the column in order to fix that which is very simple we're going to set the flex direction and we're going to tell it that we would like it to line items as a column okay when we've done that we can start setting our margins and what we need to do is above the top item that we want to center we need to set our spacing just as before to auto then we need to look at the gap between the headline and the copy and for the bottom margin i always like to set margins underneath text i'm going to choose the distance i want between these two items and in this case i'm going to go with 25 pixels we're then going to go to the text module design spacing the top margin i'm going to set to zero because we've already established the margin with the block of text above and then the bottom margin i'm also going to set to 25 pixels which is going to set the spacing between my text and the button finally in order to get this centered as before i need to go into the bottom module which is the button i need to go into spacing and i need to set auto on the bottom setting so that can be a bit confusing so i'll just run over it again we've basically set an automatic margin above the top item in the column and an automatic margin below the bottom item in the column and in between those items we've set the spacing on the text on the headline box in this case and on the copy box in that case and this is what we end up with if we have a look at this now responsively so let's have a look at the tablet version you'll see that we do need to make one or two minor changes to get this to work properly so if we go into the first text box which is the headline into the design tab into spacing and make sure that we choose the responsive option so that we're adjusting the tablet only i'm going to add a left and a right hand margin of 5 which will sort out my headline and then going to go into the button and again the design tab spacing again make sure that i choose the responsive option and for the tablet i'm going to set a 5 left margin and i'm going to set the bottom margin to also be five percent if we go to the mobile view we find that it actually inherits the values from the tablet view so that everything just works we may want to have a look at the text size of the button on the mobile version because it's looking a little bit large so if we go into the settings into design into text no not into text into button and again we choose the responsive option here on the mobile size and we reduce this button down to say 14 points that looks much better so let's save that okay so we've now got a responsive section with a row with our centered three items and it works in both mobile tablet and desktop view i hope you found this lesson valuable so far before we go on to have a look at how we can center items in a section i'd really appreciate a like and maybe you'd even like to follow me this helps drive the youtube algorithm and show my tutorials to some more people thank you okay let's have a look at sections in this example we're going to look at how to center a row in the middle of a section so just to make a really simple example we'll go with a big headline sitting in the middle of a colored background so we'll go into the section settings we'll go into the design tab and sizing and we will set the size of our section to 300 pixels well they're going to content background and we'll set a background color of black we'll then add a row and a text module and we'll choose a small block of text we'll make that into an h2 or even bigger we'll make that into an h1 we'll go into the design tab the heading text h1 and we'll set the color to be white and we'll center align that text okay now it's not vertically centered yet so same steps as before but this time we go into the section settings we go to the advanced tab we go to custom css and we type our display flex and that will immediately set the item into the center of the column now just in case we want to add any more items to this later on it's just as well to also set the flex direction to vertical otherwise if we add a button say underneath it will push that over to the side rather than set it in the center so to do that remember we go with flex direction and we set that to colon so if now we now do for example want to add say a button we can go on to here we can click on plus we can have button and for our button settings all we need to do from the design tab is align the button to the center but it's still perfectly vertically aligned in the section well i hope you found this lesson useful if you've got any further questions please do leave me a comment and if you'd like to see a tutorial on anything specific please also leave me a comment below thank you

Channel: Divi Coaching - Build Great Websites with Divi

Views: 1,003

Keywords: divi theme tips, divi theme, divi tutorial, wordpress divi, divi builder, divi, divi theme builder, divi theme builder tutorial, divi center text vertically, divi centre text vertically, divi center module vertically, divi theme tutorial, divi builder tutorial, vertical align text divi, divi centre module vertically, wordpress tutorial, divi tutorial 2021, divi tips and tricks, divi tips, divi css, divi css tutorial, divi css tips, css for divi, divi center vertically

Id: 80pbbSD1IlQ

Length: 13min 47sec (827 seconds)

Published: Tue Apr 06 2021