Categories

(65)
(45)
(8)
(26)
(69)
(100)

A glimpse at creating layouts in Drupal 8 with the Layout Builder module

09.01.2019
A glimpse at creating layouts in Drupal 8 with the Layout Builder module
Author:

Everyone loves attractive layouts for web pages. Luckily, Drupal has plenty of awesome page building tools. You will hear tool names like Panels, Panelizer, Paragraphs, Display Suite, Page Manager, Twig, and more. Our Drupal team loves to take the best of them from our arsenal, combine them when needed, to achieve amazing results for our customers. But today we would like to focus on a wonderful new tool, Layout Builder, that appeared in Drupal 8.5. We will take a closer look at creating layouts in Drupal 8 with its help.

Layout Builder in Drupal 8: let’s get acquainted

The Layout Builder module has already been compared to the Panelizer, Panels, or Display Suite modules in its capacities. This makes sense, because according to the Layout Initiative, it is meant to become the number one tool for creating layouts in Drupal 8 core. The module is currently experimental but is expected to reach stability in Drupal 8.7 in the spring of 2019.

The Layout Builder lets you define the layout of any fieldable entity type (content type, user, and so on), or its individual entity. You just select from the predefined sections and add blocks and fields to them as you wish.

The module’s UI is simple and intuitively understandable for administrators, as well as equipped with the drag-and-drop feature to swap the blocks and shape your page. Developers, in their turn, will appreciate that layouts can be defined in a module or theme and have Twig templates.

Creating layouts in Drupal 8 with the Layout Builder

Let’s take a look at Layout Builder in action. We will see how it works on this example of creating a layout for articles. We will begin with enabling the Layout Builder module in core.

Creating a layout for a content type

We go to our Article content type in Structure and select “Manage Display.” Instead of the traditional fields, we see “Manage Layout” button. We also make sure the “Use Layout Builder” option is checked in the “Layout Options.”

The “Manage Layout” button takes us to the page where we configure the article content type layout.

By clicking “Add Section”, we can select from the ready layouts with a different number of columns. The unnecessary sections can be removed.

By clicking “Add Block,” we can add standard Drupal blocks and content type fields (like “Authored by,” “Body,” “Image” etc.) from the list on the right, as well as create custom blocks. The blocks can be dragged anywhere you wish throughout the layout.

Every block has a “Configure” and “Remove” tabs in the right-hand corner next to it. Blocks can also be configured when clicked on the list to the right of the page. For example, we have just configured the article image by attaching a custom image style of 500x500 to it.

So here goes our simple two-column layout with the image and the author on the left and body on the right.

When everything is ready, we click “Save Layout.” After that, all articles will be created according to this pattern.

Creating a layout for an individual node

In many cases, you do not need the same layout for all content type items. Layout Builder lets you make every content item layout customizable by checking the appropriate option on the “Manage Display” tab.

The Layout Builder offers the handy “Layout” button near each node that leads you to its individual layout customization page. The procedure is the same as in creating a layout for a content type.

Creating different layouts within the same content type

We see how Layout Builder can build articles pages, but let’s now complicate things a little and review a special case. What if you are using the same content type for several actual types of content, and want your website to generate different layouts for them?

That was exactly the case with one of our customers. They wanted different layouts to be generated for every content type on the homepage and on the content listing page. A select list menu was used to switch between the actual types of content within the same content type, which was based on the “list” field. According to this field value, specific types of content were filtered out in Views for homepage and content listing page.

The Layout Builder could be helpful here. If the Views is based on ‘Content,” it can choose a specific view mode. And it is awesome that the Layout Builder module can create layouts for particular view modes within the same content type!

View modes can be registered in the “Manage Display” tab of the content type, and each of them needs to have the “Use Layout Builder” option enabled, and each will have its own “Manage Layout” button.

When we worked with this customer, the Layout Builder was in alpha and we successfully used a different solution, which involved Display Suite and Twig templates. Every case is unique, and deserves a special approach.

Let’s build the perfect layout for your website pages!

We have made a little overview of creating layouts in Drupal 8 with the Layout Builder. Let your website have beautiful and properly arranged layouts that work exactly according to your wishes. Just contact our Drupal development team, and we will select the optimal tools from Drupal’s “treasury,” as well as apply customization when needed, to build you the layouts that you will love!

2 votes, Rating: 5

Read also

1

What is the first thing that grabs your attention when you visit an E-commerce website? No doubt it is the website’s design and appearance. Which E-commerce themes are the best? Don’t worry...

2

Drupal 8 is on its peak of flourishing, but the cycles of development never stop. That’s why the Drupal community has already announced the expected release of Drupal 9 and end-of-life for Drupal...

3

Our web development team prefers Drupal 8 content management system (CMS) for multilingual websites. Now find...

4

Hopefully, content editors and website owners are ready to gasp in admiration — because we know they will when they discover Gutenberg editor in Drupal 8. The eighth version of Drupal already...

5

Congrats to everyone on the release of Drupal 8.6.0! :) The new minor version of Drupal promises to be especially attractive for website users, owners, editors, and developers alike. Six months...

Subscribe to our blog updates