Level up your layout! Component Based SiteBuilding with Layout Builder & View Modes

Oct 06, 2019

Aimee Hannaford
Ryan Bateman

View Modes are the site-building glue that brings your content strategy, design, media strategy, and UX development together to actually create your web displays.

View Modes have been in Drupal for some time, but what do they really do? Why are they so powerful? With Drupal 8, View Modes are now even more relevant with the standardization of Entity and Field management across entity types.

With Layout Builder in Core, it is important that you create a harmonious View Mode and Layout Builder strategy. Think beyond the Teaser and Paragraphs for display flexibility and harness the power of View Modes!

View Modes in core:

Anatomy of a view mode.

Common applications of view modes across entity types.

View modes and media (media entities and file displays!).

What the “Default” view mode does vs. Full Content.

Architecting View Modes for your site:

Planning your View Mode + Content + UX + Component Library strategy.

Interacting with layout solutions. (Panels / Display Suite / Views)

Extending view modes in code.

Lessons Learned with View Modes:

Interactions of view modes across entity types.

Naming is important. What does “Teaser” really mean?!

But why can’t I use that view mode?!

View Modes and Layout Builder

Configuration of both display systems.

Considerations with approach.

Future development path.

This session listed as “Beginner”, but the concepts and information can be applied to more advanced architectures.

Coming as a Site-Builder? You should know how to create content types and have reordered fields on “Manage Display” at least once.

Are you a project manager or designer? Be familiar with basic Drupal terminology like a node, content type, and field.

Are you a Drupal Developer? You know enough to join this session. :)

Share with the community that there can be more than just Full Content and Teaser.

Provide tools for Site Builders to create powerful displays with little or no coding.

Explain why View Modes are a powerful tool in your Drupal tool chest.

Terminology and concepts to connect design, content, and technical execution.

View Modes applied to different entities may mean different things.

Practical knowledge to apply for their own site extension.

Layers of View Modes can and will interact with each other. Layering must be deliberate.

By Role:

Project Managers: Understand that View Mode creation and extension requires effort which you need to include in planning.

Content Strategy / Analysts: How do view modes interact with content and functionality through the site.

Designers: The language and concepts to communicate your design vision to the development team.

Site Builders: Build what they are asked by the design and project management team. :)

Drupal Developers: Understand why all these non-coders on your team have created View Modes when you are asked to help possibly extend their displays. :D


Hi! I'm Karim Boudjema, the developer and site-builder of this site.

I was wondering how could I giving back to the Drupal community all what it gave to me during the last 10 years, that's how the idea of this site came to me ... (read more)

Hi! I’m Santiago Rico, the web designer and themer of this site.

When Karim proposed me to design and theme this site for the Drupal community, I accepted immediately because the community is the main reason why I love Drupal so much.