Layouts

A layout can describe how various components are arranged on various levels--from an entire page from the header to the footer, to just the "middle" where the dynamic content goes, to individual components. It can apply to templates for managed content or one-off designs for landing pages.

The challenges with layouts include:

  • How can I implement a certain design in Drupal?
  • How can content editors manage the content and layout on a given page, especially for one-off pages with distinct layouts (e.g., landing pages)?
  • What tools are available? What are the use cases for each solution and the advantages and disadvantages to each tool?

In Drupal core, tools include:

  • Themes and regions
  • Twig templates
  • Blocks
  • Views
  • Display modes
  • WYSIWYG/CKEditor
  • Layout Builder

Contributed modules and themes that extend Drupal core:

  • Panels, Page Manager, Panelizer
  • Paragraphs
  • Display Suite
  • Context
  • Block Visibility Groups
  • Themes (Zen, Omega, Bootstrap) or other Grid Systems

Pure CSS-based solutions can be implemented via libraries and/or themes:

  • CSS flexbox and grid

Example tasks

  • Implement a design for a landing page
  • Implement a design for a content type template
  • Provide a way for content editors to assemble or edit complex pages that fit a design

Confidence

Layout Builder, Blocks, and creating layouts within Twig template files are all stable solutions available in Drupal core.

Drupalize.Me resources

Tutorial
Topic
Topic

Drupal 7

More Guides

We have guides on many Drupal skills and topics.

Explore guides

External resources

State of Layout Modules in Drupal

Here is a summary of the state of various layout modules in Drupal.

  • Block (core module)
    • Can place any block into any number of regions, per theme (in Drupal 8)
    • Regions defined by theme
    • No Layout API integration
    • Single layout for entire theme
  • Panels, Page Manager, Panelizer, Panels Everywhere (contributed modules)
    • Panels "ecosystem" modules being developed in tandem for Drupal 8
    • Straight ports of functionality from Drupal 7
    • Use the Layout API
    • Give site builder control over "Content" region (ignoring regions outside of "Content" except in the case of Panels Everywhere). Adds layouts, variants (akin to Block visibility control), and ability to place widgets (i.e. Views displays, blocks, Panel panes) in custom panels layout regions.
  • Context (contributed module)
    • Regions defined by theme
    • No Layout API integration
    • Depends on Block module. If Block module started using Layout API, it's reasonable to assume that Context would start using Layout API.
    • Completely overrides Block configuration visibility settings
  • Display Suite (contributed module)
    • First "layout module" to become stable
    • Uses the Layout API
    • Leverages the Field UI enabling you to place fields in layout regions
  • Field Layout (core module)
    • New Drupal 8 core module
    • Adds Layout API integration for the Field UI
    • Slimmed down version of Display Suite -- purpose is to bring the layout features of Display Suite into core
    • Roadmap includes plans to bring the features of Panelizer ("Panels for Content Types") into core
    • Available in Drupal 8.3.0 as an experimental module
  • Paragraphs (contributed module)
    • Straight port of functionality from Drupal 7
    • Stable Drupal 8 module
  • Twig templates
    • Twig templates are ultimately where you control the HTML wrapper markup, including any attributes such as CSS classes, for a layout. Many layout solutions in Drupal will include one or more Twig templates. (The exception would be purely CSS-based layout solutions such as Susy, Singularity, Neat, or using CSS flexbox or grid properties.)
  • WYSIWYG / CKEditor templates
    • Custom CKEditor templates -- you can provide custom CKEditor template for content editors to use.
    • The Layouter module can be used in Drupal 7 or 8 to allow editors to layout content within the body field of another piece of content. When you choose the layout, a content editing form pops up, allowing you to fill in content for each layout region. The Layouter module allows you to configure which text formats, roles, image styles, and content types are allowed to use the Layouter. This module also includes an example module for developers to use to add custom layouts.
  • Grid systems and extensions (Layout markup + CSS)
    • Bootstrap, Zurb Foundation, Zen, Omega (and many others)
    • Check project pages for release status.
  • CSS-based solutions
    • CSS grid, flexbox
    • Check browser-compatibility resources such as http://caniuse.com/ for browser support of CSS grid and flexbox.
    • Layout Land (youtube.com) - Learn what's now possible in graphic design on the web -- layout, CSS Grid, and more. A series for designers and web developers. Created by Jen Simmons, Mozilla Designer and Developer Advocate.