Style Content Columns

In this tutorial, i’ll show you how to style content columns.

All StudioPress themes already include the CSS code for creating content columns so you simply need to add the HTML code from the snippets below to create the columns.

Columns Plugin

If you’re not using Genesis, you can install a columns plugin which also adds the CSS code you need to create your columns. THen simply add the HTML from the snippets below.

Installation

There’s 2 types of code which creates content columns:

1. Default CSS code in your child themes style.css file.
2. HTML code which you paste into your WordPress editor.

The CSS code for content columns is already included in the Genesis core files & most StudioPress child themes.

Add Columns

You can copy the default HTML code below & paste it into your WordPress text editor to create between 1 and 7 columns.

Here’s what 3 column looks like by default without any added styling:

Add CSS Class To Columns

To style these columns differently, simply add a new class to each column in the HTML code like this:

I’ve added:

column-one
column-two
column-three

Add CSS Code For Columns To Style Sheet

You can then add declarations to each new CSS class in your child themes style.css file like this:

.column-one {
 background-color: red;
}

.column-two {
 background-color: blue;
}

.column-three {
 background-color: green;
}

And here’s the result:

Lets add some more styling to these columns by adding some padding and changing the font color:

.column-one {
 background-color: red;
 padding: 10px;
 color: white;
}

.column-two {
 background-color: blue;
 padding: 10px;
 color: white;
}

.column-three {
 background-color: green;
 padding: 10px;
 color: white;
}

Looking better now:

Add Background Image To Columns

To add a background image to each column, simply upload the image to your child themes images folder and add the url to the image to your CSS code like this:

.column-one {
 background-color: #0260A0;
 background-image: url(images/background.png
 padding: 10px;
 color: white;
}

.column-two {
 background-color: #0260A0;
 background-image: url(images/background.png
 padding: 10px;
 color: white;
}

.column-three {
 background-color: #0260A0;
 background-image: url(images/background.png
 padding: 10px;
 color: white;
}

And here’s the result.

Add Simple Hover Effect

You can also add more CSS to create a hover effect which is the same for each image or different for each.

Another option is to use the CSS code your theme already includes if you don’t mind using the same hover effect.

Lets add something different for a change:

.column-one, 
.column-two,
.column-three {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.column-one:hover, 
.column-two:hover ,
.column-three:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

And here’s the result:

See the Pen tGhHg by Brad Dalton (@braddalton) on CodePen

Note: The columns will line up perfectly when you embed the HTML in your text editor even though they don’t in Codepen. Update: Thanks to Chris Coyier for leaving a comment below about how to fix this.

Here’s the screenshot showing the tilt effect when columns are hovered over in WordPress:

Hover Effect CSS Code Source: 10 Different Hover Effects

Note: You can consolidate/merge the duplicate CSS declarations for the background images in the above code however i have decided not to so its easier to understand for beginners.

There’s a lot more you can do to style your content columns which i will be posting soon so keep in touch if you’re interested in this topic.

Related Tutorials

• Responsive Uneven Columns