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.

1. Our expertise. Your digital DNA | evolvingweb.ca | @evolvingweb
CREATING LANDING
PAGES AND LAYOUTS
For Drupal 8

2. SUZANNE DERGACHEVA
• Drupal trainer
• Co-founded Evolving Web in 2007
• Manage Drupal projects
• Experienced site builder, themer,
and developer
• Follow me @suzanne_kennedy

3. Our expertise. Your digital DNA.
.ca

4. WE MAKE DRUPAL WEBSITES
FOR ALL TYPES OF CLIENTS

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

6. DRUPAL 8 TRAINING

7. CREATING LAYOUTS & LANDING PAGES IN D8
• Planning Your Landing Pages
• Landing Page Configuration
• Overall Layout
• Theming Approaches + Sustainable Layouts

8. PLANNING YOUR LANDING
PAGES

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

12. REUSABLE LANDING PAGES

13. DESIGN

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

16. LANDING PAGE CONTENT TYPE
Banner Image Field
Components that can change
Title

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

18. DEFINING THE PARAGRAPH TYPE

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

20. PARAGRAPH TYPES

21. ADDING CALLS TO ACTION

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

23. 1-TIME USE LANDING PAGES

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

26. Custom block (banner type)
Custom blocks (CTA type)
Views

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

30. SETTINGS TRAY & PLACE BLOCK

31. BLOCK VISIBILITY GROUPS

32. LANDING PAGES WITH A
FLEXIBLE LAYOUT

33. LANDING PAGE WITH A FLEXIBLE LAYOUT

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

35. PANELS

36. WHY USE PANELS
• 1 edit link to edit content + layout
• In-place editor
• User-friendly, drag-and-drop

37. NESTED PARAGRAPHS
Choose the
layout
Add the
content to
the layout

38. NESTED PARAGRAPHS

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!

42. THEMING APPROACHES

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

44. DRUPAL 8 BLOCKS

45. OVERALL LAYOUT
Header
second
Header first
Footer first
Footer
second
Footer top
Content

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

48. UPDATE THE MARKUP

49. 2-COLUMN LANDING PAGE

50. CSS ALREADY EXISTS
@media screen and (min-width: 1180px){
.grid-2-column {
width: 50%;
display: inline-block;
}
}
Bootstrap
Custom CSS

51. UPDATING THE MARKUP
{%
set classes = [
page.sidebar_first ? '3-col-grid',
]
%}
<div{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{% if label %}
<h2>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
{% endblock %}
</div>
field--paragraph--field-calls-to-action-column-1.html.twig
field--paragraph--field-calls-to-action-column-2.html.twig
{%
set classes = [
'field',
'field--name-' ~ field_name|clean_class,
'field--type-' ~ field_type|clean_class,
'field--label-' ~ label_display,
'col-md-6',
'grid-2-column',
]
%}

52. 3-COLUMN VIEW

53. CSS ALREADY EXISTS
@media screen and (min-width: 1180px){
.grid-3-column {
width: 33%;
display: inline-block;
}
}
Bootstrap
Custom CSS

54. UPDATING THE MARKUP
Views Grid Settings

55. UPDATING THE MARKUP
• Your Twig templates
• Add overall layout classes in page.html.twig
• Add classes in block, field, other templates
• Views configuration
• In grid settings, row settings, or overall CSS class
• Panels configuration
• Blocks config
• Block Class module
• Implement THEMENAME_theme_suggestions_block_alter to override custom block templates
• Paragraphs Bootstrap module (watch talk from Wednesday)
• Your content (Customize the WYSIWYG styles options)

56. UPDATE THE CSS

57. 2-COLUMN LANDING PAGE

58. UPDATING THE CSS
@media screen and (min-width: 1180px){
.field—name-field-calls-to-action-column-1,
.field—name-field-calls-to-action-column-2 {
display: inline-block;
width: 50%;
}
}

59. 3-COLUMN VIEW

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!