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.
EXTREME PAGE COMPOSITION
WITH PARAGRAPHS
Siddharta Navarro Castellar
#DrupalSummerwww.ateneatech.com
1. About me
2.Before start
3. Definition of Paragraphs
4. Paragraphs features
5. How to use Paragraphs
6. Reasons to use P...
1.About me
Siddharta Navarro
SIDDHARTA NAVARRO
Co-founder of Atenea tech
Software Engineer
CONTACT
+34 93 551 06 86
siddharta@ateneat...
2.Before start
How can we do this?
How can we do this?
No Responsive
Need a programer to
edit your website
HTML+CSS inline in the
body field
How can we do this?
Edition too complicated for end userPanels
How can we do this?
Fields + Templates You have to create too many CT
Difficult to change
Difficult to non coders
Paragraphs is the new way
of content creation!
3.Definition of Paragraphs
Definition of Paragraphs
Node
Title
Content
Content
Content Paragraphs
Text
Image
...
Title
Paragraphs
Paragraphs replace the body field
Content Paragraphs
Title
Paragraphs
Paragraphs replace the body field
Type of Paragraphs
Content
Paragraphs
● Text
● Quote
● Image
● Video
Layout
Paragraphs
● Tabs
● Accordion
● 4 columns
Example
Definition of Paragraphs
Node with Paragraphs
4 columns Paragraph
Title
Text Paragraph
Image + Title + Text Paragr...
3.Paragraphs features
Paragraphs features
Node 1 Node 2
Text + Image
Slideshow
Text
Documents
Text + Image
Slideshow
Allows editor to creare dif...
Paragraphs features
Allows editor to change the order of the paragraphs
Node 1 Node 1 edited
Text + Image
Slideshow
Text
S...
Paragraphs features
Node 1 Paragraph in node 1
Text + Image
Paragraph reference
Text
Slideshow
Text + Image
Text
Paragraph...
Paragraphs features
Desktop Mobile 1
Text
Quote
Text
Paragraphs are responsive
Image
Text
Quote
Text
Image
Mobile 2
Text
Q...
4.How to use Paragraphs
Use Paragraphs
Install Paragraphs
0
● Paragraphs
● Entity reference revisions
Use Paragraphs
Paragraph bundles are entities
1
Create a new Paragraph bundle
Use Paragraphs
Drupal.cat | 30/03/2017
2
Use Paragraphs
Add fields
3
Use Paragraphs
Add a field reference to a Paragraph
in a content type
4
Use Paragraphs
Select the Paragraph bundle that can be selected in
this content type
5
Use Paragraphs
Ready to go!
6
5.Reasons to use Paragraphs
Complex designs
Complex element
structures
Flexible layouts
Flexible layouts
Drupal.cat | 30/03/2017
Container
2 columns
Container
2 columns
Flexible layouts
Container
3 columns
Container
100% grey
background
Container
4 columns
Responsive
Drupal.cat | 30/03/2017
Drupal.cat | 30/03/2017
6.Not convinced yet?
Easy edition
Drupal.cat | 30/03/2017
Marketing landingpages
Drupal.cat | 30/03/2017
Power to the editor
1. More flexibility with less
complexity
2. Think beyond the current
request
3. Try to make solutions
...
“Let’s make Drupal
great again”
Anonymous
Some Resources
Drupal.cat | 30/03/2017
1.Paragraphs video-tutorial: http://talkingdrupal.com/123
2.Paragraphs Demo: http:/...
SIDDHARTA NAVARRO
Co-founder of Atenea tech
Software Engineer
CONTACT
+34 93 551 06 86
siddharta@ateneatech.com
FOLLOW ME
...
Drupal Summer: Extreme page composition with Paragraphs
Drupal Summer: Extreme page composition with Paragraphs
Drupal Summer: Extreme page composition with Paragraphs
Upcoming SlideShare
Loading in …5
×

of

Drupal Summer: Extreme page composition with Paragraphs Slide 1 Drupal Summer: Extreme page composition with Paragraphs Slide 2 Drupal Summer: Extreme page composition with Paragraphs Slide 3 Drupal Summer: Extreme page composition with Paragraphs Slide 4 Drupal Summer: Extreme page composition with Paragraphs Slide 5 Drupal Summer: Extreme page composition with Paragraphs Slide 6 Drupal Summer: Extreme page composition with Paragraphs Slide 7 Drupal Summer: Extreme page composition with Paragraphs Slide 8 Drupal Summer: Extreme page composition with Paragraphs Slide 9 Drupal Summer: Extreme page composition with Paragraphs Slide 10 Drupal Summer: Extreme page composition with Paragraphs Slide 11 Drupal Summer: Extreme page composition with Paragraphs Slide 12 Drupal Summer: Extreme page composition with Paragraphs Slide 13 Drupal Summer: Extreme page composition with Paragraphs Slide 14 Drupal Summer: Extreme page composition with Paragraphs Slide 15 Drupal Summer: Extreme page composition with Paragraphs Slide 16 Drupal Summer: Extreme page composition with Paragraphs Slide 17 Drupal Summer: Extreme page composition with Paragraphs Slide 18 Drupal Summer: Extreme page composition with Paragraphs Slide 19 Drupal Summer: Extreme page composition with Paragraphs Slide 20 Drupal Summer: Extreme page composition with Paragraphs Slide 21 Drupal Summer: Extreme page composition with Paragraphs Slide 22 Drupal Summer: Extreme page composition with Paragraphs Slide 23 Drupal Summer: Extreme page composition with Paragraphs Slide 24 Drupal Summer: Extreme page composition with Paragraphs Slide 25 Drupal Summer: Extreme page composition with Paragraphs Slide 26 Drupal Summer: Extreme page composition with Paragraphs Slide 27 Drupal Summer: Extreme page composition with Paragraphs Slide 28 Drupal Summer: Extreme page composition with Paragraphs Slide 29 Drupal Summer: Extreme page composition with Paragraphs Slide 30 Drupal Summer: Extreme page composition with Paragraphs Slide 31 Drupal Summer: Extreme page composition with Paragraphs Slide 32 Drupal Summer: Extreme page composition with Paragraphs Slide 33 Drupal Summer: Extreme page composition with Paragraphs Slide 34 Drupal Summer: Extreme page composition with Paragraphs Slide 35 Drupal Summer: Extreme page composition with Paragraphs Slide 36 Drupal Summer: Extreme page composition with Paragraphs Slide 37 Drupal Summer: Extreme page composition with Paragraphs Slide 38 Drupal Summer: Extreme page composition with Paragraphs Slide 39 Drupal Summer: Extreme page composition with Paragraphs Slide 40 Drupal Summer: Extreme page composition with Paragraphs Slide 41 Drupal Summer: Extreme page composition with Paragraphs Slide 42 Drupal Summer: Extreme page composition with Paragraphs Slide 43 Drupal Summer: Extreme page composition with Paragraphs Slide 44 Drupal Summer: Extreme page composition with Paragraphs Slide 45 Drupal Summer: Extreme page composition with Paragraphs Slide 46 Drupal Summer: Extreme page composition with Paragraphs Slide 47
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

Drupal Summer: Extreme page composition with Paragraphs

Download to read offline

Presentation about the Paragraphs module in Drupal 8.

Related Books

Free with a 30 day trial from Scribd

See all

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!
  • DanielLozanoPea

    Jul. 7, 2017

Presentation about the Paragraphs module in Drupal 8.

Views

Total views

1,533

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

7

Shares

0

Comments

0

Likes

1

×