Panels has always been my go-to module when it comes to building custom pages in Drupal 7.
Now in Drupal 8 things have changed.
A lot of what Panels did in Drupal 7 has been moved over to Page Manager. Panels itself doesn’t offer a user interface and it is just a variant type in Drupal 8. Also, Page Manager is now its own project, whereas, in Drupal 7 it was part of the Ctools module.
Panels in Drupal 8 integrates with Page Manager and offers a custom variant type which allows you to select different layouts and manage blocks in the layouts. On its own, Panels doesn’t really do anything, you need something like Page Manager to utilize it.
So with that being said, what can Page Manager do?
The module can be used to create arbitrary landing pages such as a homepage or category landing pages. Then Panels can be used to select a layout and add blocks to layout regions.
In this tutorial, we’ll create a homepage which displays a different layout if a user is logged in or not.
Getting Started
UPDATE May 2017: Layout plugin is no longer required from Drupal 8.3 and onwards. Just install Layout Discovery which comes with Drupal core.
Before we can begin, go download the following modules:
Then install Panels and Page Manager UI.
Drush:
$ drush dl panels ctools page_manager $ drush en panels page_manager_ui
Drupal Console:
$ drupal module:download panels --latest $ drupal module:download ctools --latest $ drupal module:download page_manager --latest $ drupal module:install panels $ drupal module:install page_manager_ui
Create Custom Homepage
Let’s begin this tutorial by first creating a custom homepage.
1. Go to Structure, Pages and click on “Add page”.
2. Enter Homepage into “Administrative title” and “homepage” into Path.
3. From the “Variant type” drop-down select Panels. This is where Panels integrates with “Page manager”. Leave everything as is and click on Next.
If you can’t see Panels in the drop-down make sure you’ve installed Panels.
4. On the “Configure variant” page, select Standard from Builder and click on Next.
5. On the Layout page, select “Two column” and click on Next.
If you can’t see layouts in the drop-down try rebuilding the site cache.
6. From the Content page, you can select which blocks appear in which region. Just click on Finish and we’ll configure it in the next section.
Now we’ve completed the “Add page” wizard.
Let’s now customize the layout.
7. Click on Content on the left and from here you can add blocks to regions and change the page title.
8. To add blocks, just click on “+ Add new block”, click on “Recent comments”, select “Left side” from Region and click on “Add block”.
9. Again, click on “+ Add new block”, click on “Recent content”, select “Right side” from Region and click on “Add block”.
Finally, enter “Custom homepage” into “Page title”.
10. Scroll to the bottom and click on “Update and save”.
Set Page as Front Page
Once you’ve saved the page, go directly to “/homepage” and you should see the page with the two blocks on each side.
Now let’s set this page as the front page.
1. Go to Configuration, “Basic site settings” and change the “Default front page” to “/homepage”. Don’t forget the forward slash. This is new in Drupal 8.
2. Now if you go to the homepage you should see the new layout with the two columns.
Page Variants
One thing I loved about Panels in Drupal 7 was the ability to create different page variants. In Drupal 8 Page Manager, has taken over this functionality.
So what are variants?
Variants let you configure multiple layouts on a single page and you configure a selection criteria to determine which variant should be displayed.
For example, we’ll configure the homepage to display a different variant depending if the user is logged in or not. The correct variant is displayed based off the configured selection criteria.
Let’s configure the homepage now.
1. Go to Structure, Pages and click Edit on the Homepage row.
We already have a variant called Panels. Let’s change it so it’s only visible to authenticated users (logged in users).
2. Click on General under the Panels variant and change the Label to “authenticated user”. Then click on “Update and save”.
3. Click on “Selection criteria”, select “User Role” and click “Add condition”.
4. Check “Authenticated user” under “When the user has the following roles” and click Save. Again, click on “Update and save”.
5. Click on Content and change the “Page title” to “authenticated user”. We’ll do this so we know for sure that the right variant is selected.
6. Now click on “Update and save”.
At this point, the variant will only be visible for authenticated user. If you access it as an anonymous user you’ll get a “page not found” error.
Add Variant
Now we need to create another variant for anonymous users.
1. Go back into the homepage edit page and click on “Add variant” in the top right.
2. Enter in Default into Label, select Panels from Type and click on Next.
We won’t need to configure any “Selection criteria” because this should be used as the default homepage. When building sites with variants you should have a default variant ordered last which’ll be used if no selection criteria returns true.
3. On the “Configure variant” page, just click on Next.
4. On the Layout page, select “Two column” from the Layout drop-down and click on Next.
5. Leave the Content page as is and click on Finish.
6. Click on Content and add the “Recent comments” and “Recent content” blocks like we did before.
7. Add “Default homepage” into the “Page title” field so we know the right variant is picked up.
Now test the homepage with two browsers: one as an anonymous user and another as an authenticated user.
Order of Variants
The order of the variant is important. Any variant that has no selection criteria will always return true and be displayed. Ones with a selection criteria should be ordered above ones without any.
So in our case, Page Manager will check the selection criteria for the authenticated user variant, if the user viewing it is logged in then it’ll return true and display the variant. If not, it’ll go to the next variant and check its selection criteria and continue until one returns true.
If no variant returns true, then the user will get a “page not found”.
Variants can be reordered by clicking on “Reorder variants” in the top right corner.
Summary
As you’ve seen, Page Manager and Panels are great for creating custom pages. The page variant functionality alone is worth installing and using the modules. If this is the first time you’re using either module give yourself a bit of time to get up-to-speed with them. They’re powerful, but if you’ve never used them before they can be a bit complicated.
FAQ
Q: Can’t see Panels in the drop-down?
Make sure you’ve downloaded and installed Panels.
Great stuff, Evan, Keep it up!
Thanks Sajal.
Great tutorial, but I have a problem: it’s running perfectly for the home – homepage as you described. But other pages are not running. Why?
Hi mibadix,
I don’t understand what you mean by “But other pages are not running”. What other pages?
Are you getting an error? Page not found?
Cheers,
Ivan
In D7 the Panels UI uses CSS to demonstrate the layout eg https://i.imgur.com/hMTbv7h.jpg (Right region on the right hand side etc) but in the D8 UI it seems that Left is stacked above Right (eg your screenshot https://www.webwash.net/wp-content/uploads/2016/11/2017-01-02_12-21-02-539×462.jpeg ) – is there no CSS in the D8 UI to demonstrate the layout?
Hi Juc1,
Yes you’re right, I didn’t notice that. 🙂
It’s using the general blocks drag-and-drop interface.
You could use the Panels IPE module to manage layouts. Here’s a link to it in action in a webinar I recently did: https://youtu.be/xJ4bbc9cDKc?t=27m33s
In Drupal 7, I could create a Page Variant for nodes of a specific Content Type, and in that variant I could assign specific FIELDS defined in that content type to different areas of the page. In Drupal 8, it seems I can only add BLOCKS (not specific fields) to my variant. Am I missing something in my page variant setup?
Hi birdjh,
You’ll need to install the “Chaos tools blocks” sub-module that comes with Ctools.
This module exposes entity fields as blocks. Once installed you’ll be able to add entity field blocks.
Cheers,
Ivan
Thanks! I had Chaos Tools Blocks installed but wasn’t configuring the variant in the correct place.
Hi,
this instruction concerning panels is outdated with current release (May, ´17) of panels 4.x. (and drupal core 3.x).
Please leave a note at the very beginning. Panels requires layout_discovery instead of layout_plugin.
Simple module update brakes the site!
just my 5 cents
regards, Vincent
Thanks Vincent.
Tutorial’s been updated.
Am I missing something? In D7 Panels gives you the option to create as many row and column variations that you want, but that editor doesn’t seem to be in D8. The D7 page is Variants » Panel » Content. It kind of diminishes Panel’s usability when I cannot create as many 3 across, 2 across or full across rows that I want.
Hi Susan,
Did a bit of digging around the Panels issue queue and found (https://www.drupal.org/node/2169319):
It hasn’t been ported over to Drupal 8 yet.
Cheers,
Ivan
How I can create a condition to page variant (page_manager)?
Hi Eli,
I cover how to create variants in this post, just search for the heading “Page Variants” 🙂
Cheers,
Ivan
Ivan, I need add new condition in selection criteria!!! for example Do this for a given odd variable….
Hi Ivan – any ideas please on my Panels question here https://www.drupal.org/node/2896673 ?
Hi Juc1,
No idea why.
Could be the new Layout Discovery module in Drupal 8.3. But really don’t know.
Cheers,
Ivan
Hi Eli,
Does the “Page Variants” section in the tutorial cover what you’re looking for?
If you need to add a new condition in the “selection criteria” via the interface, then the “Page Variants” section covers it.
If you want to create your own condition, which’ll appear in the drop-down, i.e., something like “User Role”, then implement it using a “Condition Plugin”.
–
https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Condition%21ConditionPluginBase.php/8.3.x
–
http://cgit.drupalcode.org/drupal/tree/core/modules/node/src/Plugin/Condition/NodeType.php
Hi – in D7, you could add nodes, views, custom content, and other stuff. With D8 it seems you can only add blocks. Okay – you can make views display in a block and add custom content to a custom block ….. but does not seem as flexible as the D7 version.
First experiments with D8 panels and so forth – so back to mr google for a bit 🙂
Nice intro though.
Hi Don,
Yes, things have changed. The ctools content types have been replaced by blocks.
Install the “Chaos tools blocks” sub-module in Ctools and it’ll expose the node fields as blocks.
Cheers,
Ivan
Hi Ivan,
Nice post! I don’t know if this is the right place to ask but I have some panel pages with content based on a url parameter. I altered the page access based on user role but I need to make it a bit more specific and restrict access to all users except the one who has the same uid with the one given as a parameter in the url and also an other user who is defined in a field in an attached entity. So I was thinking to add a custom page access rule but I have no idea how to do that. Do you have any idea how I could implement this?
Best,
Ismini
Hi Ismini,
You can implement this logic using hook_node_access.
Cheers,
Ivan
The dev status for dependencies of panels and page manager seem to be quite a mess for drupal 8. I’ve decided to go with paragraphs for my current project.
Hi AyexeM,
Which “dev status” dependencies are you referring to?
Cheers,
Ivan
How I can create page manager for exist page?
Eg: taxonomy/term/%
Hi,
It seems there are problems overriding the taxonomy page, look at this issue for more details:
https://www.drupal.org/node/2785195
Hi Ivan,
In D7 we had a option of providing a custom css class or id to the entire section of Panels. How can this be achieved in D8 version of Page Manager ?
Hi Kapil,
Things are different in D8.
You can add classes and IDs to layouts which support the ability (default Panels layouts doesn’t support this). If you use Bootstrap Layouts, you’ll see an extra option below Layout called “Layout Settings”. On this page you can add additional attributes, i.e., IDs, classes, etc…
Here’s a screenshot: https://goo.gl/NuMsLF
You can’t add classes to individual blocks, just layouts if supported.
Cheers,
Ivan
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? Not as easy. Permissions on Panes? Nope. And so on… Sigh !
Hi Klemens,
Panels in D8 is NOT an exact copy it has been re-architected. The biggest difference is that Panes are no longer used, instead blocks are used.
Parameters (via Token or URL-Argument) for Views-Arguments?
Because you’d use a block now, couldn’t this be handled with a contextual filter in views?
Classes for View-Panes?
Try using Block class (https://www.drupal.org/project/block_class).
Classes and ID for the Panel?
You can add classes and IDs to layouts which support the ability (default Panels layouts doesn’t support this). If you use Bootstrap Layouts (https://www.drupal.org/project/bootstrap_layouts), you’ll see an extra option below Layout called “Layout Settings”. On this page you can add additional attributes, i.e., IDs, classes, etc…
Here’s a screenshot: https://goo.gl/NuMsLF
Permissions on Panes?
Blocks use the new condition plugin in D8. Search for a module which allows you to select permissions.
Hope this helps.
At the end of the day, this is all open source. If you’re unhappy with something, help out in the issue queue (https://www.drupal.org/project/issues/panels). 🙂
Hi Ivan, hope this find you well.
I have a problem and I’m sure you can help me. I’m trying to build a custom page as homepage using pages and panels in Drupal 7 BUT, despite everything looks fine, even in preview, the page created doesn’t show. Any suggestion? Thanks and best regards,
Hi Alex,
Are you getting any errors? JavaScript or PHP? Does the page have multiple variants?
Cheers,
Ivan
Hi Ivan, thanks for the response… no errors of any kind, simply the main page is not shown, no multiple variants, only content in the form of blocks generated by views. Used the extra layouts module of panels. Curiously, the same happened to me when I tried to create that same main page only with views.
I really don’t know what the problem could be. Try uninstalling the layouts module, or if you’re using a custom layout, switch to a default layout.
how can I create node view for content type so Article. I tried very hard but did not do anything.Thanks
Hi Serhat,
Are you trying to create a new variant for the Article content type?
Just create a new selection criteria which checks the content type.
Cheers,
Ivan
Hi Ivan.
It’s ok. Thank you 🙂
Ηi Ivan
I used page manager and panel for all taxonomy term(/taxonomy/term/{taxonomy_term}.).
And in the default layout I have chosen add block. but some of these blocks I just want to show in some specific terms. But here is no option visibility as it exists in the drupal core block (etc.Visibilit: Content types, Pages,Term, Roles,Content type)
How could I do that?
thank you very much!
Hi Serhat,
Block visibility hasn’t been implemented for Drupal 8 yet, https://www.drupal.org/project/panels/issues/2769099
Cheers,
Ivan
Thank you for your reply Ivan.I am waiting
Awesome module and informing tutorial.
On the downside, this module suffers from the issue that if you want to edit the page afterwards, clicking on a variant (after which an element with display:none should get a block value) does nothing, so you are not able to change anything afterwards.
The issue is already reported about two months ago, unbelievable that such a module remains broken over such a small issue (downside of open source?). See: https://www.drupal.org/project/page_manager/issues/2974840
Meanwhile, a browser developer tool can be used to change the display, alternatively, the Asset Injector might come in handy, to get the job done with a CSS rule or Javascript.
Hi Johan,
I wasn’t aware of this, thanks.
Cheers,
Ivan
All in all i’d say, use page manager at your own risque, if you get the problem below, which is already a year old, you are not even going to be able to log into your site.
https://www.drupal.org/node/2875000
Hi John,
Interesting issue.
The problem is technically with IPE which is a sub-module of Panels, not page manager.
Cheers,
Ivan
Great tutorial!
Is there a way to print/export to a pdf file the custom pages created with panels?
Ale
Hi Ale,
I’ve never tried to export pages as PDFs.
One simple solution is to set up a print.css in your theme (https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/).
Or look at Entity Print module (https://www.drupal.org/project/entity_print), I don’t know if it has support for page manager but I’d start there.
Cheers,
Ivan
If you are running a current version of panels, you will have this error.
Error: Call to a member function getVariant() on null
And nothing shows.
Make sure to patch: https://www.drupal.org/project/panels/issues/3031778
Are you still recommending panels? Layout builder seems to be the way of the future, but it’s not stable at all now. Kills a site.
Thanks for the tutorial. I have just started back on using Drupal and my last sites were D6, so remembering things and finding the changes is interesting to say the least 🙂
Hi Jon,
I agree, Layout builder is the future. However, Page manager/Panels is pretty stable and is still useful if you want to create pages that aren’t content types.
And being able to define different variants is great for specific use cases.
Cheers,
Ivan
Thanks. very useful.
one more favour needed if possible.
whatever the page created in above explanation, it will be display for Logged in Users only.
and for Anonymous User, it will show the “Page Not Found” error.
instead of showing “Page Not Found” Page, I want to redirect them to “User Log In” Page so they can log in and come back to this page.
How do I set up that in Panels/Pages.
Hi Venkatesha,
Found this issue, https://www.drupal.org/project/page_manager/issues/2624972, so it looks like something was committed to make it possible.
Not sure how to use the functionality as I haven’t used it myself.
Cheers,
Ivan
Is there a way to pass arguments from the URL into blocks placed on panels pages in D8. For example, I have created a view with a contextual filter set to a taxonomy term. I am attempting to use the view block in a panels (page manager) page and pass the taxonomy term from the URL into the block. I could do this in Drupal 7 but I can’t seem to figure it out in D8.
The page URL will be something like /reports/term1. I would like to pass term1 into the block.
For the panel page I have a URL like /reports/! (I also tried % as the place holder). Though I have seen some recommendations to use a context to pass the term, I have not been able to do so.
Any suggestions on how to do this in D8?
Hi Macumhail,
I don’t think you can pass arguments from Panels to Views.
If the standard contextual filter doesn’t work in the view, you could simply write your own. It’s been a while since I used Views and Panels together.
Cheers,
Ivan