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
Layout Builder
Guide
Overview of regions from a theming perspective.
How to plan the navigation and layout of a website (mobile and desktop browsers).
Blocks
TopicA block is a reusable widget that is placed inside regions (layout containers) of your theme. Blocks can be used by site administrators on the Block layout admin page or provided by a module using the Plugin API.
Twig is a template engine for PHP, which is the language used in Drupal. Twig can be used to design templates in generic PHP applications as well as Drupal themes.
Drupal 7
Display Suite for Drupal 7
Course
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.