Unlimited column layout Divi Builder
1. Open the back end or front end editor, add a new section and select a one column layout.
2. Let’s add some stacked modules in that row, I will use some blurb with icons and some styles applied directly from the design tab. However many rows you add will become the number of columns you will end up with – in my example I am using five.
3. Go to the Row Settings by clicking the three horizontal lines (hamburger) in the top left corner of the green tab of the row.
4. Once in look for Advanced Tab -> Custom CSS
5. Find the text field that says ColumnMain Element.
6. Copy/paste this into the box :
1 2 3 4
/*Unlimited Column Layout*/ display: flex; justify-content: center; flex-wrap: wrap;
Attention! : The line: “flex-wrap: wrap” makes the content pass to the next line when there is no space to fit the content. So, on phone. you will see 1, 2 or more columns based on your screen resolution and size. You made it! 😉 If you want to learn how display Flex works check out this awesome guide: Flex Guide.
The Force needs new lightsabers! If you enjoy my content and want to support me here is the place 😀
Want to boost your site performance? Learn how to do it by activating caching in your site. With a simply and clean plugin and as always in a couple of minutes. Let’s not forget about the small extra for fixing Google Analytics!.
Want to learn how to make any Section / Row / Module fixed? So whenever you scroll the element stays in there with you! Learn how to achieve this trick in a couple of minutes with R2D2 help!.
Hello everyone, is time to talk about how can you clean your WordPress site for a better maintenance, optimization and security purposes in just a couple of minutes once again!
Follow MasterDivi on Facebook
Be updated with the latest tricks!