Custom Panels Layouts

Video loading...

  • 0:00
    Custom Panel Layouts
  • 0:00
    Building Websites Using the Panels Module
  • 0:03
    with Jen Lampton
  • 0:04
    Hello, and welcome back to Drupal and Panels.
  • 0:07
    Now that you've learned how to use panels to create layouts for custom
  • 0:10
    pages on your site, and how to use Page Manager to take over
  • 0:13
    the display of existing content on your site,
  • 0:16
    we're going to go one step further, and teach you
  • 0:18
    how to build your own layouts using panel's
  • 0:20
    built in layout designer tool.
  • 0:23
    We're going to start by changing the display of a blog post.
  • 0:28
    Instead of trying to display the blog post the way it looks
  • 0:30
    by default, or trying to make it display like an article, where we
  • 0:35
    divided the center content area of the page into two equal columns,
  • 0:39
    our designer has given us a new wire frame--
  • 0:42
    one that has a special right hand column
  • 0:44
    that's about 210 pixels wide.
  • 0:47
    As we walk through the panel's interface,
  • 0:48
    you'll notice that this layer doesn't exist,
  • 0:50
    and we'll have to build this one ourselves.
  • 0:53
    So we're going to start taking over the display of this blog post
  • 0:56
    the same way we started overriding the display of an article,
  • 0:59
    by going to the page manager interface.
  • 1:02
    That's located under Structure, Pages,
  • 1:04
    and here we're going to edit the template that's provided for notes.
  • 1:09
    We're going to go ahead and click, Edit.
  • 1:10
    And now we'll need to add a new variant that
  • 1:12
    will only affect our blog posts.
  • 1:14
    The one we have currently affects articles,
  • 1:16
    and we don't want to change that one.
  • 1:18
    So we'll add a new variant, using the link at the top.
  • 1:21
    And we'll give it the name of Blog.
  • 1:24
    Our variant type will be panel, and we're
  • 1:25
    going to add some selection rules that will make this variant only
  • 1:28
    apply to the content type blog.
  • 1:31
    On the first step, we'll define our selection
  • 1:33
    criteria for note type blog.
  • 1:39
    On the second step, we'll choose a layout.
  • 1:42
    Instinctively, we'd want to go to the Columns 2 category.
  • 1:45
    But you'll notice that there's no two
  • 1:47
    column layout provided that matches what our designer would
  • 1:49
    like us to build.
  • 1:51
    So instead of using the Columns 2 categories, what we're going to do
  • 1:54
    is leave it on the builders category,
  • 1:56
    and select the flexible layout provided by panels.
  • 1:59
    This will allow us to build our own layout later on in the process.
  • 2:03
    We're going to continue to step three,
  • 2:04
    where we have the option to turn off the sidebars,
  • 2:07
    or change the renderer.
  • 2:08
    But in this case, we'll do neither, and continue to step four.
  • 2:12
    On the fourth step, where we'd usually just add content
  • 2:15
    to our panel, we now have some new options on this page, that
  • 2:17
    let us show the layout designer.
  • 2:20
    So we'll start by creating our new layout.
  • 2:23
    If you click the Show Layout Designer button
  • 2:25
    in the middle of the page, you'll be able to see
  • 2:27
    how layouts are created.
  • 2:29
    In panels, all of your content panes, or panel panes,
  • 2:32
    need to be placed into a region.
  • 2:34
    All of your regions need to be inside a row, all of your rows
  • 2:37
    need to be inside a column, and all of that happens on your canvas.
  • 2:41
    We want to start by adding a new column on the right hand side.
  • 2:44
    So we're going to start by clicking the canvas link.
  • 2:48
    Add a column to the right.
  • 2:51
    And here, it's going to ask us if we'd like to add a CSS
  • 2:53
    class to the column, and how we'd like the width
  • 2:55
    of that column to be determined.
  • 2:57
    We know the width of this column needs to be 210 pixels.
  • 3:00
    So from this drop down, we'll choose fixed.
  • 3:03
    The next step is to add a row into our column.
  • 3:06
    So we'll click on the link for column, and add a row.
  • 3:10
    Again, we have the option to add a CSS class.
  • 3:12
    And here, we have the choice to decide
  • 3:14
    whether our row should contain regions,
  • 3:16
    where we should put our content.
  • 3:17
    Or this row could also contain columns,
  • 3:20
    where we could put more rows, where we could put more regions.
  • 3:23
    In this case, we have a very simple requirement, so we're
  • 3:25
    going to leave regions in this row.
  • 3:29
    And the last step is to add a region into the row.
  • 3:32
    You do that by clicking on row, and adding a region.
  • 3:37
    This region needs a title.
  • 3:39
    We're going to call it, sidebar.
  • 3:42
    We can add a CSS class to the region,
  • 3:44
    and we could also decide how we'd like the width
  • 3:46
    of this item to be decided.
  • 3:48
    Here, we're going to leave it as fluid.
  • 3:52
    So now, we have two columns-- a center column, and a sidebar.
  • 3:56
    You'll also notice there's a little slider.
  • 3:58
    And this is how we get to set the width of that sidebar.
  • 4:01
    We can grab it, and drag it to the left,
  • 4:03
    until our column is exactly the right width.
  • 4:05
    In this case, it's 210 pixels.
  • 4:08
    And don't worry if this doesn't look exactly right now,
  • 4:11
    because as soon as you hit Create Variant,
  • 4:13
    everything will straighten out.
  • 4:16
    Now we have a column in the middle, called center,
  • 4:18
    and a column on the right, called sidebar.
  • 4:20
    What I'm going to do next is go ahead
  • 4:22
    and add content into my panel.
  • 4:24
    I do that by clicking on the cogwheel on the left, and choosing,
  • 4:26
    add content.
  • 4:27
    On the left hand side, we're going to add the content of our node.
  • 4:30
    So that'll be in the node category.
  • 4:32
    We're going to grab the node content pane, and drop that in.
  • 4:36
    Since we've done this before, we know we need to override
  • 4:39
    the title so that won't show up.
  • 4:42
    We know we need to uncheck the Link title to node check box.
  • 4:46
    We're going to leave our links displaying on our node,
  • 4:48
    and this time, we're also going to leave the extras.
  • 4:51
    We're also going to change the build mode down to full content,
  • 4:54
    here at the bottom of this form.
  • 4:59
    We're going to go ahead and update and save.
  • 5:03
    And then we're going to add some content to the sidebar.
  • 5:06
    Our designer has pointed out that the information
  • 5:08
    we should show in this sidebar is the author
  • 5:10
    and the date of this post.
  • 5:12
    Those two things can also be added.
  • 5:15
    They're located in the node category.
  • 5:18
    The author is called node author.
  • 5:20
    We can drop that in.
  • 5:22
    And the date, it's added in the same way-- node category,
  • 5:26
    node created date.
  • 5:27
    And there's an option here if you wanted to change the format.
  • 5:33
    Now we're going to update and save.
  • 5:34
    And we'll go take a look at our content.
  • 5:38
    Great, so now we have two columns.
  • 5:40
    The one on the right hand side is 210 pixels wide.
  • 5:44
    And the one on the left has the majority of our content in it.
  • 5:47
    There's a couple other things we should
  • 5:48
    change for this content pane.
  • 5:50
    We talked about making sure that the panel page title was
  • 5:55
    that to pull from the pane title.
  • 5:57
    We can change that here, too.
  • 5:58
    But we also have this, submitted by information being displayed twice.
  • 6:02
    It's displayed once in the node, and once again in the panel.
  • 6:06
    If we wanted to turn off the display in the node,
  • 6:08
    that's just a setting for the content type.
  • 6:10
    And it's located under structure, content types, blog post.
  • 6:15
    So we're going to edit the blog post.
  • 6:16
    On the bottom of this form in the vertical tabs,
  • 6:19
    there's a setting here for display settings.
  • 6:22
    We can turn off the display of the author and the date here.
  • 6:27
    So now, if we go back and check out our blog post,
  • 6:30
    you'll see we've got no submitted by information in the left hand side.
  • 6:33
    But we do have it on the right hand side.
  • 6:36
    I'm going to go and edit my panel, and make that page
  • 6:38
    title pull from the content pane.
  • 6:44
    So here at the top, we have title type.
  • 6:46
    We're going to change that to, from pane.
  • 6:48
    And we're going to make sure that our center pane is
  • 6:50
    providing the title for the page.
  • 6:54
    Now, if we really liked the way this new custom layout is working,
  • 6:57
    and we'd like to use this elsewhere around our site,
  • 6:59
    we don't need to build it from scratch every time.
  • 7:02
    One of things you might have noticed when we were first to designing
  • 7:06
    our layout was the reuse layout button,
  • 7:08
    also in the middle of the page.
  • 7:10
    If we go ahead and click that button,
  • 7:12
    we'll be able to save information about this layout,
  • 7:14
    so it'll be easily available the next time we're building a panel.
  • 7:18
    I'm going to call this one sidebar right.
  • 7:22
    And we'll put it into the category, Columns 2.
  • 7:26
    That way, the next time someone's looking for a two column layout,
  • 7:30
    they'll see this one, as well as the others.
  • 7:35
    I'm going to update and save my panel.
  • 7:38
    And just for fun, we'll go and try and change the layout.
  • 7:42
    If you click on the layout tab, just above content,
  • 7:45
    and now look in the Columns 2 category,
  • 7:47
    you can see our sidebar right layout appears here in this list, also.
  • 7:52
    One thing to note, that the graphic that
  • 7:54
    comes with the sidebar right layout will never look exactly
  • 7:58
    like the layout you've designed.
  • 7:59
    That's because this is the graphic that goes with the flexible layout
  • 8:02
    found in the builders category.
  • 8:04
    Just keep in mind that you can't always trust the graphic,
  • 8:07
    but the name there should be correct.
  • 8:10
    Another thing to keep in mind about using the layout designer tool
  • 8:13
    is that it lets you build new layouts really quickly,
  • 8:15
    but it's not necessarily the most performant.
  • 8:18
    If you wanted to deploy this layout on a live website,
  • 8:20
    it would be much better to build this as a panels layout
  • 8:23
    in code, which we'll talk about a little bit later on.
  • 8:27
    Now that you know how to use the page manager and panels module
  • 8:29
    to take over layouts and build your own custom layouts for existing
  • 8:33
    content on your site, we're going to talk about some quick ways
  • 8:35
    that you can change the style of the panes and regions
  • 8:38
    in those layouts in the next clip.
  • 8:40
    So stay tuned.

Building Websites in Drupal 7 Using Panels

Custom Panels Layouts

Loading...
8 minutes 40 seconds // HDCC //

Share

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:
There are no resources for this video, if you believe there should be please contact us.

Average review

5
Average: 5 (2 votes)

Reviews

Posted on Monday, March 24, 2014 - 8:06am by beades48
5

Can't wait for the next session on panels!

Posted on Friday, January 23, 2015 - 1:51pm by MaximumHormone
5

This was exactly what I needed to start!, just after a few hours of playing around with the basics I feel like an all-star.