Genesis Column Classes Video 1 (the basic idea)
Genesis Column Classes Video 2 (how it works)
Before we start using Genesis Column Classes, please note!
You will need to use some very basic HTML code
The easiest way to write code is using the text view in the WordPress editor.
BUT! If you try editing Genesis Column Classes code using the visual view tab in the WordPress editor WordPress might automatically delete some of your column class code. Because it doesn’t understand what you’re trying to do.
This doesn’t always happen. But when it happens to me it drives me nuts! So I think it’s safest to edit my code in text view.
So please remember. When you write or edit a page using Genesis Column Classes code, use the text view tab. Not the visual tab.
And a quick side note, you can also use the WordPress editor to write HTML that you can then paste into text widgets. I do that all the time. OK let’s get started.
Columns and rows
Using Genesis Column Classes you can divide your page into columns and rows using HTML divs with a class applied to them.
You can make up to six columns per row using Genesis Column Classes. And you can make as many rows as you like. You can also mix and match the column widths. So for instance you could have a one-fourth, three-fourths layout. This gives you one narrow column and one wide column.
Or a one-half, one-half layout. This gives you two equal width columns.
If you stack rows of Genesis Column Classes on top of each-other you need to put an empty clearing div between the rows…
And the first div in any Genesis Column Classes row needs an extra class of first. So the code for a two column Genesis Column Class layout would look like this…
This is how the code works…
These are the Genesis Column Classes you can use…
one-half
one-third
one-fourth
one-sixth
There is no one-fifth option.
You can build really useful layouts using Genesis Column Classes. And it really is easy once you understand how they work. For instance you could have, three narrow columns of links, followed by a wide column containing text or an image. These are the classes you would use to do this…
one-sixth first
one-sixth
one-sixth
three-sixths
clearfix
Ready made code snippets
I’ve made some code snippets to help you get started using Genesis Column Classes…
The important points to remember when using Genesis Column Classes are…
The numbers must add up
For instance if you make a row divided into thirds, you could have a column one-third wide followed by a column two-thirds wide. When you add one-third and two-thirds you get the whole number of one. Just make sure the column widths you use, when added together, make the whole number of one. Such as one-fourth and three-fourths. Or one-sixth, one-sixth, one-sixth, three-sixths.
The first class
The first column in every Genesis Column Classes row needs the extra class of first. That’s important. So don’t forget!
The clearfix div
And after every row that uses Genesis Column Classes you need an empty clearfix div. The empty clearfix div makes sure any content below that point starts on a completely new line. If you don’t separate rows using the clearfix div your rows can look jagged or higgledy piggledy.
Full width rows
If you have a layout that includes a full width row sandwiched between column classes such as this…
You don’t need any extra code to make the middle row span the full width and display as a single column. The row above ends with an empty clearfix div. So you can just type in your content and it will automatically span the whole page width. The clearfix div ended the row above cleanly. The row below starts with the extra class of first. Which makes that row start cleanly. So the full width row in the middle is cleanly separated from the rows above and below it.
Single row background color
However, if you want to style that single row by giving it a background color etc, you could put the content inside a div with a class, like this…
If you wrap full width content in a div, don’t forget to add a custom class in your style sheet.
Genesis Column Classes are incredibly useful. And by learning just a little bit of code you gain loads of power over the layout of your pages.