Using Panels to Build Page Layouts in Drupal 8

| Drupal
Using Panels to Build Page Layouts in Drupal 8

One of our OSTraining members asked about the current state of the Panels module in Drupal 8. They already had experience with Panels in Drupal 7.

Panels is one of the most popular ways to create page layouts in Drupal.

In this quick tutorial, we will show you have to create your Panel in Drupal 8. The process is definitely different when compared to Drupal 7, although many similarities remain.

For this tutorial, you do not need to have experience with Panels.

First, we need to install and enable the required modules to use Panels:

Although these next four modules are not essential, I'm also going to ensure I have the following modules installed, because I rely on them heavily for site-building.

Inside your Drupal site, go to the "Extend" tab and enable the modules:

Enabling Panels modules in Drupal 8

Now we need to create our Panel.

  • Go to Structure > Pages.
  • Click "Add page":

Adding a Panel page in Drupal 8

  • Choose an "Administrative title".
  • Create a path for your panel.
  • Make sure that "Variant type" is set to "Panels".
  • Click "Next" when you're finished.

Selecting a variant type in Drupal 8

  • Give the Panel layout a "Label". 
  • Click "Next" when you're finished.

Choosing a Panels builder in Drupal 8

  • Select a "Layout" for the Panel.
  • Click "Next" when you're finished.

Choosing a Panels layout in Drupal 8

  • Enter a "Page title".
  • Now you can add blocks to your layout in the exact same manner as adding normal blocks. Use the "Add new block" button to select the blocks you want to place in the panels for display.
  • Once you've placed your blocks, click "Finish".

Placing blocks in a Panel in Drupal 8

  • On the next screen, select "Update and save".

Panels configuration screens in Drupal 8

If you want to do more advanced things with Panels, such as have different layouts for different user roles, you would create that from the "Selection criteria" area.

Panels selection criteria screens in Drupal 8

Now if you go to Configuration > Basic site settings, you can update the "Front Page" link to match the URL of your panel. Your panel will now be your site's homepage.

Frontpage screen in Drupal 8

And now we have a 2 column, responsive Panel, as in the image below:

A completed panel in Drupal 8


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.