Presentation about the Paragraphs module in Drupal 8.

1. EXTREME PAGE COMPOSITION
WITH PARAGRAPHS
Siddharta Navarro Castellar
#DrupalSummerwww.ateneatech.com

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. 1.About me

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

7. 2.Before start

8. How can we do this?

9. How can we do this?
No Responsive
Need a programer to
edit your website
HTML+CSS inline in the
body field

10. How can we do this?
Edition too complicated for end userPanels

11. How can we do this?
Fields + Templates You have to create too many CT
Difficult to change
Difficult to non coders

12. Paragraphs is the new way
of content creation!

13. 3.Definition of Paragraphs

14. Definition of Paragraphs
Node
Title
Content
Content

15. Content Paragraphs
Text
Image
...
Title
Paragraphs
Paragraphs replace the body field

16. Content Paragraphs
Title
Paragraphs
Paragraphs replace the body field

17. Type of Paragraphs
Content
Paragraphs
● Text
● Quote
● Image
● Video
Layout
Paragraphs
● Tabs
● Accordion
● 4 columns

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

19. 3.Paragraphs features

20. Paragraphs features
Node 1 Node 2
Text + Image
Slideshow
Text
Documents
Text + Image
Slideshow
Allows editor to creare diferent structures in each page

21. Paragraphs features
Allows editor to change the order of the paragraphs
Node 1 Node 1 edited
Text + Image
Slideshow
Text
Slideshow
Text + Image
Text

22. Paragraphs features
Node 1 Paragraph in node 1
Text + Image
Paragraph reference
Text
Slideshow
Text + Image
Text
Paragraphs are nested (can contain other paragraphs)

23. Paragraphs features
Desktop Mobile 1
Text
Quote
Text
Paragraphs are responsive
Image
Text
Quote
Text
Image
Mobile 2
Text
Quote
Text
Image

24. 4.How to use Paragraphs

25. Use Paragraphs
Install Paragraphs
0
● Paragraphs
● Entity reference revisions

26. Use Paragraphs
Paragraph bundles are entities
1

27. Create a new Paragraph bundle
Use Paragraphs
Drupal.cat | 30/03/2017
2

28. Use Paragraphs
Add fields
3

29. Use Paragraphs
Add a field reference to a Paragraph
in a content type
4

30. Use Paragraphs
Select the Paragraph bundle that can be selected in
this content type
5

31. Use Paragraphs
Ready to go!
6

32. 5.Reasons to use Paragraphs

33. Complex designs

34. Complex element
structures

36. Flexible layouts

37. Flexible layouts
Drupal.cat | 30/03/2017
Container
2 columns
Container
2 columns

38. Flexible layouts
Container
3 columns
Container
100% grey
background
Container
4 columns

39. Responsive
Drupal.cat | 30/03/2017

40. Drupal.cat | 30/03/2017

41. 6.Not convinced yet?

42. Easy edition
Drupal.cat | 30/03/2017

43. Marketing landingpages
Drupal.cat | 30/03/2017

44. Power to the editor
1. More flexibility with less
complexity
2. Think beyond the current
request
3. Try to make solutions
reusable

45. “Let’s make Drupal
great again”
Anonymous

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

47. 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!