Using Panels to Build Page Layouts in Drupal 8

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

Author

0 0 votes
Article Rating
Subscribe
Notify of
14 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Srikanth Ganta
Srikanth Ganta
7 years ago

Excellent article..thanks

ARUN AK
ARUN AK
6 years ago

Hii.. Can you show an example for use panels for new view.

jozefstarosta
jozefstarosta
6 years ago

Thank you Daniel, it was helpful. Saved me a lot of time.

Jon Griffin
Jon Griffin
6 years ago

Why does structure/add page not work now? I see no menu item for that.

fandm
6 years ago

Hi! How can we set visibility rules for the blocks on the panels page? In Drupal 7 we had this option for the panes, but how to do it in Drupal 8? Thanks!

Suresh
Suresh
6 years ago

How can i assign the panel for individual content type ?

oegi
oegi
6 years ago

How can i assign differents selection criteria and no only user role? example if is a odd number return true?

Justin Bisa
Justin Bisa
6 years ago

As much as I like the idea of this being an implementation of panels on a higher version of drupal (which we should all be happy about), it does seem this greatly limits what can be done using panel page manager. I take pride in what I’m able to do maneuvering my way around page manager features which allows me do really cool stuffs – at least I used to. Maybe there’s something I’m yet to understand.

Klemens
Klemens
6 years ago

Panels in D8 is just a shadow of Panels in D7: Parameters (via Token or URL-Argument) for Views-Arguments? Nope. Classes for View-Panes? Nope. Classes and ID for the Panel? Nope. And so on… Sigh !

therobyouknow
therobyouknow
5 years ago

Instead of Page Manager, have used Panelizer on a node and this has enabled me to add Views, custom blocks. I would advise therefore on using Panelizer rather than Page Manager for Drupal 8, on the basis that Page Manager is not part of the security policy – see its project page.

mibadix
mibadix
4 years ago

fine tutorial, but I cannot understand why it is working well for the homepage and not for other pages. Your and other tutorials are always for the homepage – to apply the same in normal pages (like in drupal7) is not working. Do you have an explanation? 

Monika G
Monika G
3 years ago

very useful… thank you

Julie
Julie
3 years ago

Very interesting articles in OSTraining, thank you !
I just wondered if you could help me on this one :
I have been constructing my own layouts in Drupal 7 : declaring the plugin in the .info file, and including them in a panels/layouts folder.
I have been reading and reading again about Drupal 8, and can’t figure out how to reuse those (I have seen what might be a solution by using a hook, but it doesn’t seem clean to me, isn’t there any other way ?)

Ram
Ram
2 years ago

Thanks for the article

14
0
Would love your thoughts, please comment.x
()
x