微信内可能无法直接打开本站。请点右上角 ··· → 在浏览器打开，或复制链接。
DXPR: Drupal 11 Layout Builder tutorial: sections, blocks and overrides
RSS 官方收录 · 可信分层展示
关键摘要
Drupal 11 Layout Builder tutorial: sections, blocks and overrides Jurriaan Fri, 10/23/2026 - 07:12 Layout Builder is Drupal's own page layout tool.…
- It ships with Drupal 11 core, it works on any content type, and it let…
- This tutorial walks through the whole thing on Drupal 11.
- 4: enabling the module, giving a content type a layout, adding section…
规则摘要 · 来源可核验
正文提要
Layout Builder is Drupal's own page layout tool. It ships with Drupal 11 core, it works on any content type, and it lets a site builder define a default layout once and let editors adjust the layout of a single page when they need to. This tutorial walks through the whole thing on Drupal 11.4: enabling the module, giving a content type a layout, adding sections and blocks, saving the default, overriding it on one page, and the two contributed modules that make it workable for editorial teams.
Every screenshot was taken on a Drupal 11.4 site in October 2026, with Claro as the administration theme and DXPR Theme on the front end. Layout Builder opens in the front-end theme, so on your site its buttons and tray may look slightly different.
Layout Builder gives you the frame. AI fills the page.
Layout Builder arranges blocks in regions. It does not write the headline, the three feature cards or the call to action, and it will not draft the Dutch version. That part of the work is where most of the time goes, and it is what DXPR Builder adds inside your Layout Builder layouts.
DXPR Builder runs as a formatter on a text field, so a DXPR Builder field sits inside a Layout Builder section like any other block. Layout Builder keeps the overall page structure; inside the field, an editor describes the page in a brief and gets an editable draft with sections, text, images and buttons, then refines it in the visual editor or by asking for changes in context. Translations start as AI drafts for a local editor to review. Nothing publishes on its own; the page goes through the permissions and moderation your site already has.
The free Personal plan includes DXPR Builder and 10,000 AI credits a month for one production website. Compare DXPR Builder with Layout Builder in detail, or see how it fits an existing Drupal platform.
Try it inside a layout
The live demo is a Drupal site with Layout Builder, DXPR Builder and AI switched on. Build a page from a brief inside a Layout Builder section and keep the result. How AI page building works.
1. Enable Layout Builder
Go to Extend (/admin/modules), filter on "layout" and tick Layout Builder. Drupal enables Layout Discovery with it: the module through which core, contributed modules and themes register layouts. From the command line, drush en layout_builder does the same.
Leave Layout Builder Expose All Field Blocks switched off. It is deprecated, and it offers every field of every entity type as a block, which slows down sites with many content types.
2. Turn it on for a content type
Open Structure, Content types, your content type, Manage display, and pick the view mode; Default covers full pages. Under Layout options, tick Use Layout Builder. Tick Allow each content item to have its layout customized as well if editors may change the layout of a single page; leave it off for content types that must stay uniform. Overrides are only offered on the Default or Full content display.
After saving, the field table disappears: from now on the display is a layout, and the Manage layout button opens it.
3. Open the default layout
Manage layout opens the layout every page of this content type shares. Drupal starts it with one section that holds the fields that were visible on the display, each as a block: here Featured image, Moderation control, Content and Tags. With Show content preview off, blocks show their labels instead of sample content, which makes arranging them easier.
The editor opens in your front-end theme, so its buttons take the theme's look (DXPR Theme in these screenshots). Nothing is stored until you press Save layout; Discard changes throws the draft away.
4. Add a section and choose its layout
Click Add section above or below an existing section. The tray on the right lists every layout registered on the site: core's one, two, three and four column layouts, plus the layouts your theme and modules add. The DXPR layouts in this screenshot, in fluid and container variants, come from the DXPR CMS Layouts module.
Pick a layout and Configure section asks for its settings. For core's two column layout these are the column widths (50/50, 33/67, 67/33, 25/75 or 75/25) and an optional administrative label that only site builders see. Press Add section. When the blocks of the old one-column section have a new home, remove that section with the cross next to its Configure Section link.
5. Add blocks to the regions
Every region of a section has an Add block link. The Choose a block tray lists the fields of the content type under Content fields, then the blocks of every module: menus, views, forms and custom blocks. Create content block at the top makes a one-off inline block that belongs to this layout. Type in Filter by block name instead of scrolling.
Each block has a short configuration form. A field block asks for the label position and the formatter; most other blocks ask for a title you can show or hide. In this example the Content field goes in the wide column with its label hidden, and the Main navigation menu goes in the narrow column with the title "Explore the faculty".
When the section holds the Content field next to the menu, press Save layout, and every page of the content type uses this layout.
6. Override the layout of one page
When the content type allows overrides, every page gets a Layout tab next to View and Edit. It opens the same editor for that page only, with a Revert to defaults button above the layout. Here the annual report gets an extra Search block under the menu; every other page of the content type keeps the default layout.
From that moment the page has its own copy of the layout. Later changes to the default no longer reach it, until someone presses Revert to defaults.
7. Two contributed modules every editorial team ends up installing
Core Layout Builder offers every layout and every block to every editor, which is more freedom than most teams want. Two contributed modules close the gap:
- Layout Builder Restrictions limits which layouts and which blocks are available per content type and per region, so an editor picks from the handful of options that fit the design.
- Layout Builder Styles lets a site builder define named styles (a background, a spacing variant, a width) that editors apply to a section or a block from a dropdown instead of writing CSS classes.
Install either with Composer, enable it, and its settings appear under the content type's Manage display and in the Layout Builder tray.
8. Things to know before you roll it out
- Overrides are stored on the node. Once a node has its own layout, changes to the default layout no longer reach it until someone presses Revert to defaults. Decide early which content types allow per-node overrides.
- Inline blocks live in the layout. A custom block created inside Layout Builder belongs to that node's layout and is not reusable elsewhere; use a block from the Block library when several pages need it.
- Permissions. Overrides have a permission per content type, for example Content - Article: Configure layout overrides for content items that the user can edit, or the wider Configure all layout overrides. Configure any layout also covers the default layouts, so keep it for site builders.
- Revisions and moderation. Layout changes are part of the node revision, so content moderation applies to them like to any other field; editors can save a draft layout and publish it later.
- Themes. Layout Builder offers the layouts registered by core, your theme and your modules. Core's layouts bring their own CSS and work in any theme; modules such as DXPR CMS Layouts add Bootstrap 5 layouts in fluid and container widths.
Questions about Layout Builder.
Planning a site that needs more than core? Talk to Sales.
Next step
Set up Layout Builder on one content type, restrict it to the layouts your design needs, and put a DXPR Builder field inside it for the content. Your editors get a fixed frame and a visual, AI-assisted editor inside it.
