DrupalCamp Spain 2017 presentation about this amazing Drupal module named Paragraphs.

1. EXTREME PAGE COMPOSITION
WITH PARAGRAPHS
Siddharta Navarro Castellar
#DrupalCampEswww.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?
Fields + Templates
No Responsive
Need a programer to
edit your website
Edition too complicated for end user
You have to create too many CT
HTML+CSS inline in the
body field
Panels

11. 3.Definition of Paragraphs

12. Definition of Paragraphs

13. Definition of Paragraphs
Node
Title
Content
Content
Field
Field
Field

14. Definition of Paragraphs
Node
Title
Content
Content

15. Definition of Paragraphs
Content Paragraphs
Paragraph bundle 1
Paragraph bundle 2
...
Field
Paragraph field reference
Field

16. Definition of Paragraphs
Content Paragraphs
Field
Paragraph field reference
Field

17. Definition of Paragraphs
Paragraphs Paragraph bundle
Field
Field
...
Paragraph bundle 1
Paragraph bundle 1
...

18. Definition of Paragraphs
Paragraphs Paragraph bundle
...
Paragraph bundle 1
Paragraph bundle 1

19. Definition of Paragraphs
Node with Paragraphs Example
4 columns text + Image
Paragraph
Title
Text Paragraph

20. Definition of Paragraphs

21. 3.Paragraphs features

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

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

24. Paragraphs features
Allows user to define what
Paragraphs can be used in each
content type

25. Paragraphs features
Node 1 Paragraph in node 1
Text + Image
Paragraph reference
Text
Slideshow
Text + Image
Text
Paragraphs are nested

26. Paragraphs features
Paragraphs are entities

27. Paragraphs and Field Collections
Paragraphs is based in Field Collections,
but there are some differences:
a. Different fields per Paragraph
bundle
b. Using different Paragraphs
bundles in a single Paragraph field
c. Displays per Paragraphs bundle

28. 4.How to use Paragraphs

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

30. Use Paragraphs
Paragraph bundles are entities
1

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

32. Use Paragraphs
Add fields
3

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

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

35. Use Paragraphs
Ready to go!
6

36. 5.Reasons to use Paragraphs

37. Complex designs

38. Complex element
structures

40. Flexible layouts

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

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

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

44. Drupal.cat | 30/03/2017

45. 6.Not convinced yet?

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

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

48. Power to the editor

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

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

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