Free Tutorial For Genesis Themes: Creating Content Column Classes

I'm going to show you how easy it is to create content column classes for your Genesis theme without having to use a single piece of code. You can use this process for most WordPress themes.

Content Column Classes

Have you ever wondered how to create columns without having to load and active another plugin. For my Bloggers Refuge I use Thrive Content Builder Review: The Better #1 WYSIWYG Editor which offers pre-coded columns and obviously much more. This plugin is amazing if you're looking for other features...

But maybe you're only looking to create columns for your WordPress site, if this is you all you need to do is follow this easy guide.

What are Content Column Classes?

Content columns are rows of content and with Genesis there are usually two, three, four and six. More varying options are available with the Thrive Content Builder. Very rarely are there more than six. Here is an example of three columns using the the Genesis Framework:

How Create Content Columns

Step 1: Check your style.css for this code, if it hasn't been added add the follow code at the bottom and save. Your style.css can be found under Appearance > Editor.

/* Column Classes--------------------------------------------- */

.five-sixths,

.four-sixths,

.one-fourth,

.one-half,

.one-sixth,

.one-third,

.three-fourths,

.three-sixths,

.two-fourths,

.two-sixths,

.two-thirds {

float: left; margin-left: 2.564102564102564%;

}

.one-half,.three-sixths,

.two-fourths {

width: 48.717948717948715%;

}

.one-third,

.two-sixths {

width: 31.623931623931625%;

}

.four-sixths,

.two-thirds {

width: 65.81196581196582%;

}

.one-fourth {

width: 23.076923076923077%;

}

.three-fourths {

width: 74.35897435897436%;

}

.one-sixth {

width: 14.52991452991453%;

}

.five-sixths {

width: 82.90598290598291%;

}

.first {

clear: both; margin-left: 0;

}

​Step Two: Choose how many columns you need for your work, then add the appropriate code to your WordPress post or page Editor...do not add to the Visual.

To add two content columns of text enter this code:

<div class="one-half first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div><div class="one-half">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div><div class="clearfix"></div>

To add three content columns of text enter this code:

<div class="one-third first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div><div class="one-third">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div><div class="one-third">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div><div class="clearfix"></div>

To add four content columns of text enter this code:

<div class="one-fourth first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div><div class="one-fourth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div><div class="one-fourth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div><div class="one-fourth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div><div class="clearfix"></div>

To add six content columns of text enter this code:

<div class="one-sixth first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div><div class="one-sixth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div><div class="one-sixth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div><div class="one-sixth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div><div class="one-sixth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div><div class="one-sixth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div><div class="clearfix"></div>

You will have noticed that these are even columns, should you want uneven columns then you will need to load and active the Genesis plugin, this can be found in my article Top Genesis Plugins That Provide Easy Customizations & Extensions.

Genesis Theme of the Month at StudioPress

Don't have a quality theme? 

Genesis are considered one of the best because they’re sophisticated, offer lightweight top-notch coding, are SEO optimized, are HTML 5, are schema ready, updates are a breeze, security is tighter than ever, and can easily customized. There are so many positives to using Genesis that the list is endless. 

Check out their theme of the month...

StudioPress Theme of the Month
Sharon

You are talking to Sharon, an Earl Grey tea addict...You don't have to slog your guts out to succeed...Use my expertise to fast-track your new website...I want to show you how to make the right choices...Check out my #1 recommended training course to learn how to start an online business FREE!

Click Here to Leave a Comment Below