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
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
Tutorial: Panels as Blocks
Blog postIn this tutorial, you will learn how to place panels in any region of your theme using Drupal's Blocks UI and a module packaged within the Panels project: Mini Panels. This tutorial is based on a free video in our library, Placing Panels in Blocks with Mini Panels
In this lesson, I provide a recap of the Panels-related tutorials in this series.
Additional resources
Building Websites in Drupal 7 using Panels — Drupalize.Me
Customize Panels Styles with CTools Style Plugins — Drupalize.Me
This screencast covers the following topics:
- What is Panels?
- Selecting Panels layout
- Disabling block regions on a panel page
- Adding content to a panel
- Outputting individual node fields in a panel page
- Manually setting the title on a panel page
- Inheriting page title from a panel pane
As discussed in the previous tutorial, one thing that affects markup in Drupal when using the Panels module is the Panels layout. In this tutorial, I will provide an overview of how layouts work in Panels. To learn more about how to create your own Panels layout in code, see the related tutorial: Adding Custom Panels Layouts in Your Theme. To learn how to use the Flexible Layout Builder in Panels, see this tutorial: Custom Panels Layouts.
Additional resources
Adding Custom Panels Layouts in Your Theme — Drupalize.Me
Custom Panels Layouts — Drupalize.Me
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
Now let's shift gears and take a look at how using Panels affects markup in Drupal. I will show you some unique-to-Panels concepts as well as how to apply Drupal theming principles to customize markup on a Drupal site that uses Panels.
In the tutorials that follow, you will learn:
- About Panels layouts
- How to add CSS classes using Panels
- How to override the panel pane template file
- What Panels means by “Style”—with a broad overview of Style Plugins and where to go for a deeper dive
Additional resources
Panels — Drupal.org
Chaos Tools Suite (CTools) — Drupal.org
Theming Basics for Drupal 7 — Drupalize.Me
In this tutorial, we'll take a brief look at what Panels means by "Style" as applied to a region or panel, and I'll walk you through the settings form and how to change a style for a panel pane using the Panels administrative console.
For a more in-depth look at Panels Style Plugins, including how to create your own, check out these related tutorials:
Additional resources
Customize Panels Styles with CTools Style Plugins
Styling Panel Panes with Stylizer
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
Panels, Blocks, Layouts, and Drupal 8
Blog postOver the years of Drupal 8 development we've heard a lot of talk about "Panels in core" or "Blocks everywhere" or "Layout all the things!" and even SCOTCH(?). What does it all mean? Is Panels actually in core? Well, no, but there are some cool improvements in Drupal 8. I decided to follow the breadcrumb trail to figure out what this initiative was really about and how it ended up, now that Drupal 8 is in beta. Join me for a little bit of a trip back through the life of the Blocks and Layouts Everywhere (SCOTCH) Initiative.
In this lesson we take the approach of using the Organic Groups Extra module to spruce up our team pages with relevant content. By itself Organic Groups doesn't do a whole lot to display either a useful groups page or the relationships between a piece of content and the group itself. Instead it relies on modules that are geared towards that specific task like Panels or Organic Groups Extras. Joe shows us how we can use OG Extras to make the group page itself a bit more useful by displaying some additional information like a list of group members and the list of all the content that's been posted in that group.
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
In this lesson Karen will talk about how to use Panels and Panelizer to display group content in various ways. She will first demonstrate how to use the built-in features that come with Organic Groups to construct a basic group and group panel. She explains how this can be done using the features module. She then demonstrates using the new Panelizer module to create a system where every group can have its own layout and content. Note: Karen enabled the Features module then separately enabled the OG Example feature, which has a dependency on Panels and other modules so basically Features enabled them. If you actually enable that feature on the modules page it will tell you that panels is required and asks to install it. Karen however enabled the Panels modules via the Features admin page.
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
In this tutorial, I will show you how to add and remove CSS classes from the body tag using Panels. I will also point out the other CSS-related settings and the pros and cons of each one.
Additional resources
Building Websites in Drupal 7 using Panels — Drupalize.Me
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
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
This week we're happy to continue two series for you. Coding for Views series continues to dive into fields and handlers, while the FREE Building Websites Using Panels series looks at using variants.
Coding for Views
In this tutorial, I will demonstrate how to add a wrapper div and a class around, and just outside, the Panels layout markup, using the Panels administrative console.
Additional resources
Building Websites in Drupal 7 using Panels — Drupalize.Me
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
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