Drupal 7 Panels Module Basics (part 1)

By shane
Wed, 2013-03-13 23:57
3 comments
Daily Dose of Drupal Episode #128
Series: 

The Drupal 7 Panels module allows the creation of customized page layouts using an easy to use drag and drop page builder. Panels can be used to build custom pages, change the layout of node (or content type) pages, and even modify the Drupal user profile or account page.

In this episode you will learn:

  • An overview of what the Drupal Panels module is and how it can be used
  • A quick overview of Drupal 7 Panels options and configurations
  • How to create a custom Drupal 7 Panel page

Thanks to ModuleNotes.com for sponsoring this episode of the Daily Dose of Drupal.

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 128 and we’re going to be going over the Panels Module today. The Panels Module is an extremely complex layout builder or basically it’s almost like a site or design management tool for your Drupal site and we’re going to go over it in a couple of different segments and a couple of different episodes because it’s not something I’m going to try and cover all in one episode and I’m going to start with just the basics, a few simple episodes going over the basics and depending on how you respond.
I can either continue going into more depth on Panels and some of the various options and configurations that you can create with the Panels Module or I can move on to other things. But before we get started with the Panels Module as always I’m Shane Thomas, you can follow me on Twitter at smthomas3, also go to codekarate.com and sign up for the newsletter if you haven’t already.

Today’s episode is sponsored by modulenotes.com. If you haven’t checked out modulenotes.com yet you should do so right now. It is basically a very simple idea behind the entire site but it provides module descriptions in a more readable format I guess you can say. It’s easier to understand the module descriptions on the site.
So they take complex module descriptions from drupal.org and it’s written by a designer for designers. I by nature am not a designer and they still helped me understand complex modules in which you may be wondering what does this module actually do.

So go ahead and check out modulenotes.com, view some of the descriptions they have in modules and see how it can help you more easily understand what a module does before you install it.

Let’s go ahead and get started; the first thing you need to think about when you’re building or using panels is what exactly you’re going to need to use Panels for. I’ve used Panels on dozens and dozens of Drupal sites spending in the last few years and the main two reasons I’ve ever used Panels to either build a custom page with a specific complex layout or to … and this is the most common one; change or configure a specific content type page.

So if you want your articles to show up in a specific format or you want … you have another content type, you know, whether it’s your pages or whether it’s a more specific content type and you want to control how it is laid out and how it is displayed. That’s where the Panels Module comes in.

The first thing I’m going to do and this may seem counter intuitive but I’m going to enable the Page Manager module. It’s a little … it just makes it simpler, you don’t necessarily need it for the basic Panels Module to be installed, it’s not a dependency but it comes with C Tools which is a requirement for Panels, I would just go ahead and turn it on. It makes managing the pages on your site much easier. I‘m also going to turn on Panels and I’m going to leave that … just turning on Panels now, I guess that I may cover some of this other modules that come with in a future episode but we’ll just start with the basics.

In this episode I’m just going to go over how to build a custom page with Panels and then the next episode I will go over some … or how to actually override the node view or a content type display page using the Panels Module. So now that I’ve enabled the Panels Module you can see there’s an option for Panels here.

Here you can create a new Panel page or you can create a new custom layout and you’re going to notice when you first get into Panels if you haven’t looked at it before it’s going to look very intimidating, very confusing, don’t worry we’ll walk you through step by step with what you can do and overall you’ll find out it’s not really too bad. You can also click on Pages which this is kind of a different view. This is how you are going to be able to override Node View Pages and even user profile pages using the Panels Module.

So if I add a custom page or I can come into Panels I can add a page here, the same thing. So I can go ahead and click Add to add a new page, I’m going to give it an administrative title; I’ll give it a path. So this is the path that you’re going to actually be able to access your page at and you can click here to make the site your homepage, you can make this page display in an admin overlay.

This is if you’re making an administrative panel page this would be helpful. Variant type; most of the time it’s going to be Panel; I’m not going to go over the http response or http response code. Most likely I’ll just leave it at Panel. You can add optional features such as Access Controls so you can control who can see this page and you can add a visible menu item which I’ll go ahead and do and you can add selection rules and context and we’re not going to cover those today but just know that they’re there and you can take a look at them and try to figure them out on your own or hopefully it will be a future video that we’ll walkthrough those.

So I’m going to create a normal menu entry, we’ll just call it Panel Page and put in the main menu and now we get to select how we want this Panel Page to be laid out. I’m going to go ahead and select a two column layout with this two column stack and in the future episode we’ll cover the flexible layout page because that’s really where in all honesty probably 70 – 80% of the time I use a flexible layout just because then it allows you to really control how you want your page to be laid out but I’m going to go ahead and use two column stack this time to keep it simple.

We’ll come back to what this option does to disable blocks and regions but first we can remove specific bodies, CSS classes, add bodies CSS classes. I’ll give it a CSS ID for the entire page, you can even drop in some custom CSS Code here. I would usually put your CSS Code almost always in your theme … you generally don’t want to use this box but it’s here if you need it.

So now once we click Continue now you can set the title so I’m going to set this title as My Panel Page and now you can see I have these 4 different regions; the top, bottom; left and right side.

Now is where it really becomes the easy part. We just start adding things to this various sections. So I simple click here, click on add content and Panels comes with a whole bunch of default items that you can add in here. So I’m just going to kind of flip into some of this.

So let’s say for instance I want to add the powered by Drupal block, I can go ahead and click that, you can give it a title or a block title, you can see it now drops into this top section. I can drag this into other areas, I’ll go ahead and click finish here and once I click Finish you can see I get some more options.

Now it’s easier to drag so I can drag this into other areas and I’m going to go ahead and drop this in the bottom and click Update and Save. Basically any block, thankfully you can normally add or configure in the block settings is going to show up on this page generally under the … I believe custom blocks or miscellaneous depending on what it is.

Also you can display Views Blocks in here, there’s a views content panes module that also allows you to display views. So you can really get complex layouts. So we’re going to go ahead and add an advance search form as well, I’m just kind of randomly picking some items here just to have … just a couple of different options.

Some reason it doesn’t want to stick, there we go and I will go ahead and add … this time I’m going to add a new custom piece of content. As you can see whatever contents you want and this is very similar on just creating your custom block, you can change the text format of course and that will drop in there so we can click Update and Save and then I will find something here to add in the top, you can add an existing node and I will drop in a complete full node so if I want to find the node that I want I can grab one, I can include node links and you can link the title to the actual node page, you can have it display the teaser or with a full content and I will go ahead and leave this dropped into the top.

It’s going to actually display this node page on top, there will be a search form in the left side bar below that and then my custom content in the right side bar and of course the Powered by Drupal will be in the bottom section of this Panel page. You’ll notice that on the side here you have a lot more options to look through; we’re going to browse to these really quickly. Basic is the basic information you filled out when you created the page. Access is to allow access to specific users.

For instance you can base it on user role or permission, you can based it on specific URL paths, you can use PHP code, a whole bunch of different … basically access rules to determine if a user can see this page. The Menu Item is where we created this Menu Item and Panels has something called Variance.

And we’re going to go over Variance in the future episode rule. I won’t worry about too much but know that they’re there and you can see there’s a couple of different options here; selection rules is basically so you can select which variant to display.

So if you have multiple variances … like I said we’ll cover that more detail later and context is a whole another … quite a little bit bigger topic to discuss. So we’re going to keep our simple layout in kind of go over the basics of what you can do with Panels.
So now that I’ve created this, I mean make sure I know panel-page, this should have a … and I do, I have a menu link of course that I created, I click on Panel page and you see it gives me my title and now it has this node. So it’s the node that I selected and loaded. It’s only showing the teaser format of course, I can click this it will bring me to the full node page.

On the lefts side over here I have the advance search box on the right side, this is my custom content that I created and of course in the bottom I have this Powered by Drupal. One thing to note is you can easily hover over here and click Edit Panel, that will bring you back to the Panel Editing page.

Another thing you can do is Panels come with a couple styles you can select so I’m going to go ahead and change the style and I’m going to … we’ll go through these options, you can have no markup at all, you can have a list style markup, no style or rounded corners. I’ll go ahead and select rounded corners for this and I will say I want rounded corners around each region and I will show you the difference here what that does; I move this … it’s a small area there but if up and down I’ll show you that here’s a rounded corners here.

If I come in and move this over here and save it you’ll notice that there’s only rounded corners around the entire region itself. However if I want to change this to basically make rounded corners around each pane instead of each region. Now it’s going to make rounded corners around each item inside this left side region. So we’ll go ahead and save that and now you can see there’s rounded corners around each item. So there’s basically a different ways so you can style and customized the way this looks.
Keep in mind that this is of course not a pretty looking page yet, I haven’t really put a lot of thought into it but this is really good for displaying or customizing homepages or landing pages, anything with complex layouts where you may need a form or a block over on one side and you may need to display part of a node on one side.

It’s really great for displaying multiple views so if you have different views you need to display on one page. One thing to keep in mind is it’s easy to go overboard with panels and to try to put too much into one page. If you’re trying to load 4 or 5 or 6 different views on one page just keep in mind all of the information that’s going to loaded from the database when you’re loading that page and there are things you can do with views and with Panels to add caching and things like that but just keep in mind the more you add the bigger performance hit is going to take on your site. That’s the intro to Panels.
As you can see you can use it to build a very complex pages and easily drag and drop and move around different items on your page. Tomorrow we’ll cover some more on Panels and we’ll go over how to use Panels to override a node page or a node view page and also well discuss some more Panels, Items and maybe go over a how to also override a user profile page or the user View page in Drupal.

That’s it for today, thanks again to modulenotes.com for sponsoring today’s episode of the Daily Dose of Drupal and thank you for watching, we’ll see you next time.

5 Secrets to Becoming a Drupal 7 Ninja

Comments

Hi Shane
Around 7.50 minute win this video, you add content to the panel by clicking on an icon in the column field (or maybe the row), I cannot see that icon in 7.34 of Drupal and the latest version of Panels. Any ideas how to fix this or how do I add content to a panel?

Post new comment