Back to top

Layout Builder—Change Content area layout

Drupal 8 Layout Builder Add Section Four columns

Layout Builder is the new module in Drupal core since the version 8.7. It brings a powerful and easy way for site builders to control the layout of the main content area of a Drupal page.

It is a huge step up for Drupal when competing with website builders for winning Site Editor's favor in taming the confusing coupling of content and its design. Many other features can be built on top of it to create a truly remarkable editors’ and content creators’ experiences.

This article shows what Layout Builder provides out of the box for changing the layout of your page content area.

Layout Builder is in Drupal 8.7 core

Before the Drupal 8.7 version the Layout Builder module was available as an experimental module but the version 8.7 and onwards includes it in core:

enable Layout Builder on Extend page

This means it has been thoroughly tested and you can start using it on your production sites.

Layout Builder controls only the main content area

The “Layout Builder” name may sound generic and can confuse people into believing that it provides the interface to construct the layout for entire pages, which is not the case. Layout Builder can only affect the “main content” part of a Drupal page, it doesn't replace or control the theme regions.

Unless, of course, you do some custom theme magic, which isn't a likely course of action in most cases. It would be wonderful if we could use the Layout Builder for the entire page layout. For the interested join in the discussion here: Discuss using Layout Builder to control "site chrome".

The concept of Drupal Theme Regions through which you can control what content to display in different parts of the page is still here. The usual regions for site navigation, sidebars, breadcrumbs, footer blocks, etc. are being used to display various Blocks, Menus, Views, Forms, etc. just like before.

The Layout Builder doesn't even affect the entire Main Content region, it only affects the output of the Main page content Block, the components within it on entity pages (example regions of Bartik theme):

Layout Builder only affects the main Content area Region

Once enabled you can read that clarification above the Layout Builder editing area for the chosen entity:

Layout Builder only affects main content area

Enable Layout Builder on Manage display page

To put it in more specific terms the Layout Builder affects Fields layout within your Article or Basic page content items, or even your Contact page. It can be enabled on any Manage display page (these pages usually control how an entity's Fields are ordered when viewing it):

enable Layout Builder on Manage display page

This changes the Manage display page in the way that replaces the entire Field list where you usually reorder the Fields and change Format options with a single Manage layout button.

Layout Builder - Manage display - Manage Display button

If the Manage display page isn't enough of a hint it's worth mentioning that the Layout Builder doesn't affect the way the Edit pages are laid out, it only affects the View page of an entity. Edit pages are still controlled by the Manage form display pages.

Each new Layout needs a new Section

When you first enable the Layout Builder for an entity, for example the Article Content Type, it will pull in all the pre-existing Fields order configuration.

And then the magic can begin. Add a new Section for each part where you need a different layout.

Need help? Schedule a free 15 minutes evaluation callContact me

Once you have a Section with a Layout applied, you will be able to add Blocks to each of the layout columns.

Here we see the Four column layout applied to a Section, each column housing one of the Fields from a Content type, and another Section about to get the same Four column treatment:

Drupal 8 Layout Builder Add Section Four columns

You can remove the Fields from the original legacy Section, or remove the entire Section, then recreate everything through Sections and Columns Layouts.

Here is what the output for the four Fields from the above configuration look like with the four column layout applied:

Fields laid out using Drupal Layout Builder

The Columns are usually coded to be responsive to the browser width so they collapse one below the other on smaller devices. So there is no need to worry that using the layouts might break your site mobile-readiness.

Layout Builder FTW—show Blocks, Forms, Views, Menus among Content Fields!

Something that was difficult to achieve in the previous versions of Drupal is interspersing your content Fields with various other content, such as Views, Blocks, Forms, etc.

Layout Builder allows you not only to place those items within the main content area but to combine them into custom layout grids.

In short, the Layout builder can:

  • do everything you could with regular Manage display: reorder Fields, format Fields, disable Fields, use View modes

but additionally Layout Builder:

  • provides an accessible and visual way of rearranging the content elements
  • allows for adding of Views, Menus, Forms, Blocks, other entities, etc. along with Fields
  • applies responsive layouts to your content elements
Would you like me to help you with this? Or with any other Drupal problem? Contact me and I'll summon all my skills and Drupal might to solve it for you.
What did you think of this article?