How to Build Custom Pages Using Page Manager and Panels in Drupal 8

/ By / 6 minutes of reading / 53 Comments

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.

About The Author

Ivan is the founder of WebWash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 12 years and has successfully completed several large Drupal projects in Australia.

Related Posts

53 thoughts on “How to Build Custom Pages Using Page Manager and Panels in Drupal 8”

      1. mibadix

        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?

        Reply
        1. Ivan Zugec

          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

          Reply
  3. birdjh

    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?

    Reply
    1. Ivan Zugec

      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

      Reply
  4. Vincent

    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

    Reply
  5. Susan Shemin

    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.

    Reply
    1. Ivan Zugec

      Hi Susan,

      Did a bit of digging around the Panels issue queue and found (https://www.drupal.org/node/2169319):

      (Note: Eventually, we’d like to build a flexible layout builder (that creates derivative plugins for Layout Plugin) which we’re told we can put into the Layout module when ready: #2317333: Roadmap / future plans for layout.module)

      It hasn’t been ported over to Drupal 8 yet.

      Cheers,
      Ivan

      Reply
    2. Ivan Zugec

      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

      Reply
  8. Don Robertson

    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.

    Reply
    1. Ivan Zugec

      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

      Reply
  9. Ismini

    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

    Reply
  10. AyexeM

    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.

    Reply
  12. Kapil

    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 ?

    Reply
    1. Ivan Zugec

      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

      Reply
  13. Klemens

    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 !

    Reply
    1. Ivan Zugec

      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). 🙂

      Reply
  14. Alex

    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,

    Reply
      1. Alex

        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.

        Reply
  15. Serhat

    how can I create node view for content type so Article. I tried very hard but did not do anything.Thanks

    Reply
    1. Ivan Zugec

      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

      Reply
  16. Serhat

    Η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!

    Reply
  17. Johan

    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.

    Reply
  20. Jon Griffin

    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 🙂

    Reply
    1. Ivan Zugec

      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

      Reply
  21. Venkatesha K

    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.

    Reply
  22. Macumhail

    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?

    Reply
    1. Ivan Zugec

      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

      Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top