The next classes align a flex container’s lines within when there is extra space in the cross-axis, similar to how horizontal-* aligns individual items within the main-axis. There is also the convenience flex-center CSS class which is equivalent to items-center + justify-center. * this class created via jquery in Divi integrations - mp_inline_button_centered */ * add this class to column - mp_c_inline_buttons */ If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options) If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. Save your page and move on to the magic of adding a little CSS. In my demo I added three text modules followed by three button modules.ģ. Go ahead and add your text modules, button modules, or whatever you want in that section. Once you have created a section & row, you will open up the row settings, and in the advance tab, find the column you will be adding the button modules, and add this class: mp_c_inline_buttonsĢ.
Let’s Get Started Setting up the standard Divi Section & Classes.ġ.
And with a little CSS, make them centered and in a single line. In this tutorial, I will show you how to use a little custom jQuery to wrap all the button modules within a specified column, into it’s own DIV.
Fortunately for me, I have been sharpening my jQuery skills and was able to find a quick solution. I realized I needed to figure out a way to wrap just the Divi Button Modules into their own DIV, so that I could apply that flex CSS to items within that custom DIV and without having to put them in a different row.
By adding the flex align CSS to the column, every single module would then become inline which is problematic. This works great, but I recently came across a site where I needed to keep the button in the same column as several other modules due to the content I had on the column adjacent to these modules. The solution was to put the buttons in a separate row and adding a little flex alignment CSS to the column. If you look at the comments, you will see that a number of people asked how to center those inline buttons. Are you looking for a quick and easy way to get all your buttons on a single line and centered?Ī while back I wrote a tutorial for taking all of your buttons in a single column and putting them on a single line using a little CSS.
0 kommentar(er)
