Loading...

How to use Layout Builder in Drupal 8

How to use layout builder in Drupal 8 | Unleashed Technologies

 

With the introduction of Layout Builder to Drupal core fast approaching, it’s time to learn how to use Layout Builder in Drupal 8 and what exactly you can use this powerful tool for. 

Why use Layout Builder? 

With Layout Builder, you can create a wide variety of layouts for any node on the fly. Content editors no longer need to bug a development team for custom landing pages, and developers can build multiple layout options for one single node display. 

Backup, How is this Different?

Typical, site building typically follows these steps: 

  1. Create a display mode
  2. Choose a layout (if you are using Layouts or Display Suite)
  3. Configure fields in the display mode 
  4. Theme a custom template, if you’re feeling fancy

 

While this approach works perfectly fine, it limits the content editor to one style for that particular display for a node page. If a content editor wants to change up layouts, such as put content in a two column display instead of one, they would have to change the default display mode. With layout builder, the content editor can use easy drag and drop functionality to build any custom pages they desire

With Layout Builder, you can now

  1. Build default layouts
  2. Build layout options to choose from
  3. Create your own layout on a node by node basis

In this article, I will walk through the set up of this module, and how to use layout builder in your Drupal 8 site. 

Getting Started

Before we can dive into creating layouts, we need to install our modules. 

Install Modules

  1. Navigate to Extend 
  2. Under Core, install: 
    1. Layout Builder
    2. Layout Library
    3. Layout Discovery

 

Enable Layout Builder for a Content Type

Field & Label options in Drupal 8 Layout builder

  1. Navigate to Structure > Content Types > *Content type name* > Manage Display
  2. Select which display mode you want to use the layout builder for (for this example I will be using the Default display mode. 
  3. Under the Layout Options, check off all options. Note: If you are using the layout library module, you will see a third option to allow content editors to choose a predefined layout. 

 

Using Layout Builder

 

  1. Build a Default Layout

Now that the modules are installed and enabled for your desired content type, you are ready to start building a default layout!

Creating a layout:

layout template - Drupal 8 layout builder

  • Navigate to Structure > Content Types > *Content type name* > Manage Display
  • Click Manage Layout on the display mode you wish to build out
  • On this page, you will see all fields displayed in one column - this is the default layout. You can either remove this section or drag fields out of the section as needed.
  • Click Add Section in any of the grey sections

Section configuration - Drupal 8 layout builder

  • From the flyout on the side, choose one of the column layouts (these are added by default). 

Choose layout selector

  • Within the newly added column layouts, you can either Add Block or drag an existing block on the page into the area. 
    • Drag field: 
    • When hovering over an existing field on the page, you should see crosshairs. Grab the field and drag it into another block region
  • Add field/block: 
    • Click Add Block
    • In the flyout, you can choose from a number of different blocks, fields, menus, ect. Click the title of the desired element
    • Configure the field 
    • Finish by clicking Add Block

Add a Block to Drupal 8  layout builder

And that’s it! You now have a default layout for your content type which will go into effect anytime a new node is created under that content type.

 

Add images in Drupal 8 Layout builder

 

2. Build Reusable Layouts

With Layout Builder, you are no longer restricted to just one layout options. Now, a content editor can choose from a list of layout options anytime they create a node. This is perfect for a content editor who wants to easily change the layout of their node with no additional effort needed on the end of a Developer. 

 

Add images in Drupal 8 Layout builder 2

Creating Layout Options

  • Navigate to Structure > Layout library
  • Click Add Layout

Layout Library Drupal 8 Layout builder

  • Label the layout 
    • ex: Two Column
  • Choose the entity that this layout will be used for.
    • Ex: Content > Article 
  • Save
  • Click Add Section within the main body content and choose a layout from the flyout
  • Add the elements you wish to appear in each section by clicking Add Block, or add other sections by clicking Add Section above or below. 
  • When you are finished, click Save Layout

layout selector

You can use these layouts now within your content type anytime you create a new node:

 

3. Build a Node Specific Layout

For those more advanced content editors, Layout Builder also allow you to create custom layouts for an individual node. 

Creating a custom layout for a node: 

  • Create or edit an existing node
  • Click the Layout tab at the top of the page

Edit Article contact layout builder

  • On the layout page, you can either rearrange the fields in the existing layout, or remove them and create a whole new layout. 
  • Save Layout when you have finished making all your changes


Recap

To recap, Layout Builder is a powerful tool that allows both developers and content editors to create page layouts. With Layout Build you can: 

  1. Build default layouts
  2. Build reusable layouts
  3. Build layouts on a node by node basis 

 

While this tool is still evolving, its introduction into Drupal core is now stable enough to start using in any Drupal 8 site. Happy building!