Creating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
5 likes2,845 views
The document provides a comprehensive guide on creating layouts and landing pages for Drupal 8, emphasizing the importance of planning, configuring, and theming landing pages. It discusses the design requirements for reusable and one-time use landing pages, and outlines call-to-action strategies, content management, and layout flexibility. Additionally, it touches on theming approaches and sustainable layouts to ensure consistent and manageable design across various landing pages.
![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)
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