This tutorial was created for people who has a basic Drupal knowledge : how to install Drupal and enable modules, how to create content, categorize it and generally understand how Drupal back office interface works. The idea is to learn how to create custom layout pages composed of blocs with any content inside. This tutorial will teach you the very basic combination of Views & Panels modules.

Depending on what type of website you want to create, content layout on your pages can be organized in very different ways. If you’re creating a blog, you can stick with default layout that Drupal provides, because it requires no configuration. After creating several nodes for your blog, they will be automatically displayed on your site home page (”story” node type uses “promote to front page” option by default). So, it will be something like this:

It is ok for a blog, but maybe you want something more complex, like having a two columns style for your content, or maybe just a promo page. The easiest way is using Panels and Views. This way you will not code anything, but of course nothing is perfect and sometimes you will still need to theme your page to get what you want.

So, the first steps will be to install Views and Panels. At the time this tutorial was written Views was 2.3 and Panels was 2.0-alpha3. This version of Panels is on the alpha stage so use it with caution, always check what you’ve done twice and test excessively!

After installing, enable Views, Panels, Panel Pages and Views panes modules. The Panels module used for organizing stuff on the page in visual style and uses predefined page layouts (but of course if you want you can add your custom layout). So depending on the layout you selected, your page will be splitted into several “panels” in which you can insert what you want. And you do not need any coding experience, isn’t it exciting ? Views module provides a flexible method for web-site designers to control how content lists are rendered. Basically, it creates content lists filtered and sorted in a configurable way. And again no coding needed.

In this tutorial I assume that you want a simple two columns layout for two different  node categories. Let’s go creating some views:

1. Go to www.yourdomain.com/admin/build/views/add

2. Input desired view name and select “Node” in “View Type” checkboxes list. By selecting “Node” you’ll tell Views system that you’ll list “nodes” by this view (and not users or something else).

3. Press “Next“. You will see view configuration page with a lot of defferent settings.

4. Add filter “Taxonomy: Term = first|second column” and two fields “Node: Title” linked to node and “Node: Body“. This can be done by pressing “+” button on the needed section and inputting values. No big deal. Press “Save” .

5. Basically, we’ll need to create two views with listings of node titles with term “first column” and “second column” (I assume that you already created these two terms and assigned them to some nodes. If not, try to create a vocabulary and assign it to your content type, this is done inside Taxonomy menu.)

Creating panel:

1. Go to www.yourdomain.com/admin/panels/panel-page/add

2. Select the page layout you want: “Two column”

3. After clicking on the needed layout, input your panel name and the path that will be associated with this panel. Notice that you can set any path (URL) for your page. With Panels module you can create pages with customized content and paths.

4. Press “Save and proceed“. You will see a configuration page for your new panel. It consists of a lot of options, but what we really need is tab “Content“. Go there.

5. Add your view for the first column in the left side and your view for the second column in the right side. On screenshot below “first_column” is the first view and “second_column” is the second view you created on previous steps.

6. Press “Save” and go to the url you defined on the first step of creating a panel:

That’s all. This is the magic of Views + Panels. This tutorial is very simple, but imagine what you can do with this successful modules combination! Just play around with this modules and you will see how much can be done by just using your mouse, and this tuto