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 86siddharta@ateneatech.com

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 86siddharta@ateneatech.com

FOLLOW ME

@sidddilinkedin.com/in/siddhartanavarro

Thanks!