Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Drupal Summer: Extreme page composition with Paragraphs

462 views

Published on

Presentation about the Paragraphs module in Drupal 8.

Published in: Technology
  • Be the first to comment

Drupal Summer: Extreme page composition with Paragraphs

  1. 1. EXTREME PAGE COMPOSITION WITH PARAGRAPHS Siddharta Navarro Castellar #DrupalSummerwww.ateneatech.com
  2. 2. 1. About me 2.Before start 3. Definition of Paragraphs 4. Paragraphs features 5. How to use Paragraphs 6. Reasons to use Paragraphs 7. Not convinced yet?
  3. 3. 1.About me
  4. 4. Siddharta Navarro SIDDHARTA NAVARRO Co-founder of Atenea tech Software Engineer CONTACT +34 93 551 06 86 siddharta@ateneatech.com FOLLOW ME @sidddi linkedin.com/in/siddhartanavarro
  5. 5. 2.Before start
  6. 6. How can we do this?
  7. 7. How can we do this? No Responsive Need a programer to edit your website HTML+CSS inline in the body field
  8. 8. How can we do this? Edition too complicated for end userPanels
  9. 9. How can we do this? Fields + Templates You have to create too many CT Difficult to change Difficult to non coders
  10. 10. Paragraphs is the new way of content creation!
  11. 11. 3.Definition of Paragraphs
  12. 12. Definition of Paragraphs Node Title Content Content
  13. 13. Content Paragraphs Text Image ... Title Paragraphs Paragraphs replace the body field
  14. 14. Content Paragraphs Title Paragraphs Paragraphs replace the body field
  15. 15. Type of Paragraphs Content Paragraphs ● Text ● Quote ● Image ● Video Layout Paragraphs ● Tabs ● Accordion ● 4 columns
  16. 16. Example Definition of Paragraphs Node with Paragraphs 4 columns Paragraph Title Text Paragraph Image + Title + Text Paragraph Image + Title + Text Paragraph Image + Title + Text Paragraph Image + Title + Text Paragraph
  17. 17. 3.Paragraphs features
  18. 18. Paragraphs features Node 1 Node 2 Text + Image Slideshow Text Documents Text + Image Slideshow Allows editor to creare diferent structures in each page
  19. 19. Paragraphs features Allows editor to change the order of the paragraphs Node 1 Node 1 edited Text + Image Slideshow Text Slideshow Text + Image Text
  20. 20. Paragraphs features Node 1 Paragraph in node 1 Text + Image Paragraph reference Text Slideshow Text + Image Text Paragraphs are nested (can contain other paragraphs)
  21. 21. Paragraphs features Desktop Mobile 1 Text Quote Text Paragraphs are responsive Image Text Quote Text Image Mobile 2 Text Quote Text Image
  22. 22. 4.How to use Paragraphs
  23. 23. Use Paragraphs Install Paragraphs 0 ● Paragraphs ● Entity reference revisions
  24. 24. Use Paragraphs Paragraph bundles are entities 1
  25. 25. Create a new Paragraph bundle Use Paragraphs Drupal.cat | 30/03/2017 2
  26. 26. Use Paragraphs Add fields 3
  27. 27. Use Paragraphs Add a field reference to a Paragraph in a content type 4
  28. 28. Use Paragraphs Select the Paragraph bundle that can be selected in this content type 5
  29. 29. Use Paragraphs Ready to go! 6
  30. 30. 5.Reasons to use Paragraphs
  31. 31. Complex designs
  32. 32. Complex element structures
  33. 33. Flexible layouts
  34. 34. Flexible layouts Drupal.cat | 30/03/2017 Container 2 columns Container 2 columns
  35. 35. Flexible layouts Container 3 columns Container 100% grey background Container 4 columns
  36. 36. Responsive Drupal.cat | 30/03/2017
  37. 37. Drupal.cat | 30/03/2017
  38. 38. 6.Not convinced yet?
  39. 39. Easy edition Drupal.cat | 30/03/2017
  40. 40. Marketing landingpages Drupal.cat | 30/03/2017
  41. 41. Power to the editor 1. More flexibility with less complexity 2. Think beyond the current request 3. Try to make solutions reusable
  42. 42. “Let’s make Drupal great again” Anonymous
  43. 43. Some Resources Drupal.cat | 30/03/2017 1.Paragraphs video-tutorial: http://talkingdrupal.com/123 2.Paragraphs Demo: http://paragraphs.site-showcase.com 3.Paragraphs Drupal Distribución (D8): https://www.drupal.org/project/leadgen 4.Set of Paragraphs (D7): https://www.drupal.org/project/paragraphs_pack
  44. 44. SIDDHARTA NAVARRO Co-founder of Atenea tech Software Engineer CONTACT +34 93 551 06 86 siddharta@ateneatech.com FOLLOW ME @sidddi linkedin.com/in/siddhartanavarro Thanks!

×