Drupal 8: Layout Builder

This is a tutorial on how to get started building pages with Layout Builder on Western's Drupal 8 sites.
 
Layout Builder is a powerful tool for building pages with an interactive, drag and drop interface.
 
Layout Builder makes it easy for content editors to build interesting, responsive layouts.

Fun Fact

All of the pages on this Design System site, including this one, were built using Layout Builder!

Getting Started

The first step to using Layout Builder is to create a Basic Page. Layout Builder can be enabled on any content type, but a Basic Page works most of the time.

The page will need a Title, but leave the Body field blank. Click Save to create and load the page.

There will a be a set of tabs at the top edge of the page: View, Edit, Delete, Layout, Revisions.

Click the Layout tab to open up Layout Builder.

View, edit, delete, layout, revisions tabs

Sections and Blocks

When working in Layout Builder, there are two types of add links: Add Section and Add Block.

A screenshot of layout builder, with "Add Section" and "Add Block" links

Sections

Sections create the structure of the page. These are what you can drag and drop blocks into. You cannot drag and drop sections themselves—you can only new create sections above or below existing sections.

You can also remove sections by clicking the small "X - Configure section" link at the top left of the section. (Sometimes the X does not render, and this displays as a vertical bar. Clicking on it will still bring up the same options.)

There are single column, flex, and multi-column layouts.

screenshot of the "Choose a layout for this section" option panel, with different options for single and multi-column layouts
A column widths drop down selector, with 50% 50% selected

Each multi-column layout has options for adjusting the width of the columns. These options will show up after selecting one of the layouts.

Blocks

Blocks contain a page's content.

There are many different types of blocks. Some of these make use of some of the most powerful features of Drupal as a content management system. There are also some simplified custom block types built by WebTech. These are the block types that are covered in this tutorial.

These custom blocks are pre-styled, have a variety of customization options, and are mobile friendly. A reference of custom block types is available.

To add one of these blocks, select Create a Custom Block and choose one from the list.

Start with Beyond basics block. It offers a lot of customization options for flexibility, and is useful for basic text content.

"Choose a Block" option panel, with "Create a Custom Block" as the first link at the top. This is the link to select. Below this are a number of block types that have content generated by Drupal.
"Add new inline Block" configuration screen that pops up after selecting "Create custom block." This has a list of custom block types, including "Beyond Basics Block"

Understanding Fields

Fields are the text inputs and select options that control the output of a block.

In a Beyond Basics block, the available fields are:

  • Title
  • Heading font
  • Heading level
  • Body*
  • Background color
  • Font size
  • Custom classes

* Note: There is also a Text Format select menu below the Body field, but this is not technically a field. Rather, it's an option attached to all large text fields.

For the most part, text boxes will control content in a block. Drop down menus will affect the look or styles of the block.

For Beyond Basics Blocks, the Title field affects the heading of the block. The two heading select boxes affect how the title looks.

Background color changes the block's color, and also the text and link colors of the block. Font size changes how big the font is on that block.

Custom classes is a special field. It does not output any text. Rather, it injects CSS classes onto the blocks' container. This is an advanced use that is not covered here, but some examples of available classes can be found in the Blocks Reference Guide.

screenshot of the beyond basics configuration screen, with the different fields (title, heading font, etc.) highlighted in pink

Building the Layout

Understanding Sections and Blocks is all you need to start creating layouts. Start adding different sections to see how they work. Create custom blocks, and drag and drop them in to place.

Editing and deleting blocks

To update the content of a block, click on the pencil icon that appears when hovering or focused on the block. This is also how you can remove a block.

Saving the layout

When you are ready to view your page without the extra dashes and space added by the Layout Builder interface, scroll to the top of the page and click the Save Layout button.

Alternatively, you can discard the changes you've made.

Each time you save a layout, a revision is created. This is handy for reverting back to a previous state if things have gone awry!

Tip: Show content preview

If you are having a hard time dragging and dropping large blocks, uncheck the "Show content preview" option at the top of the page. This will make the blocks much smaller, and much easier to manage. When you are ready to see the content again, you can recheck this option.

 

screenshot of a checkbox option labeled "Show content preview"

Publishing the Page

The last step is to publish the page and put it somewhere in the page's navigation tree.

If you did not uncheck the "Published" button when creating the page, your page is already published and can be shared with non-logged in users. Otherwise, click the Edit tab and check that published option.

While on the Edit page, you can also add this page to the menu. Do this by selecting Menu Settings tab, checking Provide a Menu Link, and selecting where to nest the page.

For more information on how to set up a menu in Drupal 8, see the Drupal 8 Menu Tutorial video.

Finally, you may wish to set a custom URL alias. This is also done on the Edit screen, under the URL alias option tab.