As a Drupal themer or site builder, layouts are one of the first considerations when implementing the design of a Drupal site. In this session, we'll talk about different techniques for creating layouts in Drupal 8. From how to configure landing page content using Paragraphs or Panels to implementing a grid system with your theme, you'll walk away with some new tips and tricks under your belt.
Specifically, we'll cover:
Configuring Drupal components to use in your layouts
How Drupal 8 blocks change our approach to building layouts
Creating a design framework for your layouts
Designing successful landing pages layouts
Theming your layouts: sing grid systems or CSS from scratch
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.
5. • Large, scalable infrastructure and deployments
• Multilingual content management
• Flexible search interfaces
• Content import and synchronization
• Custom Drupal development
• Integration with external IT systems
WHAT WE DO
9. WHAT’S A LANDING PAGE?
• Target a particular audience
• Display marketing content and
calls to action (CTAs)
• Distinctive layout and content
set
• Funnel users towards content
they’re looking for
• Registration, login, search forms
10. QUESTIONS TO ASK
• Are you going to be creating many similar landing pages?
• Is content curated by humans or aggregated by Drupal?
• Do calls to action need to be re-usable from one landing page
to another?
• Is the content going to be moved around frequently by
editors?
• Do you need to be able to change the layout easily?
11. USE CASES
• Re-usable landing pages with a consistent layout
• 1-time use landing pages
• Landing pages with a flexible layout
14. REQUIREMENTS
• You need to create multiple landing pages
• Landing pages need to have consistent styling/layout but variable
content
• Editors need to be able to edit the calls to action easily
• Calls to action can link to anywhere (internal/external links)
• There are different types of calls to action (links, videos, downloads,
forms)
• Calls to action have different styles
15. LANDING PAGE CONTENT TYPE
Banner Image Field
Components that can change
Title
Title Prefix Field
17. PARAGRAPHS
• Set up each call to action as a Paragraph field on a landing page
• Each paragraph has the title, image, text, and link fields
• You can edit the paragraphs when you edit the landing page
• Title
• Image
• Text
• Link
• Title
• Image
• Text
• Link
Paragraph CTA Paragraph CTA Paragraph CTA
• Title
• Image
• Text
• Link
19. PARAGRAPH TYPES
• A paragraphs field can reference multiple paragraph types
• You can allow users to choose whether to add a video, image, or
file download call to action
• Title
• Image
• Text
• Link
• Title
• Image
• Text
• Files
Video Call to Action File Download
• Title
• Text
• Video
• Thumbnail
22. ALTERNATIVE: REUSABLE COMPONENTS
• If you need the components to be reusable: Create an entity
reference field to add custom blocks with Inline Entity Form
25. REQUIREMENTS
• You need to create a single, distinct landing page
• Content from the landing page might be re-used elsewhere
• Some content needs to be aggregated from across your site
• You might need to re-order sections of the page occasionally
27. CALLS TO ACTION VIEW
• This view shows a list of featured pages
• Selection/ordering logic is pre-defined
• Each call to action displays fields from the featured page
• Downside: you have to edit the individual pages to change the
content
28. CALL TO ACTION BLOCKS
• Each Call to Action block has title, background image, text, and links fields
• Place the block on the landing page, can be re-ordered
• Re-use the blocks on other pages
29. WHY USE BLOCK TYPES?
• Reusable, fieldable, movable
• Blocks are in core
• Downsides:
• Blocks are placed and stored in a separate part of the UI
34. REQUIREMENTS
• You have a series of landing pages with different layouts
• You need to be able to easily change the layout of the page (1
column, 2 column, etc)
• You can adjust the content in the selected layout
39. NESTED PARAGRAPHS
• 1 edit link
• Easy to switch the layout
• Create a limited number of layout types
• Control which calls to action can go where
• Manage Form Display - customize the admin UI to avoid
performance issues with nested paragraphs
40. LAYOUTS IN CORE
System for
defining and using
layouts is in core
- Field Layouts
module
(experimental)
https://
www.drupal.org/
node/2578731
41. COMING SOON…. LAYOUTS PER NODE
• Next step: allow for customization the layout per node
• Watch Tim Plunkett’s ‘The Continuing Saga of Layouts in
Drupal 8’
• Come to the sprints tomorrow!
43. BLOCKS & REGIONS
• Everything is displayed via a block
• You place blocks in regions
• Include enough regions in your theme to create the overall
layout you need
46. How do you create the layouts within your content?
47. THEMING APPROACHES
• Update the Markup
• Use a framework comes with pre-defined, generic classes (e.g.
Bootstrap, Foundation)
• Create a theme ‘from scratch’ where you define generic classes
• Update the CSS
• Use a framework where you write SASS to apply pre-defined mixins
• Create a theme ‘from scratch’ where you add classes as selectors as
you add components
60. UPDATING THE CSS
@media screen and (min-width: 1180px){
.view-drupalorg-casestudies .views-row {
display: inline-block;
width: 33%;
}
}
61. UPDATING THE CSS
• You start with some initial CSS to handle your layout
• When you add new components (views, paragraphs, blocks,
regions) you update your CSS to add the new selectors
• SASS makes it easier to do this cleanly
62. BEST PRACTICES FOR SUSTAINABLE LAYOUTS
• Plan which layouts your theme will allow
• Limit the layout options available - layouts API
• Create separate layout CSS files and make your layout CSS
generic enough to be re-usable for different components
• Nothing in your theme should be content-specific
• Document your layouts and how they handle new elements
63. ALL THE MODULES
• Contrib Modules
• Paragraphs & Entity
Reference Revisions
• Block Visibility Groups
• Bootstrap Paragraphs
• Panels, Page Manager
• Inline Entity Form
• Styleguide
• Core Experimental Modules
• Settings Tray
• Place Blocks
• Field Layout & Layout
Discovery
64. UPCOMING DRUPAL TRAININGS
• Content Strategy for Drupal - Online May 3-5
• Drupal 8 Theming - Online - May 8-12
• Introduction to Drupal 8 - Online - May 24-26
• Drupal 8 Module Development - Online - May 29 - June 2
• 5-Day Drupal 8 Training - Washington D.C. - June 5-9
• Drupal Essentials - Atlanta - June 12-13
• Drupal 8 Theming & Mod Dev - Atlanta - October 10-13
evolvingweb.ca/training
65. SPRINTS ON FRIDAY
• Come to the sprints tomorrow (in this room!)
• Layouts Initiative
• Usability Initiative
• First-Time Sprinter Workshop
• Mentored Core Sprint
• #DrupalThanks in advance!