Layout Builder In Drupal 9: Everything You Need To Know
When it comes to developing pages, content authors and content editors are always on the lookout for an experience that is streamlined and straightforward to use. When people wish to create and design pages, they anticipate having access to tools like drag-and-drop and what-you-see-is-what-you-get. The Drupal Layout Builder provides precisely this kind of experience by including an intuitive page-building capability as part of Drupal’s core functionality.
The Drupal Layout Builder is an application that is one of a kind that provides content producers with access to powerful visual design capabilities. They now have the capacity to alter the way in which the material is presented as a result of this. You are able to add or remove sections to show the material using a variety of layouts and customize your pages based on the requirements with the help of Layout Builder in Drupal 9, which was introduced in the core of Drupal in its most recent version. In Drupal 9, the Layout Builder Module gives you the ability to combine these different sections in order to make a page that is genuinely unique to your needs.
The Drupal 9 Layout Builder has two distinct modes of operation that users can choose from. It is possible to design a layout for each unique content category on the website as well as a layout for a specific piece of material that can be displayed on the website.
- Introducing Layout Builder
- The procedure for installing and configuring the Drupal 9 Layout Builder module
- Make Content-Type and Taxonomy Adjustments with the Help of the Drupal Layout Builder
- Add Sections to the Layout
- Add Blocks to the Section Regions
- Override Default Layout
Introducing Layout Builder
The Drupal 9 Layout Builder module gives you the ability to modify the appearance of entities like content types, taxonomy, and users, amongst other things. It gives site builders an option to place blocks, fields, and other elements by dragging and dropping them into position.
By providing a preview of the changes made while you are in the process of developing your layouts, the layout builder module that is included in Drupal 9 makes it much simpler for you to construct your layouts. In Drupal 9, the layout builder offers previews of the changes that have been made for a more seamless experience when designing a layout. Previously, this required the user to save each and every little modification made in the layout before checking it up on the front end.
The procedure for installing and configuring the Drupal 9 Layout Builder module
To install and configure the Drupal 9 layout builder module, go to Extend and enable both the Layout Builder and Layout Discovery modules. This will complete the installation process.
Important: The Layout Builder module became available as a stable option in Drupal 8.7’s core. Therefore, check that you are utilizing the most recent version. In earlier versions of Drupal, this module was considered to be experimental.
Make Content-Type and Taxonomy Adjustments with the Help of the Drupal Layout Builder
Once the module has been successfully installed, go to Structure, then Content Types, and click the “Manage display” button for any content type. For the time being, we will utilize the “article” content type.
Scroll down to the bottom of the page, click on Layout choices, then click on Save after selecting the “Use Layout Builder” option.
When you have Layout Builder selected for the view mode, you will see a “Manage Layout” option where the field formatters were previously displayed. Any of the view modes that are available can be accessed through the Layout Builder.
When you select “Manage layout” from the drop-down menu, you will be taken to the article content type layout.
Add Sections to the Layout
Before adding more parts to the layout builder, you must first delete the default section. Simply select the X that appears next to the icon depicting a closed window (as shown in the screenshot below). Additionally, an option to delete the default section will be presented on the right side of your screen when you click the “Edit” button. Select “Remove” from the menu.
Let’s add some more parts to our layout by selecting the “Add Section” option from the drop-down menu. In addition, alternatives will be presented to you on the right-hand side of the screen, allowing you to choose a layout that best suits your needs for your sector. Let’s go ahead and choose the “Two Column Section” for the time being.
Your “Two Column Layout” will provide you with the ability to determine the width of the layout. For the time being, let us go with the “50%/50%” option. After that, select the “Add section” option.
After the block has been added, you should be able to view a link labeled “Add Block” for each part region.
Add Blocks to the Section Regions
After deciding which area of the layout to use, you will be able to insert blocks into that section. Simply clicking on the “Add Block” button will cause the option to “Choose a block” to slide out from the right side of the screen.
Choosing a Block
Simply clicking on the blocks that are located to the right will allow you to select them. You may even locate blocks by filtering them out using the “Filter by block name” text field, which allows you to do so by the names of the blocks. For the time being, we shall choose the “Authored on” content field.
You will be able to make changes to the field formatter after you have clicked on the block that you wish to add. After you have finished configuring the formatter, select “Add Block” from the menu.
The “Authored On” content field will be moved to the left side of the block after it is done being added.
It is imperative that you save your modifications after you have added the “Authored On” field. Click the “Save Layout” option that is located at the very top of the Drupal 9 layout page in order to save all of the changes that you have made to your section.
Let’s attempt customizing our layout builder by including some additional fields in our layout by adding some more fields.
After you have saved this layout, you may view a preview of the layout that you have just generated by going to a page for an article content type after you have finished saving the layout.
Override Default Layout
The structure that we have just finished developing will be utilized for the presentation of all of the content. If you want to create a unique layout for a certain article in Drupal, you will first need to enable some options that have been offered by Drupal for that purpose. To accomplish this, you will need to enable the option to “Allow each content item to have its layout customized.”
If you go to an article after activating this option, you will notice that there is a button labeled Layout tab.
You will continue to use the same interface to make changes to the layout. Nevertheless, this will only affect the format of the presentation of this one particular piece of content.
The Drupal 9 Layout Builder has made a significant contribution to the enhancement of the content editing experience for site builders and content editors. However, if you are looking for a Drupal Development Company, then you should check out Appic Softwares. We have an experienced team of Drupal developers who can help you gain the best out of your software.
You can even hire dedicated Drupal developers from us and manage your project requirements. So, what are you waiting for?
