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 development agency 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 company, 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!