How to Use the Layout Builder in Drupal 9
Drupal has a built-in layout builder that lets webmasters make visual layouts for their contents on their website.
It allows webmasters to make a global layout for their content or change the layout of each of the nodes separately according to their needs in a very easy-to-use way using drag and drop feature.
As mentioned earlier, the layout builder is available in Drupal core by default and you do not need to install any additional modules to use it; but you should install and enable it from the administrator’s panel before using.
How to Enable Layout Builder in Drupal 9
To enable layout builder in Drupal 9 follow these steps:
- Go to the admin panel of your Drupal website and from the top items, click on Extend.
- You see the list of available modules in the List section.
- Navigate through the Core section and find the Layout Builder or search for it in the search box.
- Mark the checkbox next to it and go to the bottom of the page and click on Install button.
- You will get a confirmation message which tells you that you must enable the Layout discover module too. Click on the Continue button to confirm it.
Design Layout Builder for Articles in Drupal 9
To configure the layout builder for your articles, you need to follow these steps:
Go to the Structure and from the options, click on Content types.
In front of the Article, from the dropdown menu, select Manage display.
This step is important! . Go to the bottom of the page and mark Use Layout Builder and click on Save.
Now go to the Structure -> Content types again and in front of the Article, from the dropdown menu, select Manage display again. Now click on the Manage layout button.
You are in the layout editing page now for the Articles. Click on the Add section; you will see different available options on the right of the window.
One column, two column, three column and four column are possible options. For example we choose Two column here but you can choose any option you would like to.
Choose the ratio of columns ( by default it’s 50%, 50%) and then click on Add section.
Now click on Add block and you will see many possible fields at the right of the screen. For example, for a standard Drupal installation with the least modules, it will have these options (but it could be different):
- Content fields: Authored by, Authored on, Body, Changed, Comments, Content type, Default revision, Default translation, ID, Image, Language, Links, Menu link, Promoted to front page, Published, Revision create time, Revision ID, Revision log message, Revision translation affected, Revision user, Sticky at top of lists, Tags, Title and Upload Files
- Core: Primary admin actions and Tabs
- Forms: Search form, User login
- Help: Help
- Lists (Views): Recent comments, Recent content, Who’s online
- Menus: Administration, Footer, Main navigation, Shortcuts, Tools and User account menu
- System: Breadcrumbs, Messages, Powered by Drupal, Site branding and Syndicate
- User: Who’s new
- User fields: Changed, Created, Default translation, Email, Initial email, Language code, Last access, Last login, Member for, Name, Picture, Preferred admin language code, Preferred language code, Roles, Timezone, User ID and User status
Now click on the Save layout to keep the changes you have made to have the added blocks to your articles and so on.
How to Change the Layout of any Single Article in Drupal 9 (Node)
To change the layout of any article, you should follow these steps which are similar to what you have done previously for many parts:
- Click on Structure -> Content types
- In front of the Article, click on drop down and select Manage display
- Go to the bottom of the page and mark Allow each content item to have its layout customized and click on Save.
Now go to Manage and click on Content. You will see a list of your articles. Choose any article that you would like to have a special layout for. Click on the title of the article.
Now you will have many options to do with this article. For example you can view, edit etc. Click on Layout to edit the layout of this particular article.
Now you can Add a section to the article and customize it according to your desire. Make sure to click on Save layout after you have done to keep the changes you have made for this very article.