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 a lightweight layout only solution, perfect for when all you need is a simple way to layout blocks in columns. Gpanels do not provide any of the advanced features of the Panels module such as context; they are for layout only.

Gpanels use percentages and 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 different.

See:
/genesis/genesis/gpanels
/genesis/genesis/gpanels/README.txt
/genesis/genesis/gpanels/page-gpanel_examples.tpl.php

The 4 preconfigured Gpanels

2col-50-50

Gpanel code snippet to display two 50% width regions as columns.
/genesis/genesis/gpanels/2col-50-50.php

2col-50-50-nested

Gpanel code snippet to display two 50% width regions as columns with another 2col-50-50 Gpanel nested inside the left panel .
/genesis/genesis/gpanels/2col-50-50.php

3col-33-34-33

Gpanel code snippet to display three 33% width regions as columns.
/genesis/genesis/gpanels/3col-33-34-33.php

4col-25-25-25-25

Gpanel code snippet to display four 25% width regions as columns.
/genesis/genesis/gpanels/4col-25-25-25-25.php

How to use a Gpanel in page.tpl.php

1. Copy and paste a Gpanel into your page.tpl.php file (you can paste it anywhere).
2. Uncomment the matching regions in your subthemes info file.
3. Clear the cache (in Performance settings) to refresh the theme registry.

How do I uncomment the regions in my subthemes info file?

Lets say you are using the 4 column Gpanel. In your subthemes info file locate this code:

  ; 4 col Gpanel
  ;regions[four_col_first]    = 4col Gpanel col 1
  ;regions[four_col_second]   = 4col Gpanel col 2
  ;regions[four_col_third]    = 4col Gpanel col 3
  ;regions[four_col_fourth]   = 4col Gpanel col 4

Then remove the semicolons from each Gpanel region, so it looks like this:

  ; 4 col Gpanel
  regions[four_col_first]    = 4col Gpanel col 1
  regions[four_col_second]   = 4col Gpanel col 2
  regions[four_col_third]    = 4col Gpanel col 3
  regions[four_col_fourth]   = 4col Gpanel col 4

Next you MUST go to Performance settings and Clear Cache data (down the bottom there is a button), otherwise Drupal wont know you have made changes to the info file.

Then place some blocks into the regions using Drupals normal block configuration.

The reason these are not enabled by default is that there are 11 additional regions just for Gpanels and for those who do not use Gpanels it could be a bit annoying on the block config page.

Now you can add blocks to the regions as per normal. The layout CSS for these regions is already set up so there is nothing more to do.

Where can I paste a Gpanel?

You can paste a Gpanel almost anywhere in page.tpl.php and they will display correctly. If you paste one into an existing region it will only show if that region has an active block, alternatively you could remove the conditional statement around the existing region.

How to use in node.tpl.php

Technically you can paste a Gpanel into node.tpl.php also. To get them to work you will need to make the regions available to the node template. You do this in your subthemes theme_preprocess_node() function.

For example, to enable the regions for the 2col-50-50 Gpanel for the node template, add this to your subthemes theme_node_preprocess() function (in your subthemes template.php file).

function genesis_SUBTHEME_preprocess_node(&$vars, $hook) {
  $vars['two_col_first'] = theme('blocks', 'two_col_first');
  $vars['two_col_second'] = theme('blocks', 'two_col_second');
}

Example page.tpl.php

See page-gpanel_examples.tpl.php in the gpanels folder. This has all of the Gpanels pasted in various positions. You could test this by copy/pasting the file to your subtheme and rename it as page-front.tpl.php.

Emulating Fluid Grids

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.

Here is a screenshot—the page width is set to 980px, which will give a grid of around 240px columns. 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.