Site Building

Define Custom Layouts in a Module or Theme for Drupal 8, 9, 10, and 11

Layout Builder module comes with some common layouts that can be used out of the box. The Drupal community has created modules that provide more layout options. However, perhaps your project requires special layouts that cannot be constructed with already existing options. Or you require more precise control over the CSS classes and HTML markup, especially if your website is based on a third-party front-end framework. In these cases you can define custom layouts in a module or theme and make them discoverable by the Layout Builder.

In this tutorial we'll:

  • Define a new layout plugin
  • Create a corresponding Twig template file for HTML markup
  • Use our new layout in the Layout Builder UI

By the end of this tutorial you should know how to define a new layout in code, within a module or a theme.