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 freelance web designer 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 me on Facebook

WP Theme FAQs
Divi Switch
WordPress Theme Editor
Stock Images for as little as $0.69 each
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

  • Custom Blurb Module Tutorial for DiviCustom Blurb ModuleRecipe #6 is by VERY popular demand! I created this custom blurb module layout to help out Terry Smith from the Divi Theme Users Facebook group.
  • How to create a 2, 3 or 4 column square blog layoutHow to create a 2, 3 or 4 column square blog layoutRecipe #25 - How to create a 2, 3 or 4 column square blog layout in Divi answers a couple of questions I have been asked by the Divi community lately.
  • Boxed testimonial slider tutorial for DiviBoxed Testimonial SliderFor our next recipe I'm going to show you how to create a Boxed Testimonial Slider like the one below which looks great on all screen sizes.

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!