Stable Layout Builder in Drupal 8 core: a tour on layout creation

There are Drupal modules loved by both developers and content editors. One of them is Layout Builder. It allows you to create page layout templates of various complexity via a handy drag-and-drop interface. The ability to do it with a built-in user-friendly tool is among the greatest benefits of Drupal.

We celebrate the news that Layout Builder in Drupal 8.7 core has become stable, which means it is officially ready for production sites. Let’s take a closer look at layout creation with this tool.

Layout Builder in Drupal 8 core: stable and feature-rich

Up to this moment, Layout Builder has gone a great path from an experimental module in Drupal 8.5 core. After a number of significant improvements and fixes related to keyboard accessibility, permission granularity, layout storage, translations, usability, and more, we now see Layout Builder in Drupal 8.7 core as a stable module.

Layout creation functionality is also found in popular contributed modules like Panels, Panelizer, Paragraphs, and Display Suite. Layout Builder inherits the best practices from them, and resembles them in many ways, while staying unique. So let’s review this intuitively understandable and powerful module has to offer.

Main features of Layout Builder

Layout Builder works with fieldable Drupal entities like content, users, comments, taxonomy, and so on. This “Lego box” allows you to:

• compose the page layout with predefined sections
• populate the sections with blocks that are various Drupal elements
• configure each block
• drag and drop the blocks to rearrange them

and much more.

The module can be used for these scenarios:

• creating a layout for all entities of a certain type (e.g. all blog posts)
• creating different layouts for different display modes (e.g. blog post’s teasers)
• overriding the layout just for one entity of a type (e.g. just one blog post)
• creating a layout for an individual entity (e.g. one landing page)

The last point deserves a special note. As Drupal creator Dries Buytaert wrote in his article “Why Layout Builder is so powerful and unique,” many of competing CMSs don’t offer a templated approach to layout creation from the browser. They only allow layouts for individual pages — in other cases developer input is needed. Drupal’s Layout Builder allows you to do both from the UI, which really makes Drupal stand out!

A tour on layout creation with Layout Builder

Let’s now have a look at how to create a simple layout with Layout Builder in Drupal 8.7.

1) Enabling the necessary modules

The layout creation story starts with enabling the stable Layout Builder and Layout Discovery modules in Drupal 8 core. 

2) Enabling Layout Builder for a content type

We want to create a template for all items of a content type. In our case, this is the “Tour” content type.

In Structure — Content types — Tour, we select the “Manage display,” check “Use Layout Builder,” and click “Save.” 

Note: If we wanted to make each content item individually customizable, we would also check the other option “Allow each content item to have its Layout customized."

We no longer see content type fields, but no worries — they will be available in the Layout Builder UI where we can now go by clicking “Manage Layout.”

3) Composing our Layout with sections

Once moved, we can already see some sections made of existing “Tour” content type fields. We can use these or add new sections for 1, 2, 3, or 4 number of columns by clicking “Add section.” We can also add a couple of sections if we want to combine them vertically.

When choosing the section, we can set the width proportion of its columns.

4) Populating the Layout sections with blocks

Each section can be populated with blocks. These are not (or not only) Drupal blocks in the usual meaning — these are actually all Drupal website elements that are the building bricks for our Layout.

By clicking “Add block,” we see our content fields, lists (views), users, user fields, forms, menus, system elements, and so on. Blocks can be found by name. Custom blocks can also be created.

We have chosen a two-column section and we would like it to have the following blocks:

• “Tour” image, “Tour” body, and Footer block for contacts (in the left column)
• The “Venice stories” View that we have prepared (in the right column)

5) Configuring the Layout blocks

The familiar quick edit pencil above each block offers us to configure, move, or remove it. By choosing to configure, we see a configuration tray to the right. It has options in accordance with the formatters that the block has. For example, we can select the image style for our Tour image or hide the label in the “Venice stories” block.

6) Brushing up the Layout structure

The blocks are draggable throughout the layout if we want to rearrange them. We then look through the page to see if it only has the needed sections and blocks, and remove the extra ones.

7) Saving the Layout and viewing our content

When we are done, there is no forgetting to click “Save layout” and then we can go and see how our content looks in our new template.

Get attractive Drupal 8 layouts!

We can all enjoy great opportunities for layout creation with the stable Layout Builder in Drupal 8.7 core. In our today’s example, we have just touched the tip of the iceberg of its capabilities.

Ask our Drupal development team to create magnetically attractive layouts for your Drupal 8 website, and let your users enjoy working with your site and your conversions grow!