How to Leverage Drupal's Layout Builder to Create Complex Pages

Sometimes, creating a modern design with high functionality is problematic. Especially when it comes to large-scale and complex projects. There are various solutions to make the process of creating layouts easier and more convenient. One of the most influential and popular is Drupal Layout Builder.

What is the Layout Builder in Drupal?

Convenience, usability, design solutions, and the ability to provide users with information, goods, and services in an accessible form directly affect traffic growth and the site's popularity. This is important for any Internet resources, including extensive online stores, news sites, landing pages, etc.
Drupal Layout Builder helps you design web pages without programming knowledge (almost). The predecessor of the Layout Builder is the Display Suite Node that runs in Drupal. However, the Layout Builder is more advanced and gives more options. The main difference is the ability to define each "node" layout separately. This way, you can create more varied and attractive page designs. This is especially important when creating a site with many pages. So, you can create pages according to a given template and then change the design of each page if you wish.
Drupal Layout Builder is a tool that allows you to create three types of content - ads, articles, and pages (structure/content types/). You can select blocks of information and multimedia for each content type and set their location. The first time after the launch of the experimental module, it was unstable, but now the errors have been fixed, and it can be used without problems.

Getting started with Drupal Layout Builder

To get started with this module, you must install it. The Layout Discovery module will also be installed with the Layout Builder module.

• First, we add fields in the "Manage fields" tab. These fields will appear on a future page. Each field corresponds to a type of content, such as image, video, text fields with information, etc. You can select options for each field by clicking the edit button on the right.
• Next, we need to choose the type of content that will be placed on the site (Structure\Content types). Also, other options are available for each of the content types. You can manage: form display, manage display, manage fields, or delete.
• Next, you need to set up the blocks. The display of content on the page will depend on what settings you choose. This allows you to optimize the creation of site page design, speed up the process and make it more efficient. The block design is customizable here.
• Also, when using Drupal 8 and above, you can set the administration language. To do this, set the desired languages in the admin/config/regional/language page.

For example, let's create a home page. To do this, select the Basic page option, then select "Layout." Each layout consists of one or more columns (blocks), and you can set the width of the blocks on the page. Next, add information and pictures to the appropriate blocks. Do not forget about the feedback field, it is usually moved down. As you can see, nothing complicated. Do not forget to save the layout that you created.

Creating a basic page with the Layout Builder

You can create personalized layouts without much effort. If you want to create a portfolio page, you can do it like this:

• Select the “Basic” page option. Next, click “Add section” and choose the appropriate layout. Next step: add blocks by clicking on the Add block field. Don't forget to select blocks for your projects and customer feedback. Information can be transferred to blocks using the drag-and-drop method.
• It is recommended to turn on the “Allow each content item to have its layout customized” option (tab Manage display). This will bring up the Layout tab and allow you to change the layout of a particular page. It will help if your portfolio includes several pages.

How to add dynamic content with the Layout Builder?

The Layout Builder makes adding blocks for dynamic content easy and convenient. To integrate dynamic content into a page, you just need to select the appropriate block from the menu but don’t forget about “Manage fields.”
Also, this can be done as part of creating custom blocks. Click on the Add block field and select "Create a custom block" at the top of the menu. Next, you need to form a block using the available options. Each such block is associated with the current layout.
Let's try to create a blog feed in a multi-column layout. To do this, click “Add section” and select Layout. Choose a layout with two columns. Now you can add text to one of the columns and add an image or video to the other. The first blog post is ready. To make the next blog post, click the Add section box under your first post and select a new layout. It does not have to be the same as the previous one - be creative with the process.

How to create complex pages with the Layout Builder?

Complex pages are not complicated at all. Such a page will include text, an image, and perhaps even a video by default. Or there can be many ads on a page, but the Layout Builder allows you to optimize the process of creating pages through layouts. At the same time, do not forget that you can edit each page separately, as we have already discussed.
To create a page with a product, you need to follow the steps we have already described earlier. Click “Add section” and select Layout (we discussed how to assign fields for different content types earlier). You can use an image, slideshow, or video to present a product. Having selected the content type in the “Manage fields” tab and selecting the necessary options, we transfer it to the appropriate blocks. If necessary, you can create a custom block. 
To create one view inside another, the easiest way is to install the “Field view” module immediately. This module is recommended to be installed along with the Layout Builder to explore your possibilities fully. Once the module is installed, you can place one view inside another. To do this, in the “Fields” section, you need to click the “Add” button and select “View.” This will turn your field into a View. Next, the “Settings” window will appear; you do not need to choose anything, click “Apply.” Next, in the “Fields” section, click “Global View” and select a view from the list. Now a second one will appear inside the first view.
In the “Fields” section, you can also change or delete the Title. Below the page, there is a preview window, which is very convenient. The next step is to select the number of items to display. Remember that too many complex blocks will slow the page load time.

Why else use the Layout Builder?

Adaptive design

In today's world, the adaptability of website design is crucial. The ability to conveniently view pages in the mobile version always wins the audience's approval. 
The Layout Builder is responsive by default. For example, when you choose a layout, you can set the width of each of the boxes as a percentage. This is convenient, but when your layout includes three horizontal boxes, it can look ugly on a mobile device. 
The most common way to adapt website design to mobile devices is with the Bootstrap Layout Builder module. The module can be used with the Layout Builder, which means you can adapt layouts to different types of devices. After installing and enabling the module, the "Breakpoints" tab will display desktop, tablet & mobile options. 

Importance of SEO

The modern user appreciates the convenient and stylish design of web pages. Such a design should provide all the necessary information, including video images and other blocks allowing the user to know the product or service better. Using modules like the Layout Builder enables you to create a modern, user-friendly design that automatically attracts new users to your site. As a result, the user is satisfied and spends more time on the site's rating grows.

Load time and caching

Load time is an important issue, as a long page load can cause a user to leave your site before it loads. The most common mistake when creating pages is overloading them with complex views and much media content.
Creating a view inside a view or using a custom block is very handy, but it increases the page load time. Therefore, the most straightforward and practical advice is to use complex blocks only if necessary.

Leverage Drupal Layout Builder to create an attractive site!

The Drupal Layout Builder module makes creating attractive web pages much faster and easier. Even creating complex pages takes much less time due to convenient features and layouts. 
For example, you can set a template for an online store according to which all subsequent pages will be created. This way, you don't have to create each page separately. At the same time, you can create an individual design if it is necessary. 
Make experiments and apply knowledge in practice to gain practical skills. Or ask our Drupal developers to create complex pages for your project.