Layouts in Drupal 8

You know that a well-maintained website is a key to success. We’ve already told you about some useful modules to facilitate the smooth running of the site, provide security and more. When it comes to layout, the Panels module can do a lot of good. The question then arises, “What is Panels module and why is it awesome?” Needless to say, a picture is worth a thousand words. So, let’s see how it works in Drupal 8.

Briefly about the Panels module

The Panels module allows a site administrator to create customized layouts for numerous uses. It enables you to create more sophisticated displays of your content.

Integration with other systems allows you to create nodes that use landing pages and even override system pages, such as taxonomy and the node page, so that we can set up the toolbar of our site.

In the panel you can create contexts that represent display of objects. It is possible to display things such as a picture or user profile for user context. In addition, information of these contexts can be tested and use not only available content to display, but choose the toolbar to display as well. You can also select attributes such as "nodes," regardless of whether the user has access to edit nodes, and many other things.

The panels can also be used for smaller page elements. What is the solution if you have a normal side panels and there are two content parts, but a lot of space remains because they are too narrow and your project looks much better if they are side by side? It is difficult to do that in Drupal, because you will eventually create your own block with a user ID to display those two pieces of content. By means of the panel we can simply create a "mini-bar" with two columns. Add one block on the left, the other on the right, and you’re all done. These mini-bars will be available on your system as a standard block or as a data panel to put in the other panel.

Modules Installation

First of all, we need to define the list of modules for use Layouts online in Drupal 8. The list includes the following modules:

1. Panels (link) — to create panels
2. Page manager (link) — to create pages
3. Chaos tools (link) — require Page manager, Panels modules
4. Layout Plugin (link) — requires Panels modules

Download appropriate modules in the module folder and link to the page "Extends" of our website. You will see that the modules you have downloaded are on the module page.

To begin with, activate the modules "Layout Plugin," "Page Manager," "Page Manager UI" and "Panels," and make changes.

Now we can work with panels.

Creating a page to display the panel

For example, we need to create a page that will display a certain panel. Let's make a new page with the panels. To do this, click on the menu item "Structure" → "Pages" and get the following page:

Now add the page by clicking the button "Add page." Then move on to the next step:

In "Administrative title" write down the name of the page, in "Path" — the path to that page, in "Variant type" select Panels and go to the next step by clicking "Next."

Creating Panel

The next step is to set up how to configure options.

Here you can change the "Label" and select the type of "Builder." Then hit "Next."The following step is to select the type of "Layout":

Choose the type of "Layout" and click "Next." Now we have moved to the last step of settings.

Next, add "Page title" for that page and add more units to display. Under the button "Add new block" place the table with "Layout.” As in the previous step, type "Layout." Select "Two column" and the the table will display only "Left side" and "Right side," while choosing other options for the table variation will be different. Let's try to add a block from standard Drupal blocks. By clicking "Add new block," a new window opens.

Click, for example, the link "Search form." The following window will open:

In the field labelled "Title" you can type the name of the block which we will add to the dashboard page, checkbox "Display title" is responsible for displaying the name of the block. And you can choose the region where the block will be displayed. Choose "Right side" and click "Add block." Now you have a block in the region "Right side," which we actually see.

Now press "Finish" to save a page.

Editing the created panel

When you have done the above, link to the page for editing the corresponding "Page".

The point labelled "General" is responsible for setting up the configuration. You can use the tab "Context" to add new context. In the next window the form to add new context is shown for the corresponding essence or "entity."

The next point, "Selection criteria," is responsible for the criteria of choice for a page. If you choose a condition and press the key "Add condition," the window to add a condition will open.

For example, let’s choose "User Role" and press "Add condition." We will get the window with settings:

Choose roles it will work for and press "Save." Now the new criteria of choice appears.

If you need to somehow modify the location of block on a page, you can take advantage of the "Layouts" point. And the point labelled "Content" is responsible for content. After all executed changes save it all pushing the button "Update and save."

Creating variants

Let’s consider the possibility of adding variants to display on this page as well. To add variants it is necessary to press "Add of variant."

The form for creation of a new variant of display will open.

Add a new panel for this page and take the same steps for creating a panel as in "Creating Panel." Go to the end, and see the settings of the new panel that have appeared.

Choose "Selection criteria" for the panel labelled "Test," and add criteria for "User role.” Also add the possibility to look it over, which we will use for another role when setting up the basis of a page "Panel."

Now, after saving the settings, we have a screen of different panels for different users.

Ordering Options

Ordering options are important. For example, if there are several panels on a page and the first of them has no selection criteria, then it will always be displayed, and other panels will be neglected. Therefore, it is possible to organize display options. You must click on the link "Reorder variants."

After that a window for ordering options will open:

Here we can specify the order we need to display panel options and click "Update."

Advantages of the Use of "Panels"

1. Output of the content field in another region, or block insertion between fields. Panels are available with all the separate content fields in the panel out of the box. 
2. Speedwork.
3. The output of one block at a time to the two regions. Panels allow you to insert all your content into the page layout any number of times. By the way, it is not necessary to display a block on the page twice. You might have a problem with displaying a block on some pages in one region and on the other pages in another region. The block system doesn't allow you to do that, while the panel does.
4. Different templates for different taxonomy dictionaries. If you need to display the block on a page of terms for one dictionary, and it is not required on the pages of other one, panels can solve the problem.
5. Working with facets. Firstly, it is not necessary to create a block for facets using the panels. Secondly, facets is a separate category in the interface and does not mix with other blocks.
6. Ability to use a large number of different patterns with a complex structure of columns if a site is available. Firstly, panels allow you to use flexible layouts or easily create your own. Secondly, we can display one block in different "layouts" in different regions, which a block system does not us enable to do. Thirdly, by using CSS-frameworks with grids, we can easily set required classes and id to the panels to build them on the grid.
7. You can display something customizable on the page. Panels use "Ctools API," which makes it easy to display anything you like with a fairly simple code.

So, we used "Page Manager" and "Panels." which are perfect for creating custom pages. Due to this functionality it is worth installing and using these modules. They are very powerful and easy to set up. If you want a task to be done in short order, contact us. We are always glad to be of service.