Drupal 8: Layout Builder
All of the pages on this Design System site, including this one, were built using Layout Builder!
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.
Sections and Blocks
When working in Layout Builder, there are two types of add links: Add Section and Add Block.
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.
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 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.
Fields are the text inputs and select options that control the output of a block.
In a Beyond Basics block, the available fields are:
- Heading font
- Heading level
- 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.
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.
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.