Today I will show you how to create a two-column layout for your blog posts or for any other Divi modules. You can create more columns as you see fit. Below is an image of the demo.
If you want to see a real example of this usage on my website, scroll to the end.
This is a great way to add a more interesting layout to your blog posts or pages.
Step 1: We are going to add a CSS class to the module(s) that we will want to layout in two or more columns.
Step 2: We will add some CSS to our Divi page or Divi Theme Customizer to make the magic happen.
Click on the button below to see a demo of the two-column layout for the set of modules that we are going to create. A download of the layout is at the end of the demo.
Step 1: Add CSS class to your module(s)
Add some modules – you can choose text, blurbs, call to actions, blog posts, etc.
We want to organize all the modules in two columns so we have to add a class to our Column, which contains all the modules.
We need to add a class of two-columns to our Column. Go to Column Setting –> Advanced Settings –> CSS Class –> Add class name of two-column.
Step 2: Add CSS code to Page Settings
Copy and paste the code below:
@media only screen and (min-width: 600px) {
.two-column {
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
}}
You can adjust the code above for more columns by increasing the column-count to 3, 4, etc.
If you want to learn more about the CSS column-count trick check out the two great CSS resources:
Real Life Usage
I have a webpage were I list books for non-designers that I recommend because I found them very useful myself. I went through a couple of variations on how to present the books.
At first, I looked into Divi layouts for book reviews and authors. I liked the Divi Author layout in particular, but the problem was that I wanted to write a bit about each book, and the length of the text would vary. So when I tried to use this layout, the books were not lining up evenly.
The second problem was that when I tried to modify the layout and have a more vertical presentation of the book, often the column with text/description would be much larger than the corresponding image and title. I could enlarge the picture, but because I was trying to link it through the Amazon affiliate links, I couldn’t increase the image sizes (it’s not allowed).
Therefore I decided that the next possibility was to have a type of a fluid layout that would adjust depending on the amount of text I had.
Below you can see my final two-column-layout option.
