(For more resources on Drupal, see here.)

Introduction

This is an article centered on building website looks with Panels. We will create a custom front page for a website and a node edit form with a Panel. We will also see the process of generating a node override within Panels and take a look at Mini panels.

Making a new front page using Panels and Views (for dynamic content display)

We will now create a recipe with Views and Panels to make a custom front page.

Getting ready

We will need to install Views as the module, if not done already. As the Views and Panels projects are both led by Earl Miles (merlinofchaos), the UIs are very similar. We will not discuss Views in detail as it is out of the scope of the article. To use this recipe, a basic knowledge of Views is required.

We will use our recipe of fl exible layout as our start for this recipe. To make a better layout and a custom website, I recommend using adaptive themes (http://adaptivethemes.com/). Here, in this recipe, I have used that theme. The adaptive theme is a starter theme and it includes several custom panels. There is also a built-in support for skins, which helps to make theming a lot easier. We will be using adaptive themes in this recipe for demonstration and will change our administration view from Garland to adaptive theme.

The adaptive themes add extra layouts as shown in the following screenshot.

How to do it…

1. Go to the Flexible layout recipe we created or you can create your own layout using the same recipe.
2. Now, we will create Views to be included in our Panels layout.
3. Assuming that Views is installed, go to Site building | Views.
4. Add a View.
5. In the View name, add storyblock1, and add a description of your choice.



6. Select the Row style as Node.
7. Put in Items to display as 3.
8. In the Style, we can select Unformatted or Grid depending on how you want to display the nodes. I will use Grid.
9. In the Sort criteria, put in Node: Post date asc and Node: Type asc.
10. In Filters, we just want the posts promoted to the first page.
11. Do a live preview.



12. We will need to add display of the default view as Block, so that the View is available as a block, which we can select in our Panels. We can also put the views default output as a Panel pane, but using blocks as a display of the Views gives the “read more” links by default. In the direct View, we have to create it. Say, we create a block—storyblock1, as shown in the following screenshot:



13. Now, we need to go to the Flexible Layouts UI, as a layout created by you.



14. Go to the Content tab.



15. Earlier, we had displayed a static block; now we will display a dynamic View.
16. Disable earlier panes in the first static row.
17. Select the gears in first static rows and select Add content | Miscellaneous.
18. The custom view block will be here, as shown in the following screenshot. Select it.



19. Save and preview.



20. So, we have now integrated the dynamic View in one of our Panel panes.
21. Let’s add sample content to each region now. You can select your own content as you want on your front page, as shown in the following screenshot:



22. Go to Site configuration | Site information.
23. Chan ge the default home pages to the created Panels page.
24. Your home page is now the custom Panel page.

How it works…

In this recipe, we implemented Panel panes with views and blocks to make a separate custom page and separate display for the existing content in the website.