Skip to main content

Layout Builder vs Layout Paragraphs

Sep 11, 2022
Layout Builder

Що таке Layout Builder?

Layout Builder

Layout Builder is a module added to the Drupal core. It allows content managers and developers to easily create visual layouts and design the content using the drag-and-drop function. With the Layout Builder, the users can set up a single page mockup, create a unified design for similar content, or develop landing pages.

There is a lot of documentation about the Layout Builder on, which can not please developers.

Встановлення та налаштування моудля Layout Builder

As I have said earlier, the Layout Builder module is already added to the core (starting from version 8.5), so all you need is to activate the Layout Builder and Layout Discovery modules.

Layout Builder install
This fix needs a hero!

Використання Layout Builder

Let’s analyze the use of the Layout Builder through the example of the Basic Page content type.

On the display control page (/admin/structure/types/manage/page/display), click the checkbox next to Use Layout Builder and save the changes. This will allow you to create a layout for every node of such a content type. When clicking on the checkbox next to Allow each content item to have its layout customized, it allows editing the layout for every node separately and not the whole content type simultaneously.

Layout Builder

After the changes are saved, you can see that the field display settings are disappeared, and the additional button Manage layout is now visible.

Layout Builder

When clicking the Manage layout button, you are redirected to the page for managing the display of layout fields (/admin/structure/types/manage/page/display/default/layout) instead of the well-known interface of Manage display.

Layout Builder

You can easily control the display of the fields, change their order, and create new ones on this page.

Layout Builder

Besides the fields, you can also add/edit the blocks.

Layout Builder

Використання Layout Builder окремо для кожної ноди

As it was mentioned before, the Layout Builder can be used individually for every node when clicking on the checkbox next to Allow each content item to have its layout customized.

Layout Builder
Layout Paragraphs
Enjoying the article?

Consider subscribing to our social media.

We much appreciate it.

Layout Paragraphs

Що таке Layout Paragraphs?

Layout Paragraphs

According to the module's description, Layout Paragraphs provides a user-friendly interface, including the drag-and-drop option to create flexible layouts with paragraphs, which will help control the page content easily. Layout Paragraphs is a field widget that works like every other Drupal field.

I would say the Layout Paragraphs is a more flexible way to control paragraphs, especially if one needs to develop a page with a complex layout. You can apply multiple layouts and place the information as you wish within one content type, whether a block or a node.

Both modules, the Layout Builder and Layout Paragraphs use Layout API, which means you can actually use both modules on one website. Layout API allows describing the way the components are placed on different levels - for the whole page, from header to footer, separately for the body of the page, and for individual components as a whole.

Використання та налаштування модуля Layout Paragraphs

  1. Make sure the module Paragraphs is installed.
  2. Download and install the Layout Paragraphs.
  3. Create a new paragraph type (Admin > Structure > Paragraphs types) to use it for the layout’s items. Your new paragraph type may have various fields. However, no field is strictly required for the module to function.
  4. Choose a mode of the paragraph «Layout Paragraphs» according to your layout design and pick one or several mockups you wish to make available.
  5. Make sure the new paragraph type for a layout is selected in the «Reference Type» section of the content type reference field on the edit screen; click «Edit» in front of the corresponding field on the «Manage fields» tab.
  6. Select «Layout Paragraphs» as a field widget for the required paragraph link field in the «Manage form display”.
  7. Choose «Layout Paragraphs» as a format tool for the required paragraph reference field in the «Manage display».
  8. That’s it. It’s time to create (or edit) your content to see how the module works.

Besides, you can create and use your layouts in Layout Paragraphs, which is highly convenient for content management. You can find more information on how to develop personal mockups at

Using the example of an already created test node, let's consider using the Layout Paragraphs module.

1. Click the «+» in the «Paragraph» field and select «Layout».

Layout Paragraphs
Layout Paragraphs

2. Next, we need to choose the desired layout and save the changes. For instance, let’s select «Two columns».

Layout Paragraphs

3. And here we go. After that, you can add any content to the selected layout or just use the drag-and-drop feature.

Layout Paragraphs

The amount of added layouts on one page can be countless.

Layout Paragraphs

Both modules are used to manage the content on your Drupal website more conveniently and flexibly. I believe the Layout Builder should be used for more commonly used solutions across all content types; however, the Layout Paragraphs is better suited in flexible cases with one separate node. Such an approach allows you to use different layouts on multiple pages with the same content type. By the way, the Layout Paragraphs interface is entirely user-friendly, which is a huge advantage.

Though the Layout Paragraphs mod is still o the Beta stage, the approach and the overall idea look highly promising.