All the modules in Part 2 extend Layout Builder and can be added piecemeal (unlike the Distributions described in Part 4). Since the components included in these modules use the Drupal Block API, they work in Layout Builder and in the standard Drupal block/region page mechanism. By the way, when working with Layout Builder, individual page elements are called components or blocks—they are the same thing. [NB: If you are new to this series, catch the first part here.]

However, these components can’t be used in a field designated as controlled by Paragraphs; the Paragraphs module uses Paragraph Styles, not components/blocks.

You May Like

Interview

A Conversation with Dominique de Cooman on Drupal, Mautic, Open DXP and Dropsolid

Interview

A Conversation with Dominique de Cooman on Drupal, Mautic, Open DXP and Dropsolid

Somewhat confusingly, however, it’s possible to use the Layout Builder module in two ways. The first method is to use it to lay out the entire page. The second method uses Layout Builder for the area around content like the header, footer, and sidebars. Paragraphs is then used for the content in the middle of the page. Although a hybrid approach is increasingly less useful (Layout Builder has gained much of the functionality that Paragraphs have), it’s still possible that Paragraphs provides slightly more flexibility for content editors when using refinements like the forthcoming Mercury Editor.

Layout Builder

Taking over from the basic Drupal block/region system (see this description of how the block/region system works), Layout Builder is designed to be flexible and expandable. Developers have created over 100 modules that improve and extend Layout Builder functionality. Below are the modules that specifically address improving layout; the ecosystem also includes modules of all kinds that make it easier to work with Layout Builder, so be sure to scan the list of ecosystem modules above.

Bootstrap Layout Builder

The Bootstrap Layout Builder module improves the base Layout Builder experience by adding attractive and intuitive configuration panes for Layout Builder sections and components. Because it depends on the Bootstrap 5 CSS framework, pages are responsive and can use the many Bootstrap components available.

Note that the module requires a developer to wire up the Bootstrap components. In other words, if you want to begin building pages right away with ready-to-use components, see the options outlined in Parts 3 and 4 of this series. If you know that you will create many custom components and want to use the Bootstrap base theme, Bootstrap Layout Builder is an excellent choice. (Bootstrap is still a very popular system competing with Tailwind CSS and Foundation.)

Also, check out  Layout Builder Blocks, created by the same team.

Layout Builder Browser

The Layout Builder Browser adds extra functionality to Layout Builder, including categorizing components, allowing components to be reused, and providing a modal dialog box to make working with component configuration easier. It’s a well-used module with over 5,000 installations.

Layout Builder +

The Layout Builder + module significantly enhances the core Layout Builder functionality. It includes:

• more intuitive “true-to-life” Editing
• an improved block selection UI
• auto-generated preview content to help the site builder during page layout 
• nested layouts
• section library integration to retain and reuse layouts
• and more.

The project page has links to extensive documentation, including videos showing module features and instructions for creating a local demo.

Content Templates

Layout Builder provides just a single template per content type, which can be restrictive when different roles require different layouts of the same content. The Content Templates module solves this problem by providing a powerful reusable template mechanism. It can even create a template from an existing node, making it immediately reusable.

Front-End Editing

The new Front End Editing module provides convenient and improved real-time editing of Layout Builder components via a side panel. Also investigate Layout Builder +, which improves the editing experience as well as several other areas. 

Gin Layout Builder

The Gin Administration theme elevates the elegance of professionalism of Drupal's administration area. It has many fans (over 50,000 installations). Fans of the theme will definitely want to check out Gin Layout Builder, which integrates the two modules. The project page includes a demo video.

Multilingual Options

One way to handle multilingual Layout Builder pages is to use the Layout Builder Asymmetric Translations module, which allows for different layouts and blocks for different languages. The other way is to use Layout Builder Symmetric Translations. Note that they cannot be used at the same time, so a site builder must choose which method is appropriate for handling localization on their site. 

Although the Asymmetric Translation module currently has over 5,000 installations, the Symmetric Translations module isn’t far behind with over 3,000 installations. In other words, there is no singular “right” way to handle translations; learn their respective advantages and drawbacks, and then choose which to use on a site-by-site basis.

A Complete Layout Builder Ecosystem Build

Out of the scope of this series is building “the best” Layout Builder-based site using many of the modules that are part of the Layout Builder ecosystem. Fortunately, Rod Martin from OSTraining.com did exactly that and shared his build in Advanced Layout Builder for the Ambitious Site Builder. He even provides a starter site via GitPod. This is the most comprehensive Layout Builder ecosystem build I’ve come across. Everyone should examine it to decide if it’s right for them (don’t forget the Layout Builder Operation Link mentioned at the end).

Conclusion

The Layout Builder ecosystem modules greatly improve the basic functionality of Layout Builder. Many are worth installing, and some—but far from all—of the functionality they provide will be incorporated into Layout Builder's next version. 

In many cases, these modules can be removed without breaking pages, but that’s not the case for all of them. Be sure to perform tests with the modules you are considering if easily removing modules is important to you. For instance, you may want to remove a contributed module if the improvements to Layout Builder provided by Drupal Core do the job for you when they arrive. On the other hand, well-used contributed modules will likely continue to be supported for the life of the website; it might be just fine to stay with them, especially if their continued use avoids the bother and expense of retraining content editors.

In the next part of the series, we will look at projects that don’t involve Paragraphs or Layout Builder.