Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Setting up a Multi-column Home Page

Video loading...

  • 0:04
    Hello everyone, and welcome to Drupal and Panels.
  • 0:07
    Today I get to share with you my favourite module in all of Drupal, and that's the Panels module.
  • 0:12
    But before I start to show you all the great things you can do with Panels,
  • 0:15
    I'd like to explain a little bit why the Panels module is necessary.
  • 0:19
    The Panels module allows you to define custom layouts and displays of content for your site.
  • 0:25
    The way this problem has traditionally been solved in Drupal is by allowing you to define specific regions in your theme
  • 0:31
    and then allowing you to add different blocks into those regions.
  • 0:36
    On this site, you can I'm using the Bartik theme, and if I want to know what regions are available to this Bartik theme
  • 0:43
    I can do that from the 'Blocks administration' page.
  • 0:46
    This is under 'Structure'; 'Blocks', and at the top of this page there's a link which says 'Demonstrate block regions'.
  • 0:51
    If we click on that link, we can see the regions that are available to the Bartik theme.
  • 0:56
    From looking at this page you can tell there are a lot of regions, and there's a good reason for that.
  • 1:00
    This systems assumes you want the same layout for every page on your Drupal site.
  • 1:05
    As it turns out, most websites don't want the same layout on every page,
  • 1:09
    and the only that you can get this system to allow you to have different layouts for different pages
  • 1:14
    is by defining regions in your theme that are either used or not used, based on page.
  • 1:19
    I find that to be a fairly sloppy solution, and what I like to do instead is use the Panels module.
  • 1:25
    Let's say for example, a designer came to us and said she wanted us to use a custom two-column layout
  • 1:31
    for the homepage of our website.
  • 1:33
    We want a new article on the left-hand side, and we want a giant advertisement on the right-hand side.
  • 1:39
    If we look at this layout, and we compare it to the regions that are available to the Bartik theme
  • 1:43
    it doesn't look like there's a very easy way to get that content to display.
  • 1:47
    It turns out there is an easy way, and all you need to do is use the Panels module.
  • 1:51
    So I'm going to go to the 'Modules' page, I'm going to turn on Panels
  • 1:55
    and two additional modules.
  • 1:57
    The two other modules I'm going to turn on are both in the 'Chaos Tools Suite'.
  • 2:00
    One of them is 'C-Tools module'; this is the module Panels depends on;
  • 2:04
    and the other one is the 'Page Manager' module.
  • 2:08
    So I'm going to turn C-Tools, Page Manager and of the course the Panels module itself.
  • 2:13
    Then click 'Save'.
  • 2:16
    Once these modules are turned on
  • 2:18
    you'll notice that there will be a new link under your 'Structure' section of you menu,
  • 2:22
    called 'Panels'. We're going to visit that page and we're going to use the Wizard to walk us through building our first panel.
  • 2:28
    On the left-hand side where it says 'Create new...' we're going to click the link for Panel page
  • 2:32
    and walk through creating a new custom layout for our homepage.
  • 2:37
    The first things we're going to define are the Administrative title,
  • 2:40
    we're going to call it 'Front page'.
  • 2:42
    And then Administrative description, also Front page.
  • 2:46
    And then a path for our page.
  • 2:51
    You'll also notice there's a check box right here, that allows us to make this
  • 2:54
    your site homepage; that's exactly what we want to do
  • 2:57
    so we're going to ahead and check this box, and click 'Continue' at the bottom of the page.
  • 3:02
    The second step of our Wizard has us choose the layout for our new page.
  • 3:06
    So, since our designer said we need to do a two-column layout,
  • 3:09
    we're going to change the Category to 'Columns 2' and look at the two-column layouts that are
  • 3:13
    provided for us by Panels.
  • 3:15
    The one we want is this one on the left; just a very simple left-right column layout.
  • 3:20
    We're going to click 'Continue'.
  • 3:23
    The third option is our settings for this panel.
  • 3:25
    On this page the only thing that's of interest to us right now
  • 3:28
    is this 'Disable Drupal blocks and regions' checkbox.
  • 3:31
    And what this will do is prevent the content in our left sidebar from appearing on our homepage.
  • 3:37
    We're going to go ahead and click 'Continue', bottom of this page,
  • 3:41
    and now you'll see a wireframe layout of what our content will look like.
  • 3:45
    We've got a grey box indicating the left, a grey box indicating the right,
  • 3:48
    and a little area at the top where we can define the title.
  • 3:51
    As it turns out I don't want a title for my homepage,
  • 3:54
    so I'm going to change the Title settings to 'No title'.
  • 3:58
    And now you'll see that the text box for the title has disappeared.
  • 4:02
    We're going to go ahead and add some content to the page here.
  • 4:04
    On the left-hand side we add content by clicking the cogwheel at the top-left of the left-hand side region.
  • 4:10
    And the first option in that dropdown is 'Add content'.
  • 4:14
    So we'll choose to add content, and when the 'Add content' screen opens,
  • 4:18
    you'll see a bunch of catagories on the left-hand side.
  • 4:21
    What you see here, by default, are all of the blocks that are available to you
  • 4:25
    via the blocks interface.
  • 4:27
    Also re-organised and available to you in the Panels interface.
  • 4:30
    So everything that you should normally have access to, you can reach through Panels.
  • 4:36
    We're going to go ahead and add a block that we've already created;
  • 4:38
    this block is an ad.
  • 4:40
    So under 'Custom blocks' we'll find one here called 'Ad', and we'll drop it into the page.
  • 4:45
    It gives you some configuration options about how you want your ad to display.
  • 4:48
    In this case, it's just asking us if we'd like to over-write the title
  • 4:52
    or if using the title 'Advertisement' is correct.
  • 4:54
    We're going to leave it as 'Advertisement' and click 'Finish',
  • 4:57
    and it'll drop that content into our wireframe on the page.
  • 5:00
    We're going to do the same thing on the right-hand side, but instead of
  • 5:04
    adding an ad, which was a block, we're going to add an existing piece of content.
  • 5:08
    So we're going to choose the 'Add content' link in the dropdown,
  • 5:11
    but in the overlay that opens up, there's another type of
  • 5:14
    content linking at the bottom called 'Existing node'.
  • 5:18
    So we're going to click on the link for 'Existing node'
  • 5:21
    and now it will let us enter in the title or 'Node ID' of the piece of content.
  • 5:25
    So if we happen to know the title of the piece of content
  • 5:28
    though there's a nice little auto-complete here that will help us find it.
  • 5:32
    And after we've added the piece of content,
  • 5:35
    we can also decide how we would like it to display.
  • 5:38
    The most important configuration on this page is this 'Build mode' down at the bottom
  • 5:41
    where it says would you like to see a teaser?
  • 5:43
    We could also change this to be the 'Full content'; in this case I think a teaser makes sense,
  • 5:48
    and since we've left the Build mode here to be 'Teaser'
  • 5:50
    we can also leave this box checked, which will include links
  • 5:53
    for 'add comment' or 'read more'.
  • 5:55
    If we decided to show the whole piece of content on the front page,
  • 5:58
    it might not make sense to leave links here to read more.
  • 6:02
    We're also going to check this box to 'Link the node title to the node',
  • 6:06
    and that will allow the title of the piece of content shown on the page
  • 6:09
    to link to the rest of the piece of content.
  • 6:14
    We're going to go ahead and click 'Finish' and that content will be dropped in to the right-hand side of the page.
  • 6:19
    The best part about Panels is its drag-and-drop ability.
  • 6:22
    We can click on any piece of content, and drag it in to any region on the page.
  • 6:26
    This makes a lot more sense for anyone who's used to dragging and dropping layout builder tools.
  • 6:31
    So now we've got our content on the left and our ad on the right
  • 6:35
    just like our designer asked.
  • 6:38
    Now we can go ahead and click the 'Finish' button, and on the next page
  • 6:40
    you'll see your Panel in the Page Manager interface.
  • 6:44
    For the most part, we're going to come back and visit a lot of these options later;
  • 6:48
    for now all you need to remember to do when you get to this interface
  • 6:51
    is to click 'Save' and there's two ways to do it.
  • 6:54
    There's an 'Update and save' button in the middle of page,
  • 6:57
    and there's also a 'Save' button at the bottom-left.
  • 6:59
    As long as you click the 'Save' button your work is complete,
  • 7:01
    and you can go back to the homepage of you site and
  • 7:04
    check out your new two-column layout.
  • 7:07
    This is really great, but using the Page Manager interface
  • 7:12
    can be overwhelming. Using the Panels Wizards can be overwhelming to some new users.
  • 7:18
    And sometimes you just want to let them to edit the content right on the page.
  • 7:22
    As it turns out, there's a module for that so if we go back to the 'Modules' page,
  • 7:26
    Panels provides a module called the 'In-Place Editor'.
  • 7:29
    It's in the same group as the Panels module.
  • 7:31
    And we're going to turn on the 'In-Place Editor'.
  • 7:34
    We're going to click 'Save', and after this module is enabled
  • 7:37
    we can go back and edit our existing panel.
  • 7:40
    My favourite way to edit existing panels is to use the Contextual Administration link
  • 7:44
    that appears on the page. It'll be in the top-right hand side of your panel area.
  • 7:49
    You click on the cogwheel and you get an 'Edit panel' link.
  • 7:52
    You click on the 'Edit panel' link and you get returned to exactly the correct place
  • 7:56
    in the Page Manager interface.
  • 7:58
    Now that we're here, we're actually going to change something that's not related
  • 8:02
    to the display of this content;
  • 8:04
    what we're going to change is the 'Renderer' that's used to display this page.
  • 8:07
    And that's controlled under the 'General' category, on the left-hand side.
  • 8:11
    So we're going to click on 'General', and now that we're here
  • 8:14
    we're going to check on the 'Renderer' settings.
  • 8:17
    When we first set up this panel, the only option that was available here to us was 'Standard',
  • 8:21
    but now we turned on the 'In-Place Editor' module,
  • 8:24
    there is a new 'Renderer' called the 'In-Place Editor', which we're going to select.
  • 8:28
    So we're going to select that, 'Update and save' our panel,
  • 8:31
    and return to the front page to have a look at it.
  • 8:34
    Now that the 'In-Place Editor' is turned on you'll notice a new black bar
  • 8:38
    at the very bottom of the page, with a button in it that allows you to customise this page.
  • 8:43
    We can click on this button, and now the content of the actual page becomes editable.
  • 8:48
    So now you can drag-and-drop your content into different places on the page,
  • 8:51
    and in addition to re-arranging content you can also change the way that it's configured.
  • 8:58
    So if you wanted to delete a panel pane, you could do that.
  • 9:01
    If you wanted to change the way it looks, there's a style palette
  • 9:04
    where you can choose, for example, if you want this advertisement to have rounded corners.
  • 9:09
    You can also change the configuration options, so if you decided to wanted to title to be changed
  • 9:14
    you can do that too.
  • 9:16
    All of these changes happen real-time in the page, so you can see what they actually look like,
  • 9:20
    and when you click 'Save' all of your changes become permanent.
  • 9:24
    This is the kind of interface that anyone who's building a website
  • 9:26
    can wrap their head around, that they'll understand exactly
  • 9:29
    what they're doing, and it'll be very intuitive and friendly for them to use.
  • 9:33
    This is a definite improvement over the custom-coding you would need to do
  • 9:36
    to add custom regions and tiered themes, and the administration that needs to be done
  • 9:40
    in order to add blocks into those regions.
  • 9:45
    I hope that you like what you've seen about Panels so far.
  • 9:47
    You can continue watching this series because there's lots more I'd like to show you. Thanks a lot!

Setting up a Multi-Column Home Page


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: