How to Use the New Layout Builder in Drupal 8

Earlier on the OSTraining blog, Steve Burge gave an introduction to the new Layout Builder in Drupal 8.

Many users have been eagerly waiting for this module and it was released in version 8.5.

In this tutorial, you will take a further look at how to work with this module. You will see how to use the Layout Builder to configure content types and nodes.

This module is one of the new major changes. I feel strongly it will really improve the usability of Drupal. Let’s try it out!

Step #1. Enable the Layout Builder Module

• Click Extend.
• Scroll down to the CORE (EXPERIMENTAL) section.
• Check the Layout Builder module.
• Click Install.

• The Layout Discovery module will be enabled as a requirement.
• Click Continue.

Step #2. Create Content

For the purpose of this tutorial, I’m going to generate five articles with the Devel module. This is a handy module that will help you with development tasks.

• Install the Devel module.
• Enable both the Devel and Devel Generate parts of the plugin.
• Click Install.

• Click Configuration > Generate content in order to generate five articles.
• Click Generate.

• Click Content and you’ll see the generated articles.

Step #3. Configure the Layout of the Article Content Type

• Click Structure > Content types.
• To the right of the Article content type click the dropdown list.
• Choose Manage display.

You’ll be presented with a different interface than the one you’re used to.

• Click the Manage layout button.

This drag-and-drop interface will allow you to configure the layout of all nodes of the Content type Article. Please notice that the layout capabilities refer to the Content itself (i.e. the Content region).

• Click the Add Section link at the top.

You will see a slide menu on the right with different layout options.

• Choose one of them, for example, the 3 “equal” columns layout.

You’ll see the newly created layout surrounded by blue dashed lines:

• You can click on each of the Add Block links to place Drupal’s default and custom blocks within this new layout regions, for example, within a block specifying the language of the content:

• Drag and drop each of the fields of the Content type inside each one of the layout regions.
• For example, place the image on the left column, the body text on the middle column, the tags on the right column and the comments in the bottom part (footer) of this particular section:

• When you’re finished with the configuration for your desired layout, scroll to the top of the page.
• Click Save Layout.
• If you leave some part empty, it won’t display in the node:

• All your articles have the same layout now. Take a look at them!

Step #4 – Configure the layout of a single node

• Once again, click Structure > Content types.
• Choose Manage display from the drop-down of the article content type.
• Check the Allow each content item to have its layout customized checkbox.
• Click Save.

• Click Content.
• Choose one of your articles.
• You’ll see a new tab above the content called Layout:

• Click this tab. You’ll be presented with the same interface.

The process is the same as the one I described above. The only difference is that you’re configuring the layout just for this article. You can add blocks or even an additional image the same way as explained before.

This layout capabilities make Drupal even more accessible for site builders, who don’t know how to override templates or just to speed up the development time.

As already stated, this module is in the experimental phase. Please, don’t use it in your production sites yet. Play with it and send your feedback to Drupal.org if you find any bugs.

I hope you liked reading this tutorial. Thank you and please leave your comments below!

Additional Reading

• Check Out the New Page Builder in Drupal 8.5!
• Learn Drupal 8 Layout and Theming By Taking the Class

What’s Next?

If you want to learn more Drupal, join OSTraining now. You’ll get access to a vast library of Drupal training videos, plus the best-selling”Drupal 8 Explained” book!