Blocks and layouts have come a long way in Drupal. Blocks have become powerful, fieldable, and reusable elements that can be placed into regions within a layout. While the layouts are now managed by the Layout API provided by the Layout Discovery core module. This allows the layouts to be shared by different modules.

When we talk about layouts in Drupal, we may refer to the layout of the whole page i.e. the global layout or the layout of the main content of the page. The global layout of a Drupal site is primarily controlled by the theme used and can be managed using the Block UI available at admin/structure/block. While the layout of all the view modes of a content type can be managed from the similar drag and drop interface available at its Manage Display option.

Despite all these features and improvements, if you want complete customization of the layouts you either have to override the page template file or use a contributed module like Display Suite, Panels, Paragraphs, etc. In this article, we are going to discuss the usage of the Panels module. 

In Drupal 8 the Panels module does not provide any UI, instead, it provides an API that allows the configuration and placement of blocks into regions. You need to use a module from the Panels ecosystem such as Page Manager, Panelizer. Everywhere along with Panels to manage the layouts. It also comes with a very handy sub-module Panels IPE (in-place editor).

Pre-requisites

The module requires the following modules to be pre-installed:

• Chaos Tool Suite (CTools)
• Layout Discovery (core module)

Downloading and Installing Panels

For this article, we are going to install Panels, along with Panels IPE, Page Manager, Panelizer and Panels Everywhere to understand its usage and working. Fire up your terminal to download and install them quickly.

1. Navigate to the root directory of your Drupal site.

   $ cd /var/www/html/drupal8

2. Download and install the modules using drush or drupal console.

   $ drush dl panels panels_ipe page_manager page_manager_ui panelizer panels_everywhere
   $ drush en panels panels_ipe page_manager page_manager_ui panelizer panels_everywhere -y

   or

   $ drupal module:download panels panels_ipe page_manager page_manager_ui panelizer panels_everywhere
   $ drupal module:install panels panels_ipe page_manager page_manager_ui panelizer panels_everywhere

   The Panels module comes with 5 layouts – One column, two column, two column bricks, three column 25/50/25 and three column 33/34/33. But as discussed earlier, we need to use other modules to use the API exposed by Panels.

Managing page layout with Page Manager and Panels

Page Manager allows the creation of custom pages and overriding of existing routes. It also allows us to add contexts, access conditions and selection criteria for these pages. It can leverage the display variant provided by the Panels module to place the blocks into regions provided by the Panels layouts. Follow the below steps to create a page and manage its layout using Panels layout:

1. Navigate to Manage → Structure → Pages and click on the “Add Page” button.
    
2. Give a unique administrative title, optionally give a description to describe the page and enter a path for this page. Select Panels as the variant type, optionally assign a context for this page, and click on “Next”.

   

3. Enter a suitable label to the page, select ‘Standard’ Builder and click on “Next” to continue.
    
4. Give this page a suitable title. Now, add required block using the “Add block button”. Give the block a title, select label visibility, formatter, and region. Repeat this step for all the blocks.

   

5. Now you may arrange the blocks using the drag and drop interface. Click on “Finish” when satisfied with the arrangement.

   

   We have now successfully overridden all the node pages and customized their layouts. Similarly, you may define more page variants based on different selection criteria and create different layouts for each of them.

   

In-place editing using Panels IPE

As you may have observed, the ‘Standard’ builder that we used for placing the blocks into different regions, gives us the same Block UI as the core Block structure. It can be tricky for the site builders to visualize the output without actually seeing the block placement. Moreover, you have to navigate through multiple menus to be able to edit the layout. We can use Panels IPE (In place editor) to edit the layout and manage the blocks right from the front-end. But first, to change the builder follow the below steps:

1. Navigate to Manage → Structure → Pages and click on the “Edit” button against the page you for which you want to enable in-place editing.
    
2. Click on “General” menu of the desired display variant.
    
3. Change the builder from “Standard” to “In-place editor” and click on “Update and save” to save changes.

Now we can use Panels IPE to manage the blocks and layouts of the page.

Providing default layouts for view modes using Panelizer

While the ability to customize the layouts using the standard and in place editor builder is awesome, you probably do not want to give the permission to change layouts to your editors. Rather they should be able to select a layout from a set of pre-configured layouts for their content item. We can use the Panelizer module to achieve this:

1. Navigate to Manage → Structure → Content Types and click on the “Manage Display” option from the drop-down against the content type and select the view mode for which you want to provide default displays.
    
2. Check “Panelize this view mode”. Also, check the “Allow each content to have its display customized”, “Allow users to select which display to use” and click on “Save”.
    
3. Click on the “Add a new Panelizer default display” button
    
4. The Page Manager’s Add Page wizard pops up. Follow the same steps as while creating a new page.
    
5. Navigate to the “Manage form display” of the same content type and make sure that the Panelizer pseudo field is visible.
   
   

Changing Global Page Layout using Panels everywhere

So far, we have been customizing the layout of the main content area. We can also customize the global layout with the help of Panels Everywhere module. This module basically overrides the core block layout system. Please note that this module is in alpha state right now and can easily break your site. Also, please refer the official readme file for version compatibility. 

1. Navigate to Navigate to Manage → Structure → Pages and enable the Site template page.
    
2. Click on the “Edit” button against the ‘Site template’ page.
    
3. You can now edit the layout similar to any other page of Page Manager, and even use the Panels IPE to configure the global layout on the fly.  

Conclusion

Panels module provides one of the many ways to manage layouts in Drupal. To leverage its API, we need to use the other modules of Panels ecosystem. We can customize the layout of the content area as well as the global layout of the Drupal site, all without writing any code.

In case of any query, please comment down below.