Drupal Lite 8: Using Layout Builder

Each content type has a default layout for presenting the fields. Using Layout Builder allows for the customization of any page. Layout Builder can be used to:

  • Apply layout templates to new sections of a page.
  • Drag and drop content blocks to different areas of the page.
  • Add site-wide content blocks, such as lists of content.
  • Add custom content blocks to a region.

Access Layout Builder

  1. Select Content in the administration menu at the top of the page.
  2. Find the content in the list.
  3. Select Edit. The edit content page is displayed.
  4. Select the Layout tab at the top of the page.

A representation of the page is displayed where each of the content blocks are located. For a General Page, the Media block is in the header region, the Body and Tags are in the left region, and the Folwell Components are in the right region.

the layout builder interface for a general page. there are Add Section buttons at the top and bottom. In the middle are the three regions for the header, left column, right column. Each region shows the fields and has a button to add a new block.

General Page default layout.

Create a New Layout for a Page

There isn't a way to change the layout of a page.  Instead, a new section is added to the page with the new layout, and then the blocks are dragged into the new section. Then the old, now empty, section is removed from the page.

  1. Select one of the Add Section buttons.
  2. Choose a layout from the list.
    1. The new layout is added to the page either above or below the current layout, depending on which button was selected in step 1.
  3. Drag the field blocks from the old layout to a region in the new layout. In the image below, the Body will move to the right side, the Folwell components to the header area, and the Media to the left side.
    layout builder interface with arrows indicating where the blocks will move to.
  4. If you want to remove a field, select the pencil icon in the upper right corner of the field container, and then select Remove Block.
    the edit button on a field with a menu displayed showing the items Configure, Move, Remove Block.
    1. After selecting Remove Block, confirm that you want to remove it. Although it says the action cannot be undone, you can re-add the block at any time.
  5. Remove the old section by selecting the X in the top left of the (now empty) section.
    the layout builder showing the populated section at the top and an empty section at the bottom. The remove section for the empty section is highlighted.

Add Content Blocks to a Layout

Additional content blocks can be added to any of the regions in the layout. There are three types of blocks:

  • Custom Block. This can be either a basic block (text box) or a Folwell Component.
  • Content Field. These are the fields for the Content Type.
  • Drupal Lite - Lists (Views). These are lists of content.

Please refer to the article Drupal Lite 8: Add New Content Blocks.