In Genesis we have added the ability to create columns (column classes) within the content area. Below you find instructions on how to use content column classes.
2-Columns
To add two columns of text, enter the text below into your post/page editor:
<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>
3-Columns
To add three columns of text, enter the text below into your post/page editor:
<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>
4-Columns
To add four columns of text, enter the text below into your post/page editor:
<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>
5-Columns
To add five columns of text, enter the text below into your post/page editor:
<div class="one-fifth 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-fifth">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-fifth">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-fifth">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-fifth">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>
6-Columns
To add six columns of text, enter the text below into your post/page editor:
<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>
Required CSS Code
The CSS code that is required for the content column classes is included in Genesis, as well as the most current version of child themes. If you are using an earlier version of either, you can add the CSS below to your style.css file and it should work:
/* Column Classes
------------------------------------------------------------ */
.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin: 0 0 20px;
padding-left: 3%;
}
.one-half,
.three-sixths,
.two-fourths {
width: 48%;
}
.one-third,
.two-sixths {
width: 31%;
}
.four-sixths,
.two-thirds {
width: 65%;
}
.one-fourth {
width: 22.5%;
}
.three-fourths {
width: 73.5%;
}
.one-fifth {
width: 17.4%;
}
.two-fifths {
width: 37.8%;
}
.three-fifths {
width: 58.2%;
}
.four-fifths {
width: 78.6%;
}
.one-sixth {
width: 14%;
}
.five-sixths {
width: 82%;
}
.first {
clear: both;
padding-left: 0;
}