This presentation from DrupalCon Dublin covered site building techniques for creating landing pages and layouts, including using custom blocks, paragraphs, and panels, and then different theming approaches for creating these layouts.

1. CREATING LAYOUTS AND
LANDING PAGES
FOR DRUPAL 8
Suzanne Dergacheva

2. ABOUT ME
• Suzanne Dergacheva
• Co-founded Evolving Web
in 2007
• Drupal trainer, site builder,
themer, developer…
• @suzanne_kennedy

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

4. PLANNING YOUR
LANDING PAGES

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

6. 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?

7. USE CASES
• Re-usable landing pages with a consistent layout
• 1-time use landing pages
• Landing pages with a flexible layout

8. RE-USABLE
LANDING PAGES

9. DESIGN

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

11. LANDING PAGE CONTENT TYPE
Banner Image Field
Calls to Action
Title
Title Prefix Field

12. LANDING PAGE CONTENT TYPE
Banner Image Field
Calls to Action
Title

13. 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
• Title
• Image
• Text
• Link
Paragraph CTA Paragraph CTA Paragraph CTA

14. DEFINING THE CALL TO ACTION

16. 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
• Video
• Title
• Image
• Text
• Link
• Title
• Image
• Text
• Files
Video Call to Action Call to Action File Call to Action

17. PARAGRAPH TYPES

18. ADDING CALLS TO ACTION

19. ALTERNATIVES
• Field Collection
• Entity reference field with Inline Entity Form

20. 1-TIME USE
LANDING PAGES

21. DESIGN

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

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

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

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

26. WHY USE BLOCK TYPES?
• Re-usable, fieldable, movable
• Blocks are in core
• Downsides:
• You have to edit block content separately
• You have to place the block separately

27. SETTINGS TRAY & PLACE BLOCK

28. BLOCK VISIBILITY GROUPS

29. LANDING PAGES
WITH A FLEXIBLE
LAYOUT

30. LANDING PAGE WITH A
FLEXIBLE LAYOUT

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

32. PANELS

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

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

35. NESTED PARAGRAPHS

36. NESTED PARAGRAPHS
• 1 edit link
• Easy to switch the layout
• Create a limited number of layout types
• Control which calls to action go where

37. THEMING
APPROACHES

38. OVERALL Layout

39. REQUIREMENTS
• You can add, re-position blocks in your overall
layout
• New blocks will fit into the existing layout
• You don’t have to update the theme each time
you add a block

40. OVERALL LAYOUT Header
second
Header first
Footer first
Footer
second
Footer top

41. EVERYTHING IS A BLOCK

42. BLOCKS & REGIONS
• EVERYTHING is a block
• You place blocks in regions
• Include enough regions in your theme to create
the overall layout you need
• You can avoid writing CSS for particular blocks to
create the layout

43. THEMING APPROACHES
• Updating the Markup
• Use a framework comes with pre-defined,
generic classes (e.g. Bootstrap, Foundation)
• Create a theme ‘from scratch’ where you define
your own generic classes
• Updating the CSS
• Use a framework where you write SASS to
apply pre-defined mixins
• Create a theme ‘from scratch’ where you add
multiple classes as selectors

44. Update the Markup

45. 2-COLUMN LANDING PAGE

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

47. 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',
]
%}

48. 3-COLUMN VIEW

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

50. UPDATING THE MARKUP
Views Grid Settings

51. 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 (using the Block Class module)
• Your content (if needed)

52. Update the CSS

53. 2-COLUMN LANDING PAGE

54. 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%;
}
}

55. 3-COLUMN VIEW

56. UPDATING THE CSS
@media screen and (min-width: 1180px){
.view-drupalorg-casestudies .views-row {
display: inline-block;
width: 33%;
}
}

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

58. SUSTAINABLE LAYOUTS
• Plan which layouts your theme will allow
• Limit the variability of styling/layout options
• Make your layout CSS generic enough to be re-
usable for different components
• Nothing in your theme should be content-
specific
• Create separate layout CSS files
• Document your layout and how it will treat new
elements

59. JOIN US FOR
CONTRIBUTION SPRINTS
First Time Sprinter Workshop - 9:00-12:00 -
Room Wicklow2A
Mentored Core Sprint - 9:00-18:00 - Wicklow
Hall 2B
General Sprints - 9:00 - 18:00 - Wicklow Hall 2A

60. Evaluate This Session
THANK YOU!
events.drupal.org/dublin2016/schedule