R3: Six Column Blurb Style Layout

by | Jan 15, 2016 | Blurb, CSS Tips & Tricks

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

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.

Six column blurb style layout tutorial for divi

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.

 

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="http://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="http://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="http://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="http://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="http://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="http://divisoup.com/wp-content/uploads/2016/01/6.png" alt="6" width="150" height="150" /></a> Service 6</p>

six-column3

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

six-column4

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

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.
Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!