Panels 2 is a powerful tool that allows anyone to quickly create an easy layout, using all sorts of content. To learn how to create a basic layout, let's use the example of creating a standard 'about us' page. Normally, an about us page would be one long page. However, Panels 2 allows us to spice up the content with new looks and layout.

  1. First, make sure you have Panels 2 installed. You'll just need the core Panels module, as well as the Panel pages module, for this tutorial- however, as you progress in using Panels, you will find the other included modules very handy.
  2. Okay, now that you've got Panels 2 installed, let's get our hands dirty.
  3. First, click Panels on the menu. That will bring up an informational page, which you might find interesting to read. After you are done with that, click Panel pages, as that is the main tool we will be using in this tutorial. This displays all the panels you have made, so if you ever need to edit a panel in the future, come back to this page.
  4. Click the 'Add' tab at the top. That brings us to a page with all the possible layouts for a panel. Select the 'Three column 25/50/25' option.
  5. Set the Panel name to: about_us
  6. Set the Page title to: About Us
  7. Set the Path to: node/aboutus
  8. Click save. This will bring you to the Advanced tab.
  9. Click 'Provide Menu' under the 'Menu' part of the Advanced tab. This adds a menu item into Drupal. If you don't want this, or you want the link somewhere else, feel free to skip this step.
  10. Click save.
  11. Now, let's add some content to the page. Click the 'Content' tab at the top. It's time to think about what we want in our 'about us' page. Let's list what we want where. Let's presume we want some company information in the middle, employee bios on the left, some links on the right, and perhaps some contact information below them.
  • Left: Employee Information
  • Middle: Bio
  • Right: Links, Contact Information
  • Click the plus sign on the left pane. A window should pop up: find 'New Custom Content' under 'Custom'.
  • We'll do one employee at a time. Type the name of an employee in the 'Title' field, and the description in the 'Body' field.
  • Click 'Add Pane' at the bottom to save the pane. Remember, you'll still have to save the whole panel at the end!
  • Repeat the last few steps as many times as necessary. I'll do it twice.
  • Now for the about text. Click the plus sign in the middle pane. Again, click 'New Custom Content' under 'Custom' on the window.
  • For the 'Title' field, fill in 'About CompanyFoo' (replacing CompanyFoo with the name of your company or group). Then, type in the about text into the 'Body' field. Click 'Add Pane' when you are done.
  • The links is a little bit more complicated. Again, click the plus sign in the right pane, and find 'New Custom Content' under 'Custom' on the window.
  • Type 'Links' in as the title, and use the following code example as a starting point.
    <a href="http://drupal.org">Drupal</a>
<a href="http://groups.drupal.org">groups.drupal.org</a>
<a href="http://localhost/">Localhost</a>
  • Click 'Add Pane' at the bottom.
  • Finally, to add some contact information, click the plus sign in the right pane, and click 'New Custom Content' under 'Custom' on the window.
  • Type 'Contact Information' into the 'Title' field, and type some contact information in the 'Body' field.
  • Click 'Add pane' at the bottom.
  • Don't worry about not having used the top pane- Panels 2 ignores the panes you haven't used. Now, click save at the bottom of the page.
  • Navigate to your home page, and click 'About Us' on the primary menu.
  • There you go! You now have a custom content panel in Drupal. The possibilities are endless.

    • If you want to import a starting point, download the code and import it by clicking the import tab at the top of the Panel pages module.

    AttachmentSize
    panels_2_basic_text_layouts_code.txt3.44 KB