WTF are Gpanels?

Gpanels are drop in multi-column snippets for displaying blocks in vertical columns, such as 2 columns, 3 columns or 4 columns. Gpanels are an optional extra that come with the Genesis starter theme.

Gpanels are fluid, meaning they stretch and compress with the page width because they are built with percentages, this is similar to how regular Panels work although the layout method is quite totally different.

The Gpanels come in four delicious flavours...

* 2 column x 50%
* 2 column x 50% + another 2 col 50% nested in the left pane
* 3 Column x 33%
* 4 column x 25%

All the layout CSS is included in Genesis core layout.css so you just need to drop a snippet into page.tpl.php or node.tpl.php and, just like magic, they work.

The snippets can be found in genesis/genesis/gpanels and the idea is that you copy/paste them to your page or node template suggestions. I can see lots of cool use cases such as showing 3 separate Node queues at the top of your homepage and then perhaps again at the bottom of the page when viewing a node (something a news site might do). With Gpanels that would be utterly trivial to achieve.

These are not mini-panels as we know and love, they are only for layout, however sometimes that's all you want and you don't need context or the other rockingly cool aspects of the Panels module.

I've documented Gpanels in the Genesis documentation.

Ok, so here's something pretty cool. If you choose any b variant layout (a percentage based layout, see Setting up your layout) the Gpanels will match the width of the sidebars no matter what the overall width - because they are both percentage based and cunningly designed to match.

Here is a screenshot— this is the genesis-1b layout (standard 3 col, percentage width columns) with the overall page width is set to 980px, which will give columns of around 240px wide. The screenshot shows an example of each of the four Gpanels, with blocks active in each region. I have added some background colors to each region to highlight the layout.

Gpanels grids example

Cool eh?

Last updated 15th May, 2009 - 1:15am

Authored by Jeff Burnz on