Side by Side Buttons in Divi (in one Row, all Evenly Spaced)

hi and welcome to divi coaching a short tutorial today where we're going to be looking at how to put more than one button on a single row in divi so of course if you want three or four buttons next to each other you can always put in a row with three or four columns but there's an easier way to automatically space the buttons out across a single row so let's have a look at how to do that so i have a new page here with a single row containing a block of text and say we want a row of five buttons underneath that so i'm going to add a new row i'm going to choose a single column and i'm going to add a single button module as we want five buttons i'm now going to go in and copy that button five times and obviously each time i copy it's going to stack these buttons up so what we now need to do is distribute these buttons evenly across the row so in order to do that we go into the row settings then into the column settings click on the advanced tab and we need a small bit of css so we click on custom css and in the main element we say display flex and immediately those buttons arrange themselves horizontally in the row but they pack themselves tight up against the left hand side in order to space them out we have various options but the easiest one is to go justify content and we can say space around and what that will do is it will put an even margin on either side of the button so you can see there's a space here there'll be double the space between each button and then there'll be a space at the end another option you have rather than um space around is space between so if we go back into the column settings again back to the advanced back to custom css and we edit this to be space between instead of space around it's a very similar look but what you now end up with is the edges of the buttons are tight up against the ends of the row we can still adjust the spacing of the buttons on an individual basis the nice thing is all the others will automatically adjust to compensate so say we want this button in the middle to be something special we can go into the button settings into the design tab choose button and say for example we want to change the background color so we'll change it to red and then we can go down to the spacing settings and we can increase the padding so give it an extra 50 pixels on either side and you'll see that the button grows but the other buttons automatically shuffle along to take up the extra space i hope that's been a valuable lesson to learn more just google flexbox and have a look particularly at the justify content settings and that will allow you to see the various options available to you thank you very much and i'll see you next time

Channel: Divi Coaching - Build Great Websites with Divi

Views: 713

Keywords: align divi buttons, equalize wordpress columns, line up buttons wordpress, line up buttons divi, line up website buttons in divi, side-by-side buttons in divi, divi side by side buttons, divi theme, divi, buttons next to each other divi, divi buttons, wordpress buttons, wordpress buttons side by side, divi theme tutorial, divi theme tutorial for beginners, divi theme builder, divi theme tutorial 2020, divi theme tutorial 2021, divi theme wordpress, divi tutorial, divi 4.0

Id: mOomwh2Kfhs

Length: 2min 45sec (165 seconds)

Published: Wed Apr 07 2021