Today, we will discuss one of the powerful tools that transformed authoring experiences in Drupal 8 and 9. The Layout Builder jumped into the Drupal core in version 8.5 as an experimental module. Since then, it has become stable and enriched with more capabilities for both editors and developers. In Drupal 9, it keeps getting better. Welcome to take a look at how the Layout Builder works!

What is the Layout Builder module in Drupal 8 and 9?

Drupal’s Layout Builder module is a drag-and-drop core tool for creating the layout of content pages on Drupal websites. By content pages we do not mean specifically content nodes — the module is used for all kinds of structured, or fieldable Drupal entities. You can create the layout for:

• all items of the entity type (e.g. all blog posts)
• a single page (e.g. a landing page)
• or even a specific view mode (e.g. blog teaser)

The module is meant to replace the developers’ favorite page building tools such as the Paragraphs, the Panels, the Panelizer, or the Display Suite contributed modules. Of course, they are still great and relevant but the Layout Builder is a built-in solution that is created with a focus on user-friendliness.

It is part of the new Drupal’s core ecosystem of editorial solutions, as well as part of the new Drupal’s philosophy that should make it more understandable for non-tech users out-of-the-box.

Indeed, the Layout Builder module is pretty easy to use for a number of reasons:

• First, it needs no installation because it is built-in.
• Next, it immediately shows a preview of what the content will look like.
• Finally, it has a very intuitive interface with plenty of drag-and-drop options, explanations, and hints.

How to work with the Layout Builder in Drupal 8 and 9

Enabling the module

As mentioned above, the module needs no installation, so you just need to enable it on the Extend tab of your Drupal admin dashboard.

You will also need to enable the Layout Discovery module. If you do not do it from the start, Drupal will remind you to do so.

 

 

Creating the layout of a content type

First of all, you need to configure the necessary content type to use the module. NB: This action cannot be undone in the future — well, it can, but you will lose everything that you will have created.

Let’s choose the Article content type for our example. Go to Structure — Content types — Article — Manage display. At the bottom of this tab, you will see Layout Options. Check the “Use Layout Builder” option and save the result.

With this done, you can see that your Manage display tab no longer shows the fields with their settings as it used to do. But you see the “Manage layout” button that you need to click in order to start the layout creation.

After clicking this button, you land on the most interesting place in this whole story — the Layout Builder interface. At the top, it shows a helpful explanation of what exactly you are doing (“You are editing the layout template for all Article content items”).

The “building materials” for your layout include:

1. Sections (they make up the layout)
2. Blocks (they are added into the sections)

Before you begin it’s better to remove the default sections so you can start from a clean slate. To do so, click on the cross icon next to “Configure Section” and then use the “Remove” button in the menu that will slide out.

Click on the “Add section” button and the slideout menu will offer you to select a section with 1, 2, 3, or 4 columns.

When clicking on the needed type of section, you can choose the column width proportion. FInally, click “Add section.”

When the section is added, click “Add block” and you will see a list of available blocks. In addition to the traditional Drupal blocks, you will find many more options on this list. Content fields, user fields, Views blocks, menus, and much more can become part of your layout. Creating a custom block is also possible.

When you have selected a block, you can configure it in the same menu. The options resemble the ones on the traditional “Manage display” tab. Finally, click “Add block” and it jumps to the selected section.

Next to the article image block, you can add the article body and configure the block to your liking.

You can drag blocks around within the section to place them where you like. If you decide to come back to configuring some block or section at any time, you can open the configuration menu by simply clicking the quick edit pencil next to the block or “Configure section” next to each section. Finally, do not forget to save the result.

Creating the layout of a single page

If you do not need your layout to strictly apply to each entity of a given type, you can create individual ones for individual entities. This is perfect, for example, when you work with landing pages, “About” pages, and other types of pages that are unique on your website.

To achieve this, go to Structure — Content types — Article — Manage display, scroll to the bottom of the tab and check “Allow each content item to have its layout customized.” Individual nodes will have a “Layout” option next to the traditional “Edit” and “Delete” menu.

Creating custom layouts

Of course, an intuitive web interface is great for editors, but Drupal development gurus will always want their traditional creating the structure of pages in order to make them suit the customers’ requirements perfectly. For this purpose, the Layout Builder is extensible via custom code, so it’s possible to define layouts in custom Drupal modules or themes.

Extra modules for the Layout Builder in Drupal 8 and 9

The ecosystem of additional modules to enhance Drupal’s Layout Builder keeps growing. Here are some of the most interesting ones.

• The Layout Builder Styles module provides site builders with a style selection dropdown, which allows them to apply styles to the sections and blocks.
• The Layout Builder Restrictions provides an interface for specifying which blocks and layouts should be available in the UI and which should not.
• With the Layout Builder Library module, content editors can select layouts from a collection that site builders have created for them based on specific entity types.
• The Layout Builder Modal module is very helpful when users need to write text in a custom block. They can do it in a handy modal instead of the off-canvas dialog.
  
• The Bootstrap Layout Builder module adds responsive grid support, allows site builders to add containing wrappers to sections, supports background image and video, and has other advanced customization options.
• With the Layout Builder Asymmetric Translation module, it’s possible to provide different layouts for content in different languages on a multilingual website based on cultural and language preferences.
• The Layout Builder Symmetric Translations module allows you to translate the block labels, but the layout itself will stay the same for all languages (as opposed to what the Asymmetric Translation module does).
• The Layout Builder Browser enhances the layout creation experiences by adding custom configurable images for blocks, custom grouping of blocks, and more.
• The Layout Builder Component Attributes adds HTML attributes (ID, Class(es), Style, and Data-*) to the blocks.
• The Layout Section Classes module allows site builders to define a list of classes and labels they want to make available for the sections.
• The Layout BG (meaning “background images”) module makes it super easy to add background images and videos.
• The Layout Builder Save And Edit module adds a “Save and edit layout” button to the Layout Builder UI, which allows editors to see their recently added changes and add more changes.
• Thanks to the Layout Builder Operation Link module, a “Layout” option is added to the operation menus for content administration pages.
  
• With the Layout Builder Lock, it’s possible to forbid specific actions on the default layout when someone overrides it for a specific entity.
• The Layout Builder Direct Add makes it quicker to add blocks. Namely, it replaces the “Add block” link with a drop-button listing the custom block types.

Final thoughts

Indeed, the Layout Builder module in Drupal 8 and 9 looks very cool, and extra modules make it even cooler. Your Drupal version needs to be new enough so you can use Drupal’s drag-and-drop layout tool in its stable version. Golems can help! Our Drupal services include website development, upgrades, support, and more.

Wishing everyone the best experiences with the Layout Builder!

Your Golems