Sometimes, Drupal theming system is unable to cope with a large number of blocks and regions in a project. In this article I'd like to show you how to use Panels — a visual page editor that lets you quickly create complicated layouts with ease.
So, what is a web page in a Drupal context? A web page is HTML code generated through a series of hook calls and preprocessing functions. A typical Drupal page is usually made of:
- Other content
Most Drupal users are well familiar with nodes and blocks. Nodes are used to create different kinds of pages for a website, but it's probably the most basic example of using nodes. In reality, a node is a flexible tool for solving various kinds of problems.
Blocks are little boxes with content placed in theme-defined regions. To configure blocks for your website, go to the Block Admin page (Administer/Site building/Blocks). The Block Admin page provides an interface for adding, placing and configuring blocks. In addition, Blocks can be declared programmatically in hook_block().
Using nodes, blocks and theming capabilities we can build a complete website with all the required functionality and design. However, there is a faster way to do this, using Panels module that allows users to visually create customizable and reusable page layouts.
Normally, when creating a content page using the Page node, you either need to enter HTML for the node body as well as classes for each section, if required, or you might have to define a custom template for this content type, but that requires even more work.
With Panels, we simply use the visual editor to define the page layout and add content. Panels module also lets you specify page access permissions, its path and configure the menu. That said, Panels is seamlessly integrated with certain Drupal modules like Views and CCK and this feature can be used to embed Views output in the page.
Let's create a simple page as an example:
- Navigate to the Panels Dashboard (Administer/Site building/Panels/Dashboard).
- Choose Panel Page under Create New... and fill in Administrative Title, Machine Name and Path fields.
- Choose a template for our page.
- Fill in CSS ID and other required fields and click Continue.
- Now we can start adding content to the blocks.
To add content:
- Click the gear icon in the upper left corner of a block and choose Add Content. The objects inside regions support drag and drop, so we can change the order of the blocks graphically.
- Choose content type in the pop-up windows and click OK.
- If Сustom Сontent was selected, you may continue editing the block content, change headers, etc. If you selected Views type you can redefine headers and additional options related to Views module as well.
- Save your changes.
The above example is a rather simple one, it demonstrates only a fraction of what the Panels module can accomplish. However, it serves as a demonstration of how Panels can be used to quickly create flexible page layouts. Using the Panels GUI we can make a site template without wasting time on writing HTML and CSS to create the site foundation. You can increase productivity even more by using Panels together with the Views module.
This article does not cover additional ways to arrange your content provided by the Panels module — panel nodes and mini panels. We shall talk about them in future articles.