Video series - #01 Display Builder page layouts feature walkthrough
Author
G4MBINI
Tags
drupal-planet
display building
display builder
design system
Reading time
3min
Comments
https://git…

Build beautiful Drupal page layouts without writing a line of TWIG and CSS

If you've ever wished Drupal's block-based layout system came with a more visual, component-driven experience, the new Display Builder module is exactly what you've been waiting for.

In this first video of the Display Builder series, Pierre walks through the Page Layouts feature, showing how fast you can build a fully styled, published page layout — no custom code required.

Getting Started

Pierre starts with a clean Drupal 11.3 installation and the UI Suite DaisyUI theme already activated — a theme that ships with a rich library of ready-to-use components. Setup is simple: install the Display Builder module, activate it from the Extend page, and navigate to Structure / Page Layouts to begin.

Creating Your First Page Layout

From the Page Layouts overview, click ‘Add page layout’. From there you can set  condition plugins to control on which pages your display applies (in the demo, only on user profile pages). The display comes pre-initialized with blocks from your existing layout config, giving you an immediate starting point.

A Component Library at Your Fingertips

The “Libraries” button opens a sidebar with a panel showing all available UI components by category, with or without direct access to their variants. Components can be dropped in slots (defined drop zones in the layout) and each exposes configurable props. Pierre drops a DaisyUI Grid component and adjusts a component's span and start props to create a neat grid offset in just a few clicks.

Blocks, Components, and Nesting

Alongside SDC components, Display Builder lets you work with classic Drupal blocks and other renderable data coming from Drupal. 

Components and blocks can be nested inside the slots of other components for composite layouts

A right-click context menu on any block or component gives quick access to some actions. Unwanted default blocks (like "Powered by Drupal" or the default navigation) can be removed in seconds.

Visual Tools: Highlights and Layers

Two toolbar tools help you keep track of complex layouts:

  • Highlight mode illuminates every block, component, and slot on the canvas
  • Layers tab provides a schematic, tree-style view of the entire display

From the Layers tab you can also drag and drop to reorganize — Pierre moves the Branding block into the header bar alongside the User Account Menu in a few seconds flat.

Configuring Blocks and Publishing

Blocks remain fully configurable. Pierre opens the Branding block settings to show only the logo (no site name), with an instant live preview — no page reload required. When everything looks good, hitting Publish saves and activates the display.

Inline Styling — Live

Here's where things get particularly compelling. Display Builder includes a Style tab on layout regions, letting you apply visual styling directly in the builder:

  • Background color
  • Shadow effect
  • Margin and spacing

Pierre applies all three to the header bar and sees the result immediately in live preview. After publishing, the actual user profile page reflects every change — color, shadow, spacing — with zero CSS authoring.

Why It Matters

Display Builder bridges a real gap in the Drupal ecosystem: the distance between developer-built themes and truly visual page building. By pairing Drupal's block system with a structured component library and inline style controls, it gives site builders a level of autonomy that was previously out of reach without custom theming work.

The best part? As Pierre points out at the end of the demo — you don't need to wait for a future release. This is available right now in Display Builder Beta 1.