By default, when multiple Button modules are inserted into a page created with the Divi Builder, they stack on top of each other.
For example, with 3 buttons we get the following result :
There are cases where the layout needs lead us to have several buttons on the same line.
So I propose you 2 solutions to align your buttons horizontally, one with the Divi Builder and the other with CSS.
Align buttons horizontally with Divi Builder
If you want to align your buttons horizontally, you can use a row containing as many columns as there are buttons.
The disadvantage is that you will be limited by the Divi Builder's column system, i.e. no more than 4 columns at the time I write these lines.
- If you are waiting for the Divi update to come in June 2018 (?) which will allow you to go up to 6 columns
- If you use the free Divi Extended Column Layout plugin (read our test) which allows you to go up to 10 columns
But, not default the buttons will be very spaced out because aligned in each column (choose the alignment in the parameters of each button, Style -> Alignment tab):
So you will have to change the settings of the row, tab Style -> Dimensioning and play with the width of the row and the spacing of the columns :
The disadvantage with this method is that one is dependent on the sometimes limited possibilities of the Divi Builder.
In addition, we overload the structure of our page by adding line by line...
Horizontally align buttons in CSS
Insert a single-column row in which you will add the number of Button modules you want.
In the line parameters, tab Advanced -> ID and CSS classes specify the button-in-line class in the CSS class field.
Then add the following CSS:
You want to know where to insert this CSS code? Read our article "7 ways to add CSS to Divi".
To change the spacing between your buttons, simply change the value to 2% in line 3.
The only limit is the length of your button labels: if they are too long and there are too many buttons, some of them will necessarily go on a second line.
And here is the final rendering with the buttons horizontally aligned in CSS :
So I presented you 2 different methods to horizontally align your buttons on your Divi site.
You can use the Divi Builder if you really don't want to get your hands in the code and the layout you want matches the possibilities offered by the Divi column system.
But personally, I strongly recommend the CSS solution which is lighter, more flexible and really not that complex to set up. 😉