Create a Flexible Layout for a Content Type

A new favorite page-building and design module in core Drupal 8 and 9, Layout Builder makes it possible to create content-type-specific layouts. All nodes of the associated content type will display their content using the defined layout. This allows site builders to display a page’s content in two columns, or three, or two columns with a full-width banner image, etc. Then you can place the content type’s fields and Drupal blocks into the sections of the defined layout, all via the Drupal UI.

In this tutorial we’ll:

Enable the Drupal Layout Builder and Layout Discover modules
Create a new two-column flexible layout via the user interface
Update the Basic page content type so that all nodes use the new two-column layout

By the end of this tutorial you should know how to create a new flexible layout, and apply it to one or more content types.

Goal

Create a two-column layout for the Basic page content type using Layout Builder.

Prerequisites

Enable the modules and create a two-column layout

We’re going to define a new layout for the Basic page content type that has two columns at the top, and a single column below. We’ll place the page-specific author and publication date in the top left column, a generic call-to-action block in the right column, and the main content of the page in the single bottom column.

Enable Layout Builder and Layout Discovery modules

In the Manage administration menu, navigate to Extend (admin/extend), then select the Layout Builder and Layout Discovery modules from the list, and select Save to enable them.

Screenshot of extend section with layout modules

Enable Layout Builder for a content type

We will enable Layout Builder for the Basic page content type.

In the Manage administration menu, navigate to Structure > Content Types (admin/structure/types), then select Manage Display from the options in the Basic page row.

Screenshot of content types landing page with their configuration options

While there’s no explicit restriction about what view mode to use with Layout Builder, the intended purpose for the Layout Builder module is to set up and manage layouts for pages. We recommend using either the Full content or Default view modes when setting up a layout.

On the Manage Display tab under the Custom Displays section you should see a new details block named Layout Options. In this block select Use Layout Builder. Leave Allow each content item to have its layout customized checkbox unchecked and select Save.

Screenshot of manage display section of Basic page content type

Note: We cover the configuration option Allow each content item to have its layout customized in the tutorial, Change the Layout on a Per-Page Basis.

Switch to Layout Builder UI for the Basic page content type

Once you’ve saved the configuration, you should see that all fields disappear and a Manage layout button appears.

Screenshot of Manage layout button

When a view mode is set up to use Layout Builder, the appearance and placement of all fields is managed through the layout interface instead of the default Manage display interface. Select the Manage layout button to open the Layout Builder interface for the Basic page content type (admin/structure/types/manage/page/display/default/layout).

Screenshot of landing page of default layout

You should see the Layout Builder UI, and some help messages explaining the purpose and limitations of the UI.

By default, Layout Builder replicates the default Drupal behavior for this content type. It creates a one-column layout section and places fields that were displayed for the particular view mode inside it, matching the order that was in place prior to setting up Layout management for the view mode.