How to make Panels Custom Layout

Preksha Patel's picture

How to make Panels Custom Layout

As we know, Panels3 module provides different layouts by default. But in some case, if it does not satisfy with our requirement custom layout creation of panel is required.

Before start, Install and enable panels3 module.

By default, Layout files are located under directory plugins/layouts i.e. sites/all/modules/panels/plugins/layouts. Copy one layout folder lets say "twocol" in your themes folder at path sites/all/themes/yourtheme/plugins/layouts/twocol. Rename twocol folder name with your_layout name.

The layout contains four files:

twocol.png - a screenshot of the layout.

twocol.css - a stylesheet for the layout. - contains only an implementation of hook_panels_layouts().

panels-twocol.tpl.php - the template file for the layout.


Now rename all files with your_layout name, your files will be your_layout.png, your_layout.css,, your_layout.tpl.php.

Now modify these files according to your requirement. The file contains the plugin definition as follow:

$plugin = array(
'title' => t('Two column'), // Title of the layout (Your Layout)
'category' => t('Your Category'), // Category under which it should be appear.
'icon' => 'twocol.png', // Screenshot of the layout (your_layout.png)
'theme' => 'panels_twocol', // template file name (your_layout.tpl.php)
'css' => 'twocol.css', (your_layout.css)
'regions' => array( // Add regions as per your requirement
'left' => t('Left side'),
'right' => t('Right side')

Modify as shown above. Same way modify rest of the files.

Enable your custom layout in your theme, add the following lines in your custom theme's .info file:

; Panels settings
plugins[panels][layouts] = layouts

Now clear cache and try to change the layout of your any panel page, in dropdown you will see one additionally category "Your Category", select it and you will see your_layout, select it. Under contents add the content in regions as per your requirement and you are done.