Overview of regions from a theming perspective.
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
Drupal 7
External resources
- Layout Builder (Drupal Wiki) (drupal.org)
- This community guide provides documentation on the core Layout Builder modules for site builders and developers.
- How to Build Custom Pages Using Page Manager and Panels in Drupal 8 (webwash.net)
- This tutorial describes how to get started using Page Manager and Panels in Drupal 8 to create landing pages.
- Using Display Suite in Drupal 8: How to Customize Content Pages (webwash.net)
- This tutorial describes how Display Suite works and how to use it to customize content pages in Drupal 8.
- Layout API (drupal.org)
- Documentation on how to use the Layout Discovery module or Layout API in Drupal core
- The Continuing Saga of Layouts in Drupal 8 (events.drupal.org: DrupalCon Baltimore)
- This presentation outlines various solutions for layouts in Drupal with a focus on the current state of the Layout API in Drupal core.
- The Right Tool for the Job: Content Layout in Drupal 8 (events.drupal.org: DrupalCon Baltimore)
- This presentation covers the differences, use cases, and advantages/disadvantages of a variety of layout options, including Blocks, Context, Display Suite, Panels, Panelizer, Paragraphs, Twig templates, and WYSIWYG / CKEditor templates.
- Creating Layouts and Landing Page for Drupal 8 (events.drupal.org: DrupalCon Dublin)
- This session is aimed at site builders and themers who are familiar with Drupal site building and are looking for new techniques for creating layouts and landing pages.
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.