Using Genesis Column Classes In Custom Widget Areas

Please Note: In order for these columns to properly sit side-by-side you need to either ensure that "Column Class Compatible" is selected under Dynamik Design > Widgets > Custom Widgets, or you set the "float" option to "left" under Dynamik Design > Widgets > Custom Widgets.

In Dynamik Custom > Custom Widget Areas you can create new Widget Areas and place them anywhere on your Genesis/Dynamik powered website. When you create a new Widget Area you'll find a "Class" option where you can give your new Custom Widget Area a custom CSS class. Here is where you can use these Genesis Column Classes to turn these Widget Areas into columns of content. This is quite a useful and powerful solution for formatting your content beyond the typical "stacked" text and images found in many basic WordPress websites.

The process is quite simple, requiring two things:

  1. Add the Genesis Column Class that is appropriate to the number and dimensions of columns (i.e.. one-half).
  2. Add the "first" class to the end of the first Custom Widget Area "Class" option to ensure proper spacing and fit of your columns.

For a list of different column classes available refer to the links below. The first one is appropriate to those using the non-Bootstrap Column Classes (this option is found in Dynamik Settings > General Settings >  Genesis Column Classes) and the second one is for those using the Bootstrap Column Classes.

Pre-Genesis 2.0 Column Classes:

https://gist.github.com/cobaltapps/6299445

Genesis 2.0+ Bootstrap Column Classes (a slightly tweaked version found in Dynamik):

https://gist.github.com/cobaltapps/8564843