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:
- Default CSS code in your child themes style.css file.
- 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.
Hi Brad,
Thank you for this helpful tutorial.
I was wondering if you could provide the CSS to style the background color of the 3-columns-bloc as displayed in the following screenshot: http://cl.ly/image/070l102h3m3f.
Thank you for your help!
That’s what membership is for. http://wpsites.net/registration/
What would you suggest to center the content within all columns? I tried the following, but it did not work.
Hello Andrea
Try adding this declaration to each column class:
You need to use box-sizing: border-box; for this to work right. http://codepen.io/chriscoyier/pen/frlqH
Otherwise the 10px of padding expands the boxes wider than will fit with the math present.
Thanks Chris.