Divi theme tutorial for beginners | Equal Height Columns | The WordPress Buddy

[Music] hello friends today i will show you how you can create equal height columns in db so let's suppose if you have a row of these three columns and if you give background to each element these all are three columns so with a text element in each you can see we have given a background each column this one is orange this one has uh yellow and this one has green so to give it a equal height and to take the background to the equal height as well what we will have to do instead of giving background to the text element you will have to remove the background from here delete and we have to remove the background from this one as well sorry select my content and you will have to remove the background from this one as well and so then you will have to go to the row settings over over the row and then click on this row settings icon and then go to design then go to sizing and now toggle on this equalize column files as soon as you equalize column highs go back to the content here are the three columns we have in this row now go to each column settings then go to the background and as you can see i have already given the black background with this one so it already extended its height to match with the largest column in the row so the third one is the tallest or largest one so the first one uh automatically extended its right to match with the third one if we change the background color of this one let's give it to the same orange background we had in the back of the text element so it has a background the orange one now we go back to we now we go to the second column and let's choose yellow one as you can see it also has the same height background now go back to the third one third column and let's choose a green one and save our changes you can see all the columns have equal height regardless of the height of the content in them this is how you achieve the equal height in db theme builder now you must be thinking like this set center column has lots of blank space so when we go to the mobile or small screen version and when there is following stack upon each other then the second column will show lots of blank space but this is not the case with db it will automatically adapt the height according to the content in its for example let's switch to the tablet view and you will see now the equal height property will turn off automatically and it will adjust according to the height of the content in the column see so there is nothing to worry about the responsive property in this one so now let's suppose if you have a block instead of a text element if you have a blur of three columns then if you have a blurb of three columns and you follow the same procedure i just told in the text one and if you go to the row settings and sizing we have already enabled and now when we try to give the background color to each column let's give it to the same orange one as you will notice the text is attached to the borders of the column so it doesn't look nice and so then what we will have to do we will have to give padding to this heading and the body element only you can give padding to the entire blurp as well you can do that going to the blunt settings designs and then click on spacing and you can give the padding left and right let's say give it 20 then click on it but now as you can see the full width image was looking better therefore it is good to just give the spacing on the left and the right of this heading and body element only so how would we achieve that to do that we will have to write some custom css then reset this padding back to zero and what we will have to do we will have to give a custom class to this row so that our css only applies to the blobs in this row note the other graphs in other rows let's give it a custom class like the css to which element we have to apply the css to this heading and description uh box only if we check this page on the front end and we can open the chrome's inspector tool and we hover over the heading element as we can see the module header and the block description is in the same div called ed blood container etp underscore block container so we can apply the padding to this div and it will give the spacing on the left and right of these both elements the padding left 20 pixel padding right 20 pixel now you can see the padding has already been applied to both of these elements in all the blurs why in all the graphs because this class is a common class in each block so wherever you have this class this padding setting will be applied so to apply this padding setting only to the blobs in this row we will have to append our custom row class which we gave just a few seconds ago we assigned the this class equal height bro we have to append that class name in front of our this css class and as you can see now it will only apply to these plots not all these blurs or other blobs so we copy this code and we advance we go to the page settings again and we click on the advanced tab we open the custom css we paste it here see now if we give the background to other columns as well then you will notice the text won't be attached to the border anymore give it a and we go to the third corner we'll get to the green one now as you can see the text is very close to the bottom borders let's give it a padding to the column one we go to the design tab of each column then we go to spacing and we just set the port and padding to 20 see it already picked we just increased the padding of the third one but other two automatically extended their height to make the third one so this is how you set a equal height column for text and blurs you can do the same procedure for all other elements as well if you have any questions then please left them in the comments thank you

Channel: WordPress Buddy

Views: 134

Keywords: divi tutorial, divi builder, equal heights column, divi WordPress, divi hacks, wordpress tutorial, equal height grid, equal height css tricks, css equal height columns, divi theme, divi theme tutorial, divi tutorial wordpress, divi tutorial for beginners, divi tutorial 2021, how to make a website for free, wordpress tutorial 2021

Id: iarRVvDbbSw

Length: 8min 51sec (531 seconds)

Published: Fri Sep 03 2021