Drupal Layout Builder — Drag-and-Drop Page Layout Without Code

In this tutorial, you'll learn Drupal's Layout Builder including enabling it for content types, using the drag-and-drop layout interface, adding sections and blocks, creating custom layouts, managing overrides for individual content items, and best practices for page composition without writing code.

What You'll Learn

• What Layout Builder is and how it differs from traditional block layout
• Enabling Layout Builder for content types
• Using the Layout Builder interface to add sections and blocks
• Configuring section layouts (one-column, two-column, three-column, custom)
• Saving and reusing section libraries
• Understanding overrides vs defaults in Layout Builder
• Using Layout Builder for content types, users, and taxonomy terms
• Best practices for Layout Builder implementations

Why It Matters

Layout Builder brings design flexibility to content editors without requiring developer intervention. Traditional Drupal sites required custom Twig templates or Paragraphs modules for varied page layouts. Layout Builder, available in Drupal core since 8.7, gives editors the ability to create unique page layouts visually, reducing the bottleneck between content creation and design implementation.

Real-World Use

A marketing team runs a company website where the homepage needs frequent layout changes: a hero banner this month, a three-column feature section next month, and a full-width testimonial after that. Before Layout Builder, every change required a developer to modify Twig templates or create new Paragraphs configurations. With Layout Builder, the marketing manager enters the layout interface, adds a new section with the desired column structure, places the appropriate blocks, and publishes the new design in minutes.

Learning Path

flowchart LR
  A[Menus] --> B[Layout Builder]
  B --> C[Next: Custom Modules]
  C --> D[Next: Theming]

What is Layout Builder

Layout Builder is a visual layout tool integrated into Drupal core that allows site builders and content editors to design page layouts through a drag-and-drop interface. It operates at two levels:

• Default layouts: Define the layout for an entire content type (all Articles get the same layout)
• Override layouts: Customize the layout for a specific content item (one Article looks different)

Layout Builder replaces many use cases of the Paragraphs module, custom block layouts, and template overrides.

Enabling Layout Builder

Enable the Module

1. Navigate to Extend
2. Enable "Layout Builder" module (requires Layout Discovery)
3. Enable "Layout Library" for reusable section storage

drush en layout_builder layout_library -y

Enable for Content Types

1. Navigate to Structure > Content types > Manage display for a content type
2. Scroll to "Layout options"
3. Check "Use Layout Builder"

# Configuration for enabling Layout Builder
Content type: Article
Manage display:
  Layout options:
    Use Layout Builder: true
    Allow each content item to have its layout customized: optional

Configuration in Yaml

# config/sync/core.entity_view_display.node.article.default.yml
content: {  }
hidden: {  }
third_party_settings:
  layout_builder:
    enabled: true
    allow_custom: true
    sections:
      - layout_id: layout_onecol
        ...

Layout Builder Interface

Accessing the Interface

Edit a content item and click the "Layout" tab. Or navigate to Structure > Content types > Manage display > Manage layout.

Interface Components

+---------------------------------------------------+
| [Layout Builder Toolbar]                          |
| [Switch Layout] [Add Section] [Add Block] [Save] |
+---------------------------------------------------+
| Section: Full Width                               |
| +-----------------------------------------------+ |
| | Block: Page Title (system)                    | |
| +-----------------------------------------------+ |
+---------------------------------------------------+
| Section: Two Column                              |
| +------------------------+------------------------+ |
| | Left Region           | Right Region           | |
| | Block: Body (content) | Block: Sidebar (block) | |
| +------------------------+------------------------+ |
+---------------------------------------------------+
| Section: Three Column                             |
| +------+------+------+                              |
> | Col 1 | Col 2 | Col 3 |                           |
| +------+------+------+                              |
+---------------------------------------------------+

Sections

Sections are the building blocks of a Layout Builder page. Each section contains one or more regions where blocks are placed.

Default Section Types

Adding a Section

1. Click "Add section"
2. Choose a layout
3. Configure section settings:

# Section configuration
Layout: Two column
Column widths: 75/25 (First: 75%, Second: 25%)
Section label: Main Content with Sidebar

Custom Section Widths

# Column width options
- 50/50: Equal columns
- 67/33: Two-thirds / One-third
- 33/67: One-third / Two-thirds
- 75/25: Three-quarters / One-quarter
- 25/75: One-quarter / Three-quarters

Section Settings per Layout

Some layouts have additional settings:

# Section background settings
Background color: '#f5f5f5'
Background image: public://images/section-bg.jpg
Background position: center center
Padding: 2rem 0

Blocks in Layout Builder

Adding Blocks

1. Click "Add block" in any section region
2. Choose from available blocks:

Available blocks:
  - Content fields (Title, Body, Image, etc.)
  - System blocks (Breadcrumbs, Search form, etc.)
  - Custom blocks (Basic block, Call to action, etc.)
  - Inline blocks (content created within Layout Builder)
  - Views blocks (any View with a block display)

Content Field Blocks

Layout Builder can display individual fields of the current entity:

Block: Body (content field)
Label: Article Body
Label display: hidden
Formatter: Default

Block: Image (content field)
Label: Featured Image
Formatter: Image style > Large
Image style: large

Inline Blocks

Inline blocks are custom blocks created directly within Layout Builder. They are stored as reusable block content entities.

Inline block: Call to Action
Type: Basic block
Body: 'Contact us today for a free consultation'
Format: Full HTML
Visibility: Configure block visibility conditions

Reusing Blocks

Blocks in Layout Builder can be marked as reusable:

Block configuration:
  Make this block reusable: true
  Block name: Newsletter Signup
  Category: Layout blocks

Reusable blocks appear in the "Add block" dialog for other pages and layouts.

Overrides vs Defaults

Default Layout

The default layout applies to all content of a content type (unless overridden).

Layout: Article (default)
- Section: One column
  - Title (field)
  - Image (field)
  - Body (field)
- Section: Two column (50/50)
  - Left: Related articles (View block)
  - Right: Categories (taxonomy field)

Override Layout

Overrides customize the layout for a single content item.

Layout: Article 42 (override)
- Inherits from default layout
- Modified: Added hero section with custom inline block
- Modified: Replaced sidebar View block with different View

Enabling Overrides

drush config:set core.entity_view_display.node.article.default \
  third_party_settings.layout_builder.allow_custom true

When overrides are enabled, the "Layout" tab appears on individual content items. Editors can:

• Start from the default layout and modify it
• Discard overrides to revert to the default
• Save overrides without affecting other content

Layout Builder for Users and Taxonomy

Layout Builder works with any entity type that has view displays.

For Users

# Enable Layout Builder for user profiles
Entity: User
Display: Default
Enable Layout Builder: true
Allow custom layouts: optional

User profile layouts can include:

• User picture (field)
• Member since (field)
• Recent content (View block)
• Biography (custom block)

For Taxonomy Terms

# Enable Layout Builder for taxonomy terms
Entity: Taxonomy term
Vocabulary: Product categories
Enable Layout Builder: true

Term page layouts can include:

• Term image (field)
• Term description (field)
• Products in this category (View block with contextual filter)
• Subcategories (View block)

Section Libraries

The Layout Library stores reusable sections.

Saving a Section to the Library

1. Click "Add section" > choose layout
2. Configure the section with blocks
3. Click "Add section"
4. In the section's contextual menu, choose "Save to library"
5. Name the section

Section library item:
  Name: Hero Banner with CTA
  Description: Full-width hero with background image, headline, and button
  Category: Landing pages

Reusing Library Sections

When adding a new section, choose "From library" to select a saved section.

Disabling Layout Builder

To disable Layout Builder for a content type:

1. Navigate to Structure > Content types > Manage display
2. Scroll to Layout options
3. Uncheck "Use Layout Builder"

drush config:set core.entity_view_display.node.article.default \
  third_party_settings.layout_builder.enabled false

Warning: Disabling Layout Builder will lose any Layout Builder configuration for that entity type. Override layouts will also be removed.

Layout Builder Best Practices

Design Principles

• Create a sensible default: The default layout should work for 80% of content. Only override when needed.
• Use reusable blocks: Frequently used components (CTAs, banners, newsletter signups) should be reusable blocks, not inline blocks.
• Limit overrides: Too many override layouts create maintenance burden. Train editors to use the default layout when possible.
• Document layouts: Maintain documentation of available sections and their intended use.

Performance Considerations

# Layout Builder caching
Layout Builder uses entity view display caching.
Configure at Configuration > Performance:

Cache page: true
Cache blocks: true

Layout Builder renders all blocks on the page. Too many blocks in a single layout can slow page load. Use Views Caching and block caching as appropriate.

Responsive Design

Test Layout Builder layouts on mobile devices. Two-column layouts on desktop may need to stack on mobile. Some contributed modules provide responsive section layouts.

Common Mistakes

1. Enabling overrides for all content types: Override capacity creates editorial freedom but also maintenance overhead. Only enable overrides for content types that need per-item customization.
2. Creating too many inline blocks: Inline blocks are stored with the content revision, making them hard to reuse. Create reusable blocks for components used on multiple pages.
3. Ignoring the default layout: Many editors start from an empty canvas for every page. A well-designed default layout provides a template and maintains visual consistency.
4. Not training editors: Layout Builder is powerful but can be confusing. Show editors how to use sections, how to add blocks, and when to use overrides vs defaults.
5. Overcomplicating layouts: A page with 15 different sections and 30 blocks confuses users and slows performance. Keep page layouts focused on user goals.

Practice Questions

1. What is the difference between a default layout and an override layout in Layout Builder?
2. How would you create a reusable "Testimonial" section with a background image and text block that can be used across multiple pages?
3. What entity types besides nodes can use Layout Builder, and what are example use cases for each?
4. Challenge: Build a complete landing page template using Layout Builder. Create a "Landing Page" content type with Layout Builder enabled and overrides allowed. Design a default layout with sections for: Hero (full-width image, headline, CTA button), Features (three-column grid with icons and text), Testimonials (single column with carousel of quotes), About (two-column: text left, image right), and CTA (full-width with background and button). Save the Features section to the section library as reusable. Create a sample landing page that overrides the Hero section with a different background image. Export the configuration with Drush.

FAQ

Mini Project

Goal: Build a complete landing page system using Layout Builder.

1. Create a "Landing Page" content type with fields: Title, Subtitle, and a checkbox for "Show breadcrumbs"
2. Enable Layout Builder for Landing Pages with overrides allowed
3. Create a default layout with:
   • Section: Full-width Hero (background image, title, subtitle, CTA button as inline block)
   • Section: Two-column (75/25) with Content field in left column and custom block in right column
   • Section: Three-column Feature Cards (reusable section from library)
   • Section: Full-width CTA banner (background color, headline, button)
4. Save the Feature Cards as a reusable section
5. Create two landing pages:
   • "Default" landing page using the default layout without overrides
   • "Custom" landing page with overrides: different hero background, additional testimonial section added between Features and CTA
6. Revert the custom landing page to the default layout
7. Export all configuration with drush config:export
8. Create a Views page that lists all landing pages with a link to each

What's Next

You have completed the Drupal site building tutorial series. Your next learning paths include Drupal module development with PHP, Drupal theming with Twig, and database optimization with MySQL. Continue your Drupal journey by building custom modules, contributing to the Drupal community on Drupal.org, and exploring decoupled Drupal architecture with headless CMS approaches.