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:

default columns

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:

columns with background

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:

style columns

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 background image

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:

tilt effect

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.

Never Miss a Tip from Brad Dalton

Get my latest web design tutorials, elegant coding solutions & useful tips.

5 Reasons Mad Mimi Works Better

mad-mimi
  1. Sends From Your Email Address - More personal & higher open rate
  2. Cheapest - $42 for list of 10,000 emails, unlimited sends
  3. Ease of Use - The easiest system to create & setup campaigns
  4. RSS to E-Mail - Auto send list of latest posts
  5. Auto Send Any Number of Days - enables you to offer multiple newsletters at different frequencies.

Click here to create a free account.

Comments

  1. Andrea Reed says

    What would you suggest to center the content within all columns? I tried the following, but it did not work.

    .one-fourth {
      margin-left:auto;
      margin-right:auto;
    }

Leave a Reply

Your feedback is always appreciated.

Your feedback is always welcome & appreciated however WP Sites does not reply to anonymous comment authors or loaded questions. Members get answers to unlimited questions.