Date post: | 21-Jan-2018 |
Category: |
Technology |
Upload: | atenea-tech |
View: | 319 times |
Download: | 0 times |
EXTREME PAGE COMPOSITIONWITH 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 Paragraphs
7. Not convinced yet?
1.About me
Siddharta Navarro
SIDDHARTA NAVARRO
Co-founder of Atenea techSoftware Engineer
CONTACT
+34 93 551 06 [email protected]
FOLLOW ME
@sidddilinkedin.com/in/siddhartanavarro
2.Before start
How can we do this?
How can we do this?
No ResponsiveNeed 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 + TemplatesYou 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
ContentParagraphs
● Text
● Quote
● Image
● Video
LayoutParagraphs
● Tabs
● Accordion
● 4 columns
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
3.Paragraphs features
Paragraphs features
Node 1 Node 2
Text + Image
Slideshow
Text
Documents
Text + Image
Slideshow
Allows editor to creare diferent structures in each page
Paragraphs features
Allows editor to change the order of the paragraphs
Node 1 Node 1 edited
Text + Image
Slideshow
Text
Slideshow
Text + Image
Text
Paragraphs features
Node 1 Paragraph in node 1
Text + Image
Paragraph reference
Text
Slideshow
Text + Image
Text
Paragraphs are nested (can contain other paragraphs)
Paragraphs features
Desktop Mobile 1
Text
Quote
Text
Paragraphs are responsive
Image
Text
Quote
Text
Image
Mobile 2
Text
Quote
Text
Image
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 Paragraphin 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
Container2 columns
Container2 columns
Flexible layouts
Container3 columns
Container100% grey
background
Container4 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 reusable
“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://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
SIDDHARTA NAVARRO
Co-founder of Atenea techSoftware Engineer
CONTACT
+34 93 551 06 [email protected]
FOLLOW ME
@sidddilinkedin.com/in/siddhartanavarro
Thanks!