Using layouts to build landing pages

The Layout Builder module allows content creators to use a drag-and-drop interface to customize how content is displayed on a page. Unlike using field formatters in view display modes, this does not require a developer and can be customized for individual pieces of content. With Layout Builder, content creators select from different layouts available in the system and place blocks in them to build the page’s content. In this recipe, we will walk through installing Layout Builder and setting up the layout for the Article content type.

Getting ready

In this recipe, we will be using the standard installation, which provides the Article content type. Any content type will suffice.

How to do it…

1. Begin by installing the Layout Builder module and its dependent module, Layout Discovery:

   php vendor/bin/drush en layout_builder –yes

2. We must opt into using Layout Builder for the display mode of our content type. Visit Structure and then Content Types and use the drop button for Article to click Manage Display.
3. Find the section labeled Layout options and check the Use Layout Builder checkbox.
4. Click Save to enable Layout Builder.
5. The Manage Display form should now show a Manage layout button.
6. Click the Manage layout button to enter the Layout Builder user interface to customize the Article layout.
7. By default, the Show content preview checkbox is turned on. Uncheck this checkbox to turn off the generated sample preview content.
8. Click Add section to create a new section and select Two column layout.
9. Select 33%/67% for the Column width and click Add section, leaving the administrative label empty.
10. Now that we have added our two-column section, we can move fields into those layout parts. Drag the Image field to the left part and the Body field to the right part of the new section.
11. Click Save layout to save the changes.
12. Without using code, we have now created a layout for Articles that places the image in a sidebar next to the article content.

How it works…

The Layout Builder module provides an alternative render system for entity types. Using Layout Builder is an opt-in process for each display mode of a content entity type. If the entity type’s display mode is not managed by Layout Builder, it falls back to the regular render system using field formatters.

Layouts are provided by layout plugins, which have matching Twig templates. Modules and themes can define new templates that can be used. Layout Builder leverages blocks to display content. The kinds of blocks available to be embedded in Layout Builder are based on blocks available to the system.

Layout Builder also exposes each field on the content entity as a block, allowing you to place each field in a different section.

Like custom nodes or other entity templates, if you make changes to the layout plugin or nested elements without updating the corresponding Twig templates for the layout, you may see things render incorrectly. Be sure to review the Twig template accordingly when making such changes.

There’s more…

Layout Builder was an exciting addition to Drupal when it first arrived and has many more features and customizations far beyond what was covered in this recipe.

Accessible

The Layout Builder user interface went through rigorous accessibility testing. The entire Layout Builder user interface can be navigated using a keyboard or other accessibility devices.

Custom layouts for each piece of content

When configuring the layout options, the Allow each content item to have its layout customized option allows content editors to override the default layout for their content. When a piece of content is created, it will use the default layout. Content editors will see a Layout tab that allows them to customize the display of their content in the Layout Builder user interface.

The layout override is also stored in field data attached to the content entity, making it tracked with revisions! That means new drafts can be created for a piece of content with layout changes and they can be published through Content Moderation workflows.

Additional modules to extend Layout Builder

There are a copious number of modules that extend Layout Builder to customize its experience and provide default layouts. For instance, if you use the Bootstrap front-end framework, the Bootstrap Layout Builder (https://www.drupal.org/project/bootstrap_layout_builder) module provides a user interface for building layouts that use Bootstrap’s styling.

A list of modules that extend Layout Builder can be found on Drupal.org: https://www.drupal.org/docs/8/core/modules/layout-builder/additional-modules.

See also

• Layout Builder module documentation on Drupal.org: https://www.drupal.org/docs/8/core/modules/layout-builder