Follow us

Six Columns Blurb Style Layout Tutorial for Divi | Divi Soup

Like our free content? Then you'll love our exclusive Club!

Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

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.

 

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>

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 smile

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

Michelle X

Icons Designed by Freepik

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. 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.

Related Posts

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

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!