Site Building
Topic

Layouts for Drupal 7, 8, 9, 10, and 11

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

Categories
Site Building, Theming, Module Development
Drupal 8, 9, 10, and 11
Drupal 8, 9, 10, and 11
More information

Overview of regions from a theming perspective.

Drupal 8, 9, 10, and 11
More information

How to plan the navigation and layout of a website (mobile and desktop browsers).

Blocks

Topic
Drupal 7, 8, 9, 10, and 11
More information

A 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.

Drupal 8, 9, 10, and 11
More information

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

Guides

Not sure where to start? Our guides provide useful learning tracks for all skill levels.

Navigate guides

External resources