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:
This means it has been thoroughly tested and you can start using it on your production sites.
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):
Once enabled you can read that clarification above the Layout Builder editing area for the chosen entity:
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):
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.
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.
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.
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:
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:
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.
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