Dries Buytaert once wrote:
"...it can work with structured and unstructured content, and with templated and free-form pages."
One might call it primitive, but those who master it will be delighted with it because it is the basis. Hello friends! Today our focus is on Drupal Layout Builder. This is a nifty tool that all marketers and developers need.
Layout Builder is the best Drupal responsive web design tool for today. Drupal already has it at its core! That's awesome! Using Layout Builder in Drupal 8 or 9, you can add/remove sections to customize your pages following your requirements and display content using different layouts.
What is Drupal Layout builder?
The Layout Builder module makes it easy to work with visual layouts and entities for displaying content. You can customize content placement on site pages or even create your own landing pages. Its significant advantage is its user-friendly drag-and-drop interface.
The Layout Builder documentation says:
"The Layout Builder provides the ability to drag and drop site-wide blocks and content fields into regions within a given layout. Additionally, custom "inline" blocks can be created for one-off details specific to a given layout."
It is possible to create blocks via the admin panel or through code. You can customize the design of Drupal entities, including content types, taxonomies, users, etc. During layout creation, Drupal's Layout Builder module offers a preview of the changes you made. By using this feature, you don't have to go to the front end every time you make a small change.
What is the Layout Builder for?
The Layout Builder for Drupal allows you to:
- create landing pages (such as About Us)
- customize content design, structure, layout, and more
- use the same layout template for all pages
7 top advantages of the Layout Builder
- Layout Builder provides all the features and tools to structure the content on your site the way you want it, not the way it is possible.
- It quickly creates a similar UI for all the same product types.
- Drupal 9 layout builder interface is designed with all the previous comments in mind and is, therefore, very convenient. The content editor will definitely appreciate it.
- Each entity can be customized. You can also combine fields with separate entities without creating a separate reference field.
- It is possible to add a limitless number of layouts to each page, thus allowing you to build pages with various structures.
- Creating layouts doesn't require any coding knowledge.
- The module is already included in Drupal core, so you don't have to worry about installing it.
How to Use the New Layout Builder?
Layout Builder has been available in Drupal Core since version 8.5, so you just need to install it. Let's see how the Layout Builder works. Layout Builder and Layout Discovery are part of Layout Builder, so you'll need to enable them to use this module.
Once you have installed the module, go to the Manage Display tab and check the option "Use Layout Builder." The custom display settings allow you to choose a different layout for different view modes such as RSS or Full content.
As soon as the save button is clicked, the field table will be removed, and a Manage layout button will appear.
Do you know what this Manage layout button does? A layout editing page opens with the default layout. In a section, you can manage units and blocks. Additionally, you can drag and drop blocks inside and between sections to change their order. You should always confirm all operations by clicking Save Layout.
In addition to the Manage Layout button, we also have a Create Custom Block button. You can find all custom blocks here you have created through the admin panel.
Various options are available for you to choose from. In addition to fields, you can also embed forms, views, menus, or blocks.
Addition modules for the Drupal Layout Builder
This was a brief overview of the main features of Drupal 9 Layout Builder. But do not think that this is all its capabilities. In addition to the core Layout Builder and Layout Discovery modules, the Layout Builder ecosystem contains 43 additional modules. This means that it can expand. Below is a nutshell about some of these modules.
1. Layout Builder Kit
This module provides ready-made components for your site, such as:
- and more
You'll appreciate this if you're new to Drupal. It is simple and convenient to use.
2. Layout Components
This module provides a set of components, sections, and columns to extend and customize the interface of your Drupal 8 and 9 sites. For those who can develop, the module provides an API. This means you can add your own fields.
This module allows you to load custom templates, patterns, and components into Drupal as blocks. Later, you can add them to your layouts and pages. Using a JSON file, you can configure them.
4. Bootstrap Layout Builder
This module supports a responsive grid, background images, videos, and many other valuable things that will make your life easier.
5. Layout Builder Blocks
This module is useful in adding different styling options, namely:
- background image
- background video
- typography color
- typography alignment
- and more
6. Grid Layout
This module includes a layout plugin that uses CSS grid templates to define new regions dynamically.
7. Layout Builder Advanced Permissions
This module allows you to control access to the Layout builder page better. In more detail, access to block content editing blocks editing, configuration, and layout builder page.
8. Layout Builder Asymmetric Translation
This module translates layouts and blocks into each language.
9. Layout Builder Backgrounds
This module helps you manage and edit the background of any Layout Builder section very quickly and easily.
10. Layout Builder Base
This module gives the opportunity to create complex and custom Layouts. The site builder can choose many parameters, including background, padding, margin, columns, spacing, gaps, and width for columns.
11. Layout Builder Boolean
This module sets the True/False versions of the Layout Builder section. This will be useful for building a website.
12. Layout Builder Browser
This module is useful and necessary if you want to improve your layout builder block selection. For example, you can add custom categories or remove unnecessary clicks for "inline blocks."
13. Layout Builder Customizer
This module extends the customization options of the Layout Builder Options. It works with Drupal 8, 9, and 10.
14. Layout Builder Direct Add
This module changes the regular "Add block" link to a drop button that contains a list of custom block types and even the "More link.
15. Layout Builder Quick Add
This module gives an alternative way to add blocks more quickly than the Drupal default sidebar.
We have told you about several modules, but that's not all. The Layout builder Drupal 8 and 9 includes dozens of other functional modules. A day is not enough to describe them. We will list them below and move on.
16. Layout Builder Everywhere
17. Layout Builder Extra Templates
18. Layout Builder Library
19. Section Library
20. Layout Builder Lock
21. Layout Builder Modal
22. Layout Builder Component Attributes
23. Layout Builder Operation Link
24. Layout Builder Restrictions
25. Layout Builder Save And Edit
26. Layout Builder Styles
27. Layout Builder Symmetric Translations
28. Layout Builder Tabs Section
29. Layout Builder UX
30. Layout Options
31. Layout Section Classes
32. Media Library Theme Reset
33. Mini Layouts
34. Layout Builder Asset
35. Layout BG
36. Layout Builder Widget
37. Layout Builder IPE
38. Layout Builder Claro
39. Gin Layout Builder
40. Layout Builder Block
41. Block List Override.
42. Block Form Alter
43. Paragraph Blocks
P.S. Please read the official docs if you need more information about additional modules for Drupal Layout Builder.
Drupal Layout Builder - Conclusion
A beautiful site layout attracts users and keeps them on the site for longer, spending more money on it. But to be honest, setting them up is not that easy.
Site builders and content editors can quickly create visual layouts with Drupal's Layout Builder feature. With this tool, you can create custom landing pages for your website and customize content.
Layout Builder makes setting up convenient and appealing web page layouts easily. The Golems team can help you install Drupal Layout Builder and configure additional modules. Our team is open to new challenges and your great projects if you are looking for custom Drupal development!