Getting Started with Layout Builder in Drupal 8

The Layout Builder module allows you to customize the design of the entity such as content types, vocabularies, etc… by offering a new drag-and-drop interface. The new interface uses your front-end theme and it offers a proper preview of the actual content which will be used.

This makes it easier to build your layouts because you won’t have to save and then see what it looks like on the front-end, you can preview your changes while building it.

The module replaces the “Manage display” page with the new layout builder once enabled. Instead of seeing all the fields on the page, you’ll see a “Manage layout” button which redirects you to the layout builder page.

The best way to learn how to use any module is by using it to build something. So let’s get into it.

In this tutorial, you’ll learn how to use Layout Builder to modify a content type and how to use the module as a page builder (this is my favorite).

Getting Started

Layout Builder ships with Drupal core so you won’t have to download yet another module.

Just go to Extend and enable Layout Builder.

Or, if you use Drush run the following command to enable it:

drush en layout_builder

Note: Layout Builder became stable in Drupal 8.7 make sure you’re using the latest version. In older versions, it was an experimental module.

1: Use Layout Builder to Customize Content Type

As mentioned earlier, when Layout Builder is enabled you’ll no longer need to manage field formatters through the “Manage display” page. Instead, you’ll use Layout Builder’s new drag-and-drop interface which uses your front-end theme.

Let’s now use the module on the Article content type. The layout we create will be used for all article content.

1. Once you’ve installed the module, go to Structure, Content types and click on “Manage display” on the Article row.

2. Expand the “Custom display settings” and enable the “Full content” view mode, then click on Save.

3. Then go to the “Full content” view mode by clicking on the tab below “Manage Display”.

4. Once on the “Full content” view mode scroll to the bottom and click on Layout options and check “Use Layout Builder”, then click on Save.

5. Once you’ve enabled Layout Builder on the view mode you should only see a “Manage layout” instead of formatters.

From this:

To this:

6. When you click on “Manage layout”, you’ll be redirected to the front-end with a different interface.

Add Sections to Layout

Instead of selecting a single layout as you would with other modules such as Panels/Panelizer or Display Suite, you build your layout by adding individual sections. A section can have a single column or multiple columns.

1. Let’s start by removing the default section which is already there. Click on the X button.

2. Click on “Add Section”, then select a layout for the section. For this tutorial, click on “Two column”.

3. Sections can have configuration, in this instance, you can choose the column widths. Just leave it at “50%/50%”. Then click on “Add section”.

Once added, you should see an “Add Block” link for each section region.

If you want to change the width of the section regions, just click on “Configure section” to adjust it.

Add Blocks to Section Regions

Once a section is added then you can add blocks into the section regions. Adding a block is fairly straightforward, just click “Add Block” and the “Choose a block” option will slide out from the right.

Choosing a Block

Blocks can be chosen from the right by just clicking on them. You can even find blocks by filtering by their name using the “Filter by block name” text field. A “block” in the context of the Layout Builder module goes beyond what you would normally think of being a block. Especially if you’re used to adding blocks into theme regions via the “Block layout” page. For one thing, content fields are exposed as blocks.

In Layout Builder the fields on content types are exposed as blocks and this means they can be added to section regions. All fields should be grouped under “Content fields”.

As you create more fields this list will grow.

Let’s continue building out our layout by adding the “Authored on” field to the left column. Click on “Add Block” in the left column and filter by the block name.

When you click on the block you want to add, you’ll be able to adjust the field formatter. Once you’ve configured the formatter click on “Add Block”.

Go ahead and add the Changed field in the right column.

You’ll notice that when you add a field you can configure the formatter it uses. Layout Builder will still render the field using its formatter.

You can edit a block by hovering over it and clicking on the pen icon. You’ll get a drop-down where you can choose to configure, move or remove the block.

Moving Blocks

Blocks can be moved into other section regions by clicking on them and simply dragging them into a new region.

Finish Building Article Content Type Layout

Now that you know how to add a section to the layout and add blocks into the sections let’s finish building the Article content type.

So far we have a single two column section with the “Authored on” field on the left and the Changed field on the Right. We’ll now create other sections for the Image, Body, Tags and Comments field.

Body and Image Field

1. Click on “Add Section” below the current one and choose “Two column”, select “25%/75%” from the “Column widths” drop-down and click on “Add section”.

2. Click on “Add Block” in the left column and add the Image field to it.

3. Click on “Add Block” on the right and add the Body field into it.

4. Click on “Add Section” below the one we just created for Image and Body and in this one, we’ll add the Tags and Comments field. Select the “One column” layout for this section.

5. Click on “Add Block” and add the Tags and Comments field into it.

6. You can turn off the field preview by unchecking “Show content preview”, just below the “Save layout” button.

This makes moving fields easier and it’s easy to see all the fields as sometimes the field previews take up a lot of real estate.

After you’ve added all the required fields this is what the layout should look like.

7. Scroll to the top and click on “Save layout”.

Override Default Layout

The layout we’ve built will be applied to all articles. But what if you want to customize the layout of a single article? What if you want to add an extra footer to an article?

Layout Builder allows you to override the default layout on individual content items.

To override the layout you need to turn on the functionality, it’s off by default.

Go to the “Manage display” page, where you checked “Use Layout Builder” earlier, and this time check “Allow each content item to have its layout customized.” and click on Save.

Now if you go to an article you should see a Layout tab button.

You can now modify the layout using the same interface. However, this will only change the layout on this specific piece of content.

If you ever want to revert the layout back to its default you can do so by clicking “Revert to defaults”.

2: Use Layout Builder as a Page Builder

In the section above we looked at how to use Layout Builder to customize the Article content type. Any article created will have the same layout. Now let’s use the module as a page builder by customizing the layout of an individual piece of content.

But before we can begin we need to enable Layout Builder on the “Basic page” content type.

1. Go to Structure, Content types and click on “Manage display” on the “Basic page” row.

2. Enable the “Full content” view mode by going to “Custom display settings” and enabling it.

3. Go to “Full content” and check “Use Layout Builder” and, this is the important one, check “Allow each content item to have its layout customized.”.

The “Allow each content item…” option allows us to customize the layout on a per content basis.

Here is a screenshot of what we’ll create:

We’ll create a custom homepage using two sections and three blocks.

Create Basic Page

Now let’s go ahead and create a homepage using the “Basic page” content type.

1. Go to Content, “Add content” and “Basic page”.

2. Enter Homepage into Title and click on Save. Don’t worry about adding anything into the Body field as we’ll use Layout Builder to create the page.

3. You should see a new tab next to Delete called Layout, go ahead and click on it.

Add Justify Buttons

The text in the header block will be center aligned. However, we need to add the justify buttons to the editor to make this possible.

Go to Configuration, “Text formats and editors” and click on Configure on the “Basic HTML” row.

Add the justify buttons into the editor by dragging them into the “Active toolbar”.

The button works by adding a class to the elements i.e., text-align-center, text-align-right, text-align-justify etc… However, we need to change the “Limit allowed HTML tags and correct faulty HTML” filter to allow classes to be added to elements.

Scroll down to “Allowed HTML tags” and add class into the <p> and add the header tags.

From this:

<h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <p>

To this:

<h2 id class> <h3 id class> <h4 id class> <h5 id class> <h6 id class> <p class>

Now you’ll be able to align (or justify) content using the “Basic HTML” text format.

Add Custom Block

With the text format configured let’s add the header text.

1. Add “One column” section at the top of the page.

2. Then click on “Add Block”, “Create custom block”.

You can add any custom block types using Layout Builder. You can see all the available block types by going to /admin/structure/block/block-content/types.

3. Add “Header text” into the Title field and uncheck “Display title”.

4. Then enter some text into the editor and center it, then click on “Add Block”.

Examples:

Welcome to Drupal

Drupal is a powerful open source CMS written using PHP.

Once you’ve added the block into the section you should see a preview of the actual block content. Of course, make sure you have “Show content preview” checked to see it.

Embed Image

Now let’s look at embedding images.

The way we’ll embed an image is by using the Entity Embed module to embed images into the Basic block. This will save us from having to create a custom block type.

1. I won’t cover how to use Entity Embed in this tutorial as I’ve already written about it on the “Managing Media Assets using Core Media in Drupal 8” tutorial.

2. Once you’ve configured Entity Embed, create a “Two column” section. Set the “Column widths” drop-down to “25%/75%”.

3. Click “Add Block” on the left, then “Create custom block”.

4. Embed an image into the editor using the Entity Embed button you created.

5. Click on “Add Block” on the right and add some dummy text.

Once all the blocks are in-place your layout should look something like this:

6. Click on Save layout and congratulations, you’ve created a custom page using the Layout Builder module.

Summary

We covered a lot in this tutorial. I wanted to show you that you can use Layout Builder to customize entity layouts as well as using it as a page builder. Could the module replace Paragraphs for building complex pages?

It depends on how much flexibility you want to give to your editors.

Have you used Layout Builder in a great way, let’s us know in the comments below.

Layout Builder Modules

An ecosystem of modules is starting to be built around Layout Builder. Below are some links:

• Layout Builder Restrictions
• Layout Builder Modal

Go to the Additional modules page in the Layout Builder docs for more modules.

FAQs

Q: I can’t see “Allow each content item to have its layout customized.”. on the Default view mode

You’ll only see this checkbox on content types if you’re using the “Full content”. view mode. There’s an issue on drupal.org about it.