Drupal Layout Builder Setup: Custom Sections & Layouts Guide

Editors often ask for the ability to drag-and-drop blocks without developer involvement. Drupal's built-in layout builder, available since version 8.7, provides a visual Drupal visual editing experience integrated into Drupal. This comprehensive Drupal Layout Builder setup guide will help you master the tool. We have configured it for dozens of projects and know how to get the most out of it without pain. Our certified Drupal developers guarantee a seamless setup. On one project with 500 pages, unique layouts increased response time by 40% — costing the client $10,000 in extra server costs — we had to redesign the approach. With proper caching, we cut costs by 50% and improved page load times by 20%.

How Layout Builder Solves Editor Problems

A typical situation: a marketer needs to quickly change a landing page structure — add a carousel, move a form capture. Without Layout Builder, you'd have to write a new content type or dig into Twig. With this tool, drag-and-drop is right on the page. Two modes: a common template for all content of a type and individual layouts for each node. The second mode is powerful but also a source of problems: each unique page generates extra database queries. Editor time savings on edits — up to 70%, equating to over $10,000 annually in content management costs.

Step-by-Step Setup of Layout Builder

1. Install modules via Drush:

   drush en layout_builder layout_discovery -y drush cr 

2. In the admin, go to Structure → Content Types → select the type → Manage display. Click "Enable Layout Builder".
3. Choose mode: Defaults (one layout for all nodes) or "Allow each content item to have its layout customized" (unique layout per node).
4. Configure the default layout: add sections, blocks, fields. This is where you add Drupal sections and blocks.
5. Restrict available blocks using the Layout Builder Restrictions module to enforce Drupal block restrictions (see below).

Setup for a Content Type

After enabling Layout Builder, open the "Manage layout" tab. You'll see an empty grid. Add a section (e.g., one column) and place blocks — node fields, custom blocks, views. For content types with hundreds of nodes, use only Defaults mode; individual layouts heavily load the database.

How to Create a Custom Section?

Sections are registered via a layout plugin. Example: Hero with Sidebar. You can create custom sections in Drupal with ease.

// custom_layouts/layouts/my_hero/my_hero.php namespace Drupal\custom_layouts\Plugin\Layout; use Drupal\Core\Layout\LayoutDefault; /** * @Layout( * id = "my_hero_layout", * label = @Translation("Hero + Sidebar"), * category = @Translation("Custom"), * template = "layouts/my-hero", * regions = { * "hero" = { "label" = @Translation("Hero Area") }, * "sidebar" = { "label" = @Translation("Sidebar") } * } * ) */ class HeroSidebarLayout extends LayoutDefault {} 

Twig template layouts/my-hero.html.twig:

<div class="layout-hero-sidebar"> <div class="layout-hero-sidebar__hero"> {{ content.hero }} </div> <aside class="layout-hero-sidebar__sidebar"> {{ content.sidebar }} </aside> </div> 

After creation, clear cache — the section will appear in the list when editing.

Restricting Blocks with Layout Builder Restrictions

Without this module, an editor could insert a block that breaks the layout. The Layout Builder Restrictions module allows you to specify which blocks are available in each section per content type. Install:

composer require drupal/layout_builder_restrictions drush en layout_builder_restrictions -y 

Configure: Structure → [content type] → Manage display → Layout Builder → Restrictions. There, set a whitelist of blocks for each section.

Why Layout Builder Might Be Slow?

Drupal Layout Builder performance can be optimized with the right caching. Main causes:

• Blob data of unique layouts — parsed each time.
• Lack of layout caching — repeated DB queries.
• Many blocks on a page (more than 20).

Also, for content types with more than 50 nodes, avoid individual layouts. Proper caching improved performance by 3x on one of our projects. The Drupal Performance Documentation emphasizes the importance of caching for Layout Builder.

Layout Builder vs Paragraphs (Comparison)

Layout Builder is more convenient for marketers — visual drag-and-drop. It is up to 3x more efficient than Paragraphs for creating landing pages. Paragraphs is more convenient for developers — clean data structure, predictable template output, good API support. Choice depends on the task: if maximum flexibility for editors without code is needed — Layout Builder; if the project is complex or headless — Paragraphs.

What's Included in Setup

Our Drupal Layout Builder setup service with a proven track record includes:

Timeline

Layout Builder setup for 2-3 content types with custom sections — from 3 to 5 business days. Timeline may vary depending on layout complexity and integration with other modules. Typical projects cost $2,000-$5,000, ensuring a high return on investment.

Typical Errors and How to Avoid Them

• Not enabling Restrictions — editor breaks layout with unsuitable blocks. Solution: always configure Restrictions.
• Giving individual layouts to all nodes — kills performance. Solution: give individual layouts only to content types with few nodes (up to 50).
• Ignoring caching — Layout Builder generates many queries. Solution: enable BigPipe and Dynamic Page Cache.

If you need help setting up Layout Builder or want to avoid typical mistakes, contact us. Our engineers have over 5 years of experience with Drupal and have configured Layout Builder for 40+ projects. Get a free consultation on caching and custom sections. We guarantee a successful implementation within the agreed timeline.