Creating dynamic drupal pages with panels

Submitted by David Mercer on 31 May, 2010 - 11:19
tagged with

Standard drupal content types can be quite flexible. It's easy to add new fields of various kinds ranging from integers, urls and text, to node references and user references. Fundamentally though, there comes a point where a given page needs more than a single piece of content - no matter how spiffy said content is.

Look at any content driven site such as news or article websites and, almost without exception, they'll have regions showing different bits of content on their landing page. It's easy to mimic this with your own Drupal website, no programming required - all you need is the Panels module.


Livedrive Online Storage

As per the Panels page:

"The Panels module allows a site administrator to create customized layouts for multiple uses. At its core it is a drag and drop content manager that lets you visually design a layout and place content within that layout..."

One of the most powerful features of panels is that it integrates with views and other modules, allowing you to add virtually any type of content to any part of a panel page. To create a new panel (first download, install and enable the module):

  1. Go to the Panels dashboard under Site building in the admin section and click Create new... Panel page
  2. Give the page a name, machine name and brief description. If you want this panel to be the landing page, check the Make this your site home page option and then click Continue
  3. Select a layout and click Continue - the layouts represent how the page will divided up into regions. Each region can hold any number of content blocks.
  4. Add a title if required and click Finish

That all there is to it. You now have a new panels page complete with regions, but of course... no content. In order to begin adding content:

  1. Go to the content layout page - this displays a graphical representation of the regions on that panel page.
  2. Click a gear icon (at the top left of each region) and select Add content
  3. Choose what content to add from the Add content overlay. This could be anything from custom code, to an existing node, to views, widgets and pretty much anything else that exists on the site
  4. Complete the add content configuration and click Finish
  5. The content layout interface will now display the new content within a draggable box. Content can be dragged from one region to another or reordered by dragging up and down the list
  6. Repeat this process until you have all the content you want added to the page and then click Update and save

Artisteer - CMS Template Generator

With the new panel saved, it is now possible to browse to it by going to the page path you specified at the start of the process. With all the content in place the next task becomes formatting and layout. Panels provides options (by clicking the gear icon) to style each individual block or region, and you can use CSS to implement any class or ID attributes you add.

A good working example of a panels page is the Site prebuilder homepage. As you can see this page has a number of different elements, providing a variety of different features and content.

I Pledge that my content is 100% unique and original
David Mercer's picture
David Mercer
http://www.siteprebuilder.com

"Bestselling author of development, eCommerce and marketing books." ~ Wikipedia

I am a serial entrepreneur and startup founder. I also consult to huge corporates and SMEs - providing insight and experience that relates business objectives to technical, analytical, Internet marketing, and SEO solutions. Tell me what your business needs; and I'll make it so.