Mejorando la Experiencia

de Usuario con
Paragraphs en Drupal 8
Pedro Pachas Surez
Paragraphs es la nueva forma de
creacin de contenido
 En lugar de poner todo su contenido en un campo de
cuerpo WYSIWYG incluyendo imgenes y videos, los
usuarios finales pueden ahora elegir sobre la marcha
entre los tipos de prrafo predefinidos independientes
entre s.
 Tipos de Prrafos

Los tipos de prrafo pueden ser cualquier cosa que desee desde
un simple bloque de texto o una imagen a una presentacin de
diapositivas compleja y configurable.
 Qu mdulos usaremos?
Paragraph
https://www.drupal.org/project/paragraphs
Entity Reference Revisions
https://www.drupal.org/project/entity_reference_revisions
Tema Bootstrap
https://www.drupal.org/project/bootstrap
Field Group
https://www.drupal.org/project/field_group
Video Embed Field
https://www.drupal.org/project/video_embed_field
 Sistema de rejillas

Bootstrap incluye
un sistema de
rejilla de 12
columnas.
 Ejemplo en Laptop
.container

.row

.col-md-4 .col-md-4 .col-md-4

.row

.col-md-6 .col-md-3 .col-md-3

 Ejemplo en Tablet

.container

.row

.col-sm-2 .col-sm-7 .col-sm-3

.row

.col-sm-4 .col-sm-5 .col-sm-3

Ejemplo en Movil

.container
.row

.col-xs-12

.col-xs-6 .col-xs-6

.row

.col-xs-12

.col-xs-12

.col-xs-12
 Cdigo empleado

<div class="container">
<div class="row">
<div class="col-md-4 col-sm-2 col-xs-12"> </div>
<div class="col-md-4 col-sm-7 col-xs-6"> </div>
<div class="col-md-4 col-sm-3 col-xs-6"> </div>
</div>
<div class="row">
<div class="col-md-6 col-sm-4 col-xs-12"> </div>
<div class="col-md-3 col-sm-5 col-xs-12"> </div>
<div class="col-md-3 col-sm-3 col-xs-12"> </div>
</div>
</div>
 Theming Paragraphs

1.paragraph__[view_mode]
(e.g. paragraph--default.html.twig)
2.paragraph__[type]
(e.g. paragraph--image.html.twig)
3.paragraph__[type]__[view_mode]
(e.g. paragraph--image--default.html.twig)