R3: Six Column Blurb Style Layout

Sometimes 4 columns just aren’t enough! So for recipe #3 I’m going to show you how to create a responsive six column blurb style layout with linkable images (and text if you wish). Click here to see the live demo.

So let’s get cooking!

Ingredients

The Divi Theme or Divi Builder Plugin from Elegant Themes
Six icons or images at around 150px wide (my icons are 150px by 150px)

Cooking time

This should take you around 10 – 15 minutes max.

Preparation

The first thing we need to do is create our module. So add a new standard section with single row and single column and then insert a text module.

Next, open up the row settings and set make this row fullwidth to Yes, then Save & Exit.

Method

Now let’s get onto adding our content. Open up the text module and scroll down to the content area, in the text editor add the following code (and don’t forget to change the image URLs to those of your own images):

<p><a href="http://#"><img class="aligncenter" src="https://divisoup.com/wp-content/uploads/2016/01/1.png" alt="1" width="150" height="150" /></a> Service 1<br />
 <a href="http://#"><img class="aligncenter" src="https://divisoup.com/wp-content/uploads/2016/01/2.png" alt="2" width="150" height="150" /></a> Service 2<br />
 <a href="http://#"><img class="aligncenter" src="https://divisoup.com/wp-content/uploads/2016/01/3.png" alt="3" width="150" height="150" /></a> Service 3<br />
 <a href="http://#"><img class="aligncenter" src="https://divisoup.com/wp-content/uploads/2016/01/4.png" alt="4" width="150" height="150" /></a> Service 4<br />
 <a href="http://#"><img class="aligncenter" src="https://divisoup.com/wp-content/uploads/2016/01/5.png" alt="5" width="150" height="150" /></a> Service 5<br />
 <a href="http://#"><img class="aligncenter" src="https://divisoup.com/wp-content/uploads/2016/01/6.png" alt="6" width="150" height="150" /></a> Service 6</p>

Then scroll down to the bottom and give the text module a custom css class, I’m using ‘six-column‘. Then Save & Exit.

Now for the CSS, copy and paste the code below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section and don’t forget to save.

/* 6 Column Layout */

@media only screen and (min-width: 1025px) {
.six-column{
	width: 100%;
	margin: 0 auto;
}

.six-column p{
	-moz-columns:6;
	-webkit-columns:6;
	columns:6;
}
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

.six-column p{
	-moz-columns:1 !important;
	-webkit-columns:1 !important;
	columns:1 !important;
}
}

@media only screen and (min-device-width: 481px) and (max-device-width: 767px) {

.six-column p{
	-moz-columns:2 !important;
	-webkit-columns:2!important;
	columns:2 !important;
}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

.six-column p{
	-moz-columns:3 !important;
	-webkit-columns:3 !important;
	columns:3 !important;
}
}

And that’s it, now you should have a six column layout just like one in my demo, which switches to 3, 2 and 1 column on smaller screen sizes!

You will need to keep an eye on the amount of text you use, ideally you just want to use 1-3 word titles or the columns may start to move, you should be able to rectify this with media queries though, this is just a starting point as everyone’s needs will be different

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X

Icons Designed by Freepik