Genesis Column Class Cheatsheet

I don’t know about you, but probably 97% of websites we make have columns on the homepage.

It’s a nice way of displaying short intro content and makes it a bit more visually interesting than free flowing paragraph text (like what you are reading now).  What’s cool about Genesis + Dynamik Website Builder is that tut of the box you can make 2,3,4,5 or 6 columns with no additional plugins needed.  Sweet!

You just gotta remember the columns classes.

Buuuuuuuutttt the class names are hard to remember (for me anyway), so I thought I’d create one page where I (and you) can always reference to copy and paste the column classes I need when making a website.

So below you’ll find simple copy and paste code for Genesis column classes, I’ve also included some simple html markers in it so once you do paste it in you’ll easily know where your content should go.


Genesis Column Classes

All you’ve gotta do is 1) copy the example column code you want below, 2) edit any page/post 3) switch the Text mode 4) paste in the copied code and 5) add your content.

2 COLUMNS

3 COLUMNS


4 COLUMNS


5 COLUMNS


6 COLUMNS


Two More Things

You want to make sure that you remember to always keep the following tag:

<div class=”clear-line”></div>

at the END of your columns.  This helps terminate the column styling. If you don’t include your the content that you add after the columns will creep up along side the columns and look strange.

If you don’t want a line under your columns, just remove the -line from that class, so the end result will look like this:

<div class=”clear”></div>

Get it?


Client Proof Your Columns

There is one teensy-weensy lil’ problem using the above column classes, it’s just that in Visual mode… you can’t see them!  So when a client is editing the content within those columns (they are of course doing so in Visual mode) sometimes they blow an opening or closing div tag causing the webpage to look like an earthquake hit.  Not cool.

You can’t really blame them, it’s hard to avoid something you can’t see.

So what can you do?

Thankfully the WordPress community realized this problem and a developer created a plugin to fix it.  It’s called WEN’s Responsive Column Layout Shortcodes and it’s a free plugin.

Using it is pretty simple.  Once you get it installed there is a new icon on your formatting toolbar that looks like two little blue gears.  Kinda like this:

Once you click that, a dialog box will ask you how many columns you want.

Simply type in a number and it will place the columns shortcodes on the page (so your client will not accidently kill them) that you can wrap your content in.

Super simple! Love it.

Your nerdy friends,
Ian & Amy Anderson

PS: I love when clients try and edit code. I feel like a proud dad watching his only daughter perform an amazing gymnastic… ehhh… nevermind.