EXTREME PAGE COMPOSITIONWITH PARAGRAPHS

Siddharta Navarro Castellar

#DrupalCampEswww.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?

Fields + Templates

No ResponsiveNeed 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

3.Definition of Paragraphs

Definition of Paragraphs

Definition of Paragraphs

Node

Title

Content

Content

Field

Field

Field

Definition of Paragraphs

Node

Title

Content

Content

Definition of Paragraphs

Content Paragraphs

Paragraph bundle 1

Paragraph bundle 2

...

Field

Paragraph field reference

Field

Definition of Paragraphs

Content Paragraphs

Field

Paragraph field reference

Field

Definition of Paragraphs

Paragraphs Paragraph bundle

Field

Field

...

Paragraph bundle 1

Paragraph bundle 1

...

Definition of Paragraphs

Paragraphs Paragraph bundle

...

Paragraph bundle 1

Paragraph bundle 1

Definition of Paragraphs

Node with Paragraphs Example

4 columns text + Image

Paragraph

Title

Text Paragraph

Definition of Paragraphs

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

Allows user to define what

Paragraphs can be used in each

content type

Paragraphs features

Node 1 Paragraph in node 1

Text + Image

Paragraph reference

Text

Slideshow

Text + Image

Text

Paragraphs are nested

Paragraphs features

Paragraphs are entities

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

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

“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!