Unlimited column layout Divi Builder

by | Nov 27, 2017 | Divi, Light Side

Steps

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.

Demo

[coffee]

2 Comments

  1. Mark

    Awesome!
    Thank you for this. I have Rebuild my site with Pro as it was built with X in the first place and that header builder is a pain in the rear end…πŸ™ˆ
    How would i display multiple modules in one row but to be scrollable on every screen size?
    And to make the position on the bottom of the screen fixed?

    Reply
    • Nico Master

      Hi there Mark! You are the first comment in this blog πŸ™‚ Awesome!
      To make a item scrollable you need to add the next rule to the main element of each module:

      overflow: scroll;

      About the position what do you mean? Like a fixed menu section but in the bottom of the screen?

      If that’s the case add to the section / row or module:

      position: fixed !important;
      bottom: 0;

      Hope that helps πŸ™‚

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

How to Cache and Boost WordPress Performance

How to Cache and Boost WordPress Performance

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!.

How to Make any Element Fixed – Divi Builder

How to Make any Element Fixed – Divi Builder

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!.

How to Maintain a WordPress Site Clean

How to Maintain a WordPress Site Clean

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!