This page is archived
We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.
In this first series of Panels videos you will learn how to use the panels module to take your Drupal website to the next level. When you reach the limits of what Drupal alone allows you to do with its layouts, adding Panels to your site enables you to create more sophisticated displays of your content. Here are just a few things the Panels module makes easy:
- Divide the display of your content into multiple columns
- Place blocks into the center of your pages
- Use different layouts on the same page, under different curcumstances
Because Panels works with the Page Manager module in ctools, you get all the benefits of the page manager, as well as complex control of your layouts. Page manager allows you to take over many of the ‘default’ displays in Drupal, including the display of content (nodes), profiles (users), category listings (taxonomy), and also the edit forms for each of these entities.
In this first series of Panels videos on Drupalize.me you will learn how to use the Panels module to take your Drupal website to the next level. When you reach the limits of what Drupal alone allows you to do with its layouts, adding Panels to your site enables you to create more sophisticated displays of your content. Here are just a few things the Panels module makes easy:
- Divide the display of your content into multiple columns
- Place blocks into the center of your pages
- Use different layouts on the same page, under different circumstances
Because Panels works with the Page Manager module in ctools, you get all the benefits of the page manager, as well as complex control of your layouts. Page manager allows you to take over many of the ‘default’ displays in Drupal, including the display of content (nodes), profiles (users), category listings (taxonomy), and also the edit forms for each of these entities.
Additional resources
Drupal would like to assume that every page on your website will use the same layout. As it turns out, this is often not the case. The home page of your site, in particular, regularly uses a different layout. In this lesson we will demonstrate how you can use Panels to build a unique home page layout for your site.
Additional resources
Each piece of content placed into a panel has it’s own configuration settings, covering everything from display style to access control. In this lesson we will take a tour through the settings for each pane.
Panels and the Page manager module allow you to create different versions of the same page (called variants) under different circumstances. In this lesson you will learn how to build two different versions of the content on your home page. People who are logged in to your site will see a different home page than people who are not.
Now that you’ve manually created a new variant for your front page, this lesson will teach you a much faster way to duplicate an existing variant. This technique is useful if your variants are very similar to one another.
Drupal site builders have long wanted to rearrange the display of each piece of content. The page manager module provides us with a default node view context we can use to accomplish just this. In this lesson you will learn how to break an article into two columns.
Though Panels comes with several built-in layouts for you to choose from, you’ll find that these don’t always suit your needs. Fortunately, there’s also a layout designer that anyone can use to create a new layout with Panels. In this lesson you will learn how to use the Panels layout designer for rapid prototyping.
Additional resources
Stylizer enables site editors to change the styles of panel pane backgrounds, content, text styles, borders, and heading styles. It provides an extensive settings form, including a live preview and integration with the Color module, for point-and-click color picking.
In this lesson, we will:
- Identify style options provided by Panels
- Enable Stylizer module
- Change Styles of a Panel Pane and Heading using Stylizer
By the end of this lesson you should have a good idea of whether or not you want to enable Stylizer on your Panels-based site and if you do, how to access and use it.
Stylizer module comes packaged with CTools.
Demo site log in:
- Navigate to /user
- Login with admin/admin
Additional resources
Views Content Panes is a module that comes packaged with Panels. It provides a new type of Views display called a Content Pane that enables you to pass off Views configuration to the Panel Pane.
In this lesson, we will:
- Enable Views Content Panes module
- Build a View using Content Pane display
- Explore Pane Configuration in Views
By the end of this lesson, you will have a better idea of why you will want to use content panes in Views whenever you are placing Views in Panels.
Demo site log in:
- Navigate to /user
- Login with admin/admin
Additional resources
In a Views Content Pane display, it's possible to use exposed or contextual filters as panel pane configuration. We'll walk through this process and why you might want to utilize this feature of content panes.
In this lesson...
- Add an exposed filter to a view
- Use the exposed filter as panel pane configuration
- Place the same view twice with different configuration
Demo site log in:
- Navigate to /user
- Login with admin/admin
Additional resources
We'll use Page Manager, Panels, and Views to create a customized user account page that features articles authored by the user whose account is being viewed.
In this lesson...
- Build a view of articles with a contextual filter
- Create a customized user account page
By the end of this lesson, you'll walk away with ideas for how to create your own customized user account page.
Demo site log in:
- Navigate to /user
- Login with admin/admin
Additional resources
The default taxonomy term page provided by Drupal leaves much to be desired. If a taxonomy vocabulary has multiple levels, but content is only tagged with only the child term and not the parent, parent term pages are left with no content listed on them, despite the fact that there is content tagged with terms below it.
In this lesson...
- Create a taxonomy vocabulary with two levels of hierarchy
- Enable the Taxonomy Term Template
- Build a custom term page for each level of hierarchy
By the end of this lesson, you'll know how to create better taxonomy term pages using Views, contextual filters, and Panels.
Demo site log in:
- Navigate to /user
- Login with admin/admin
Additional resources
With mini-panels, you can build portable panels components and place them as blocks in regions of your theme.
In this lesson...
- Build a 3-column mini-panel
- Place a menu in each column
- Place the mini-panel in the footer region as a block
By the end of this lesson, you will be able to build a mini-panel and understand how to place it in a region using the block administration page.
Demo site log in:
- Navigate to /user
- Login with admin/admin
Additional resources
Panel Nodes module comes packaged with Panels and provides a new content type called Panel.
In this lesson...
- Enable Panel Nodes module
- Create a new node using Panel content type
- Build a simple multi-column page
By the end of this lesson, you will understand the basic functionality of Panel Nodes and why you may or may not want to use it to build one-off pages on your site.
Demo site log in:
- Navigate to /user
- Login with admin/admin
Additional resources
Panelizer is a powerful module that allows you to attach panels to any entity and view mode in Drupal. You can create default templates for all content in a content type, for example, or you can create one-off pages with unique layouts and content panes.
In this lesson...
- Walk through Panelizer admin UI
- Panelize Article content
- Set up default Panelizer template
- Override versus Update Default Template
By the end of this lesson, you should be able to configure Panelizer settings, enable Panelizer for a content type, and understand the benefits and limitations of creating one-off pages that override the default template versus updating the default template.
Enabling the Panels In-Place Editor is recommended for this lesson.
Demo site log in:
- Navigate to /user
- Login with admin/admin
Additional resources
You can create your Panels layouts with HTML and CSS that can then be selected in the Panels UI.
In this lesson...
- Create a two-column, 60/40 layout
- Use existing layout to quickly get started
- Apply new layout to custom home page
Demo site log in:
- Navigate to /user
- Login with admin/admin
Additional resources
Creating pages with Panels involves a lot of configuration which can take a lot of time and effort. In order to avoid re-doing all that work on another instance of the site, we can export this configuration into code using Features and deploy it in the usual way (using git or FTP).
In this lesson, we will:
- Export a custom panels page
- Take inventory of all panes
- Create a new Feature to export configuration
By the end of this lesson, you will be able to export a basic panel page configuration that contains a View using Features.
Demo site log in:
- Navigate to /user
- Login with admin/admin
Additional resources
Panelizer configuration involves several layers of configuration. It can be challenging to find all the corners of configuration to export, without needing to still perform some extra manual steps after deployment. With Strongarm module, we can export the related settings that make Panelizer work, avoiding the need for extra manual steps.
In this lesson, we will:
- Enable Strongarm module
- Create new feature
- Export and Deploy Panelizer settings
By the end of this lesson, you should understand how to export all of Panelizer's settings plus the related settings that support its functionality.
Demo site log in:
- Navigate to /user
- Login with admin/admin
Additional resources
Panels provides export code that you can copy and paste into a module or directly import into another instance of the site.
In this lesson, we will:
- Export a panels page using Panels UI
- Import a panels page into another instance of site
By the end of this lesson, you will understand where to find the export code for a panel and be able to simply and quickly import it into another copy of your site.
Demo site log in:
- Navigate to /user
- Login with admin/admin