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

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.

Ivan Zugec

About Ivan Zugec

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

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

  1. 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?

    1. 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

  2. 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

  3. 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.

    1. 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

        1. 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

  4. 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.

    1. 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

  5. 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

  6. 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.

  7. 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 ?

    1. 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

  8. 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 !

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

Leave a Comment

You have to agree to the comment policy.