Build beautiful Drupal page layouts without writing a line of TWIG and CSS
Two toolbar tools help you keep track of complex 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.
Getting Started
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.
Creating Your First Page Layout
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:
A Component Library at Your Fingertips
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.
Blocks, Components, and Nesting
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.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.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.
Visual Tools: Highlights and Layers
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.
- 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 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.
Configuring Blocks and Publishing
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.
Inline Styling — Live
Components and blocks can be nested inside the slots of other components for composite layouts
- Background color
- Shadow effect
- Margin and spacing
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.
Why It Matters
Alongside SDC components, Display Builder lets you work with classic Drupal blocks and other renderable data coming from Drupal. 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.
