Creating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
5 likes2,843 views
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.
![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',
]
%}](https://image.slidesharecdn.com/d8-layouts-sept2016-161003161139/85/Creating-Layouts-and-Landing-Pages-for-Drupal-8-DrupalCon-Dublin-47-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
![[Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://cdn.slidesharecdn.com/ss_thumbnails/drupal8-theming-webinar-150806150902-lva1-app6892-thumbnail.jpg?width=560&fit=bounds)
Ad
Similar to Creating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin (20)
Ad
More from Suzanne Dergacheva (17)
Recently uploaded (20)
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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