Drupal 7 Panels Module (part 3) - Layout Builder

By shane
Wed, 2013-03-20 10:30
Daily Dose of Drupal Episode #130

Share with Others

In this episode we continue learning more about the Drupal 7 Panels module and go over how to use the panels flexible layout builder to easily build complex layouts using the panels module.

In this episode you will learn:

  • How to use the Panels flexible layout builder
  • How to convert a standard Panels layout to a flexible layout

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

Hello everyone and welcome to another episode of the Daily Dose of Drupal, today we’re on Episode Number 130 and we’re going to continue on learning about the Drupal Panels Module.

Two episodes ago we learned how to build a simple Drupal Panels Module or Drupal Panels page and the last episode we learned how to override the Node View page by creating a variant for that specific Node Type and we also learned how you can do that with different Node types by adding additional variance.

Today we’re going to learn how to use the Panels flexible layout builder so you don’t have to use the pre-configured that come with Panels. Before we get started as always I’m Shane Thomas, you can follow me on Twitter at smthomas3, you can also go to codekarate.com, sign up for the newsletter over here on the left, you can also click the Support Code Karate link and learn a little bit about the Code Karate supporter program on how you can help Code Karate get even better today than it was yesterday.

Today’ sponsor is OSTraining.com OS Training is a great way to learn about how to build websites not only in Drupal but also Joomla and Wordpress. They also have a whole bunch of training on just basic coding techniques and technology so you can go to learn about HTML, CSS, PHP and introduction to responsive design which is a really good one, you can also of course learn about Drupal.

They have a whole bunch of courses about Drupal and so you should go ahead and check them out, their prices are very reasonable and they provide very good training classes on these different technologies.

So let’s go ahead and get started; as I mentioned before, we’re going to pick up where we left off so I’m going to click on Structuring and go to Pages and you can see I have the My Panel page that we created two episodes ago and we also created this Node View template in which we created a Contact Node View page and change the layout and format of that.

I’m actually going to come to the one that we did two episodes ago and I’m going to edit that and we can take a look at see that they have a couple of different things showing up here but what I really want to do is I want to change the layout from this two column layout.

You can see it comes with a 1 column, a couple of 2 column layouts and then a couple of three column layouts but I want to use the builders category and select Flexible. It’s going to of course try to convert everything over that I had showing up into the flexible ones so I’m going to go ahead and click Update and Save, we’ll continue and come down to Layout and now you can see it dropped everything in to this central layout.

And now you can see there is this show layout designer button. This is actually where you’re going to be able to change how you want the layout to be structures so right now it gives you one column, just calls it Center. By clicking on Show Layout Designer you can see it changes the display a little bit and we can actually change how many regions we have so if I click on this region settings I can remove this region or I can give it specific settings like a CSS Class but if I come up to the Row section I can add a region … let’s say to the left of this.

I’ll go ahead and call this left region, I can give it a CSS Class if I wanted to so I go left to that region and I can select if I want this to be fixed or fluid with. Go ahead and select Fixed here. Now you can see I can change the width of this so if I want this to only be … we’ll say 100 pixels I can update and save that and now you can see I have a left region and a center region.

If I come back to show layout designer I can of course change that and now you can see I can make it a little wider. This left one is going to be fixed and this one would be fluid. I am using a fix with theme so it’s not really going to change much but you can keep that in mind that this would be actually the fluid section, this would be fixed. If I change this region from fixed if I would have edit it and create it as a fluid region so let’s say I removed this region I’ll add a region left and we’ll make this one fluid and I save that, now you’ll notice instead of pixels it’s giving me percentages.

So I can say I want this to be a specific percentage and in this case we’ll say maybe around 30% on this side and 70% on the other side. Now when I save that it of course puts it in that position, 30% here and about 70% here. I can now add sections above this row so you have this row; you can also add different rows below that or above that. So I can give it a CSS Class, I can specify whether it contains regions which is what we just created with that left region or completely new columns so I’m going to go ahead and select regions here.

Now I can add another region, now I’ll call one Bottom Left and I can also create one on the right side and call it Bottom Right. I could of course change this but I’m going to keep it 50% on each. Now I update and save that and you’ll notice I now have a region left, a center, a bottom left and a bottom right. I can drag stuff into these different regions of course it says I could before and update and save that. I can come back into our layout designer here by clicking the Show Layout Designer.

You can also of course get out of it just by clicking here and just bouncing it back and forth and between the different either showing the designer or not showing the designer. I can come up to the canvass level and I can add a column either to the left or to the right of this so I can essentially add an entire column to the left of all of this if I wanted to so if I add a column to the left … actually I want to … that was a CSS Class so I want to make sure that’s valid and now you can see I have a column here and then I have this more complex layout here inside this column I can add additional rows and inside this row I could have additional columns. So as you can see you can get very complex layouts if you want inside this Panels Builder.

As you can see it can get to a point where it’s almost too much so you want to of course always know what you’re trying to build beforehand and then make your regions accordingly. So as you can see I have a lot of extra stuff here I don’t really need but if you take a look it of course shows me I have this region left here, I have another region I could of course rename this. I’ll go ahead and rename this one just to give it a different name.

Now of course I can move something over here or add something so I’m going to go ahead and find something to add, I’ll add the recent content from the site, I can give it a different label if I want and I can update and save this. So now that I have that we’re going to go ahead and go to the URL for this and if come back I can of course see what that URL is. I believe it’s up here, it’s on test4.codekarate.com/panel-page.

So I’m going to go to that page and you can see I got my complex layout so I have this Check out This other Post, I renamed that and it shows the recent post on the site. I have my custom content section and there’s just the content block that I created or custom content inside the Panel.

There’s this node that’s getting loaded here. If I go down to the bottom section of course I have this advance search section and this Powered by Drupal block. These are all in different sections and you can see it’s completely taken over the entire output of the page. So it’s incredibly flexible using the Flexible Layout Builder, you can change the entire layout to match perfectly and exactly what you need.

It takes away and it saves you a lot of time from having to do a lot of CSS in order to move things into different regions and different sections and you don’t have to worry about structuring your HTML because the Panels Module will do it for you. You can then simply come in at the end, add a little CSS Code to clean it up and you’re good to go when you have a fully functional, fully flexible page and if you ever need to add something or move something around you just come in here and you can move it around or add different sections and change it as you need.

So that’s the Layout Builder or Layout Designer in the Drupal 7 Panels Module and we’ll probably take a break from Panels Module episodes but we’ll probably come back to them in the next couple of days or a couple of weeks but thank you for watching this episode of the Daily Dose of Drupal, thanks to OS Training for making this possible and we’ll see you next time.