El tutorial definitivo para el módulo de párrafos de Drupal

En los últimos meses hemos trabajado con más y más sitios de Drupal 8. Todos esos proyectos tenían una cosa en común... usaban el módulo Drupal Paragraphs.

Paragraphs es un módulo muy popular para manejar contenido en Drupal 8.

Los párrafos funcionan de manera similar a los campos de contenido, pero también brindan una amplia gama de opciones para el diseño, el diseño y la agrupación de su contenido.

Si quieres aprender párrafos, ¡esta es la guía definitiva! Lea, mire y siga las 10 partes de este tutorial. ¡Al final, también estarás usando Paragraphs para todos tus sitios!

Parte 1. ¿Por qué usar el módulo Drupal Paragraphs?

Los tipos de párrafo pueden ser cualquier cosa, desde un simple bloque de texto o una imagen hasta una presentación de diapositivas compleja y configurable.

En lugar de poner todo su contenido en un campo de cuerpo WYSIWYG, los usuarios finales pueden elegir sobre la marcha entre tipos de párrafo predefinidos. Puede crear múltiples funciones avanzadas y los usuarios finales pueden elegir cuál quieren usar.

Esto hace que sea mucho más fácil para los usuarios agregar contenido avanzado. Por ejemplo, los usuarios pueden entender cómo agregar una cita extraída en el cuerpo del contenido, pero es posible que no termine centrada o formateada correctamente. Es posible que también deseen hacer algo más complejo, como incluir un cuadro de llamada dentro de un artículo, pero no tienen idea de cómo agregar los estilos necesarios.

El módulo Drupal Paragraphs puede hacer que procesos como estos sean mucho más manejables para usuarios no técnicos, al tiempo que brinda a los desarrolladores la capacidad de controlar el formato y la apariencia de dichos elementos con formato especial a nivel de tema.

En la práctica, los párrafos nos permiten insertar elementos como campos de contenido, pero en lugar de agregarlos alrededor del cuerpo de cualquier parte del contenido, se insertan efectivamente en todo el cuerpo.

Para esta guía, imaginamos que estamos creando un sitio web llamado "Consejos de vida gratis", que ofrece contenido informativo en forma de artículos. Puede seguirlo en cualquier otro sitio web de desarrollo si lo desea, haciendo pequeños ajustes según sea necesario.

Parte 2. Instalación del módulo de párrafos de Drupal

Recomendamos usar un sitio de prueba de Drupal 8 en blanco para este proyecto.

• Haga clic aquí para descargar el módulo Paragaphs.
• Los párrafos también requieren el módulo Revisiones de referencia de entidad.
• Una vez que haya descargado estos dos módulos y los haya colocado en su directorio /modules, instálelos en su sitio.

Parte #3. Crear tus primeros párrafos

Paragraphs funciona al permitirnos crear lo que se denomina "tipos de párrafos" que, en nuestro caso, reemplazarán colectivamente el campo Cuerpo de cualquier tipo de contenido dado con el que queramos usar estos tipos de párrafos.

Para comenzar a aprovechar los párrafos, primero debe crear al menos un tipo de párrafos y luego debe agregar ese tipo de párrafos a un tipo de contenido. Este proceso puede parecer confuso al principio, pero es fácil familiarizarse con él una vez que configure uno o dos tipos de Párrafos.

En nuestra demostración, reemplazaremos el campo Cuerpo del tipo de contenido Artículo predeterminado con un puñado de tipos de Párrafos.

Importante: si está probando esto en un sitio que ya tiene contenido de tipo Artículo, no elimine el campo Cuerpo del tipo de contenido de Artículo como lo vamos a hacer en esta demostración. Si lo hace, perderá el cuerpo de todos los artículos en su sitio web. Si está trabajando en un sitio en el que ya se ha utilizado el tipo de contenido Artículo, debe crear un nuevo tipo de contenido en el que probar el módulo Párrafos.

En nuestro sitio "Consejos de vida gratis", comenzaremos a configurar los párrafos editando el tipo de contenido del artículo.

• Vaya a Estructura > Tipos de contenido.
• Haga clic en el botón "Administrar campos" en la fila Artículo.
• Ahora estará en la página "Administrar campos" para el tipo de contenido del artículo. En esta página, haga clic en la flecha desplegable junto al botón "Editar" en la fila Cuerpo y haga clic en Eliminar.
• Confirme la eliminación en la página siguiente.

Ahora crearemos nuestro primer tipo de Párrafos.

• Vaya a Estructura > Tipos de párrafos.
• Haz clic en "Agregar tipo de párrafo".
• En la página siguiente, debemos proporcionar una etiqueta para este tipo de párrafos. Para nuestra demostración, lo llamaremos "Cuerpo de texto", ya que lo usaremos como el cuerpo de nuestro contenido.
• Haga clic en "Guardar y administrar campos".
• En esta página "Administrar campos", haga clic en "Agregar campo".
• En la siguiente lista desplegable "Agregar un nuevo campo", desplácese hacia abajo y, en "Texto", seleccione "Texto (formateado, largo, con resumen)". Esto es similar al campo Cuerpo predeterminado que el tipo de contenido Artículo suele usar: un área de texto de formato largo con un editor WYSIWYG.
• En la siguiente página "Agregar campo", también etiquetaremos este campo en particular como "Texto del cuerpo".
• Haga clic en "Guardar y continuar".
• A continuación, se nos lleva a la pestaña "Configuración de campo" de este campo. Para cualquiera de estos campos, podemos especificar un número permitido de valores. Puede ser útil permitir más de 1 valor para algunos campos, en particular aquellos que aceptan información discreta individual, como fechas, archivos de imagen o campos de texto de formato corto para información como nombres, pero para áreas de texto de formato largo. , a menudo no es necesario proporcionar valores adicionales, ya que los párrafos simplemente se pueden colocar uno tras otro en una sola área de texto. En este ejemplo, dejemos la configuración predeterminada en "Limitado" y 1.
• Haga clic en "Guardar configuración de campo".
• En la siguiente página "Configuración del texto del cuerpo para el texto del cuerpo", podemos mantener todos los valores predeterminados. Tenga en cuenta que los usuarios seguirán teniendo todas las opciones de formato que normalmente tendrían con el editor WYSIWYG del área de texto. No les estamos quitando nada. En su lugar, lo que haremos es brindarles un método mejorado adicional para agregar ciertos tipos de elementos a su contenido.
• Haga clic en "Guardar configuración".
• Ahora verá sus nuevos campos dentro de su nuevo tipo de párrafo:

• En la página siguiente, haga clic en la pestaña "Administrar visualización".
• Actualmente, este tipo de párrafos tiene solo un campo: el campo de texto del cuerpo. No queremos que aparezca una etiqueta junto con el texto de este campo, así que seleccione "Oculto" en la columna Etiqueta de este campo. El formato debe permanecer como predeterminado.
• Clic en Guardar."

Ahora necesitamos agregar este tipo de Párrafos al tipo de contenido Artículo para que ese tipo de contenido pueda usarlo. Así es como lo hacemos:

• Vaya a Estructura > Tipos de contenido.
• Haga clic en "Administrar campos" para el tipo de contenido del artículo.
• Haga clic en "Agregar campo".
• Para usar nuestro nuevo tipo de párrafos con este campo, abra la lista desplegable "Seleccione un tipo de campo" y seleccione "Párrafo" en "Revisiones de referencia".
• Después de seleccionar "Párrafo", proporcione la etiqueta "Cuerpo" porque esto es lo que estamos usando como cuerpo de nuestro contenido.
• Haga clic en "Guardar y continuar".
• En la página siguiente, "Tipo de elemento a referencia" debe establecerse en "Párrafo".
• “El número permitido de valores debe ser “Ilimitado”. Al seleccionar “Ilimitado”, podemos insertar este campo especial provisto por nuestros tipos de Párrafos configurados tantas veces como queramos. Esto será útil cuando comencemos a insertar otras cosas además del texto en el cuerpo del contenido.
• Haga clic en "Guardar configuración de campo".
• En la siguiente página "Configuración del texto del cuerpo para el artículo", debemos hacer que nuestro tipo de párrafos creado previamente esté disponible para este campo. Para hacer esto, marque la casilla junto a "Cuerpo de texto" en "Tipo", cerca de la parte inferior de la página. Así es como hacemos que ese tipo de párrafos en particular esté disponible en este campo. A medida que agregamos más tipos de párrafos a nuestro sitio, podemos volver y ponerlos a disposición de este campo también.

• Haga clic en "Guardar configuración" y el sitio debería llevarlo de regreso a la página "Administrar campos" para el tipo de contenido.

Ahora hemos terminado de reemplazar el campo Cuerpo anterior (predeterminado) con nuestro nuevo campo Cuerpo, que utiliza Párrafos, y específicamente el tipo de Párrafos "Cuerpo de texto" que creamos. Ahora configuraremos algunos ajustes más para que aparezca como queremos.

• Para comenzar, haremos clic en la pestaña "Administrar visualización de formulario" para que podamos colocar el nuevo campo Cuerpo en una ubicación destacada en la página de creación de contenido para Artículos.
• En esta página, desplácese hacia abajo para encontrar nuestro nuevo campo Cuerpo y arrástrelo cerca de la parte superior de la lista, justo debajo del Título.
• Clic en Guardar."

Ahora debemos asegurarnos de que el nuevo tipo de párrafo esté disponible en el lugar adecuado para los visitantes del sitio.

• Haga clic en "Administrar visualización".
• Nuevamente encontrarás Body en la parte inferior. Arrastre esto cerca de la parte superior, justo debajo de Imagen. Trataremos ese campo de imagen como una gran especie de imagen introductoria o de entrada para nuestros artículos y no como parte del contenido en sí.
• Haz clic en "Guardar".

En este punto, hemos completado la configuración de nuestro tipo de contenido Artículo utilizando este nuevo campo Párrafos. Ahora es el momento de crear contenido para probarlo.

• Vaya a la página de contenido de su sitio y haga clic en "Agregar contenido".
• Haz clic en "Artículo".
• Puede introducir cualquier título para su artículo. Para este ejemplo, llamemos a nuestro artículo “Cómo hacer 100 amigos”.
• Ahora, hasta el campo Cuerpo, es posible que haya notado que se ve ligeramente diferente, aunque todavía usa el mismo campo de formato largo con un editor WYSIWYG como antes. La diferencia ahora es que tenemos un campo Cuerpo que lo abarca y que actualmente contiene un campo de texto Cuerpo. Justo debajo del campo de texto del cuerpo, debería ver el botón "Agregar texto del cuerpo", que nos permite agregar varios campos. En este punto, eso sería innecesario porque el campo de texto largo actualmente en uso es perfectamente adecuado para ingresar texto largo de varios párrafos, por lo que no necesitaríamos agregar un campo adicional cuando solo podríamos agregar más texto en el mismo campo. . Más adelante, sin embargo, veremos que resulta muy útil poder agregar campos de párrafos adicionales cuando haya implementado varios tipos de párrafos en su sitio. Por ahora, simplemente ingrese uno o dos párrafos de texto en el campo de texto del cuerpo.

Guarde su artículo y vea la página como la vería cualquier visitante.

En este punto, el nuevo Cuerpo que usa Párrafos no se ve diferente de un artículo que usa el campo Cuerpo predeterminado. Sin embargo, con Paragraphs en su lugar, pronto podremos permitir que nuestros creadores de contenido agreguen elementos adicionales al contenido sin tener que saber cómo diseñarlo correctamente.

Parte #4. Agregar su CSS a los párrafos

Una gran parte de lo que hace que Paragraphs sea tan útil es que podemos escribir CSS para elementos específicos en el contenido para que los creadores de contenido no tengan que intentar diseñar manualmente tantos de estos elementos usando el editor WYSIWYG o CSS en línea. Esto significa que personalizaremos el tema de nuestro sitio para que estos elementos aparezcan exactamente como queremos.

En muchos casos del mundo real, es probable que trabaje con un tema personalizado o un subtema propio, en cuyo caso puede editarlo libremente. Para este tutorial, vamos a crear un subtema rápido y fácil del tema predeterminado de Bartik para que podamos seguir las mejores prácticas y agregar nuestro propio CSS sin editar el propio Bartik. (Evitamos editar Bartik, o cualquier otro tema central o contribuido, directamente porque si lo hacemos y luego aplicamos una actualización lanzada a ese tema, nuestras propias modificaciones se perderán). Si no está familiarizado con la creación de subtemas, está bien. No estamos profundizando en el proceso, sino que estamos creando una copia directa del tema, al que luego aplicaremos algunas modificaciones leves. Este es un proceso fácil.

• Para crear un subtema, primero debe acceder al servidor en el que está alojado su sitio y navegar hasta el directorio raíz de su sitio.
• Una vez allí, abra el directorio "temas". Aquí es donde se colocan todos los temas y subtemas personalizados y contribuidos. En este directorio de "temas", cree una nueva carpeta llamada "custombartik" y navegue a este nuevo directorio.

Ahora necesitamos agregar un par de archivos a este nuevo directorio. El primero será el archivo de información del tema. Abra cualquier software de edición de código que utilice para el desarrollo web. Estos archivos de información requieren varios datos: el nombre del proyecto (el nombre de nuestro tema), el tipo de proyecto ("tema" en este caso), el nombre de la máquina del tema base si es un subtema (como el nuestro). is), una breve descripción y la versión principal de Drupal (7.x, 8.x, etc.) para la que se creó el tema. Ingresaremos esta información en el siguiente formulario (escriba todo exactamente como lo ve):

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme core: 8.x

Asegúrese de que el nombre del tema base "bartik" permanezca sin mayúsculas; es el nombre legible por máquina que distingue entre mayúsculas y minúsculas que necesitamos. Con esta información ingresada, guarde el archivo como “custombartik.info.yml”. Es importante que lo guardes exactamente con el mismo nombre que la carpeta que creaste seguido de “.info.yml”.

Ahora necesitamos crear el archivo de bibliotecas de nuestro tema, donde le diremos a Drupal dónde encontrar el CSS del tema y qué versión del tema es. Se puede proporcionar más información, pero esto es todo lo que necesitamos para nuestros propósitos.

• Abra un nuevo archivo. En este archivo, preste mucha atención a las sangrías aquí. Cada sangría debe ser una tabulación de dos espacios.
• Ingrese la siguiente información exactamente como aparece:

 global-css:  version: 0.1  css:    theme:      css/style.css: {}

• Guarde este archivo como "custombartik.libraries.yml". Básicamente, este archivo le dice al sitio web que esta es la versión 0.1 del tema (podríamos haberle dado cualquier número de versión) y que habrá una hoja de estilo ubicada dentro de nuestro directorio de temas ("custombartik") en css/style.css.

Ahora necesitamos volver a nuestro archivo de información para decirle a Drupal que use la información debajo del contenedor "global-css" para encontrar nuestra hoja de estilo.

• Abra su archivo custombartik.info.yml, agregue una línea en blanco debajo de su línea "core: 8.x" y luego agregue la siguiente línea de información, manteniendo nuevamente la sangría exactamente como aparece a continuación:

 libraries:  - custombartik/global-css

El archivo completo ahora debería verse así:

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme. core: 8.x libraries:  - custombartik/global-css

En este punto, estamos listos para agregar estos dos archivos a nuestro tema.

• Cargue o copie sus archivos custombartik.info.yml y custombartik.libraries.yml en su carpeta custombartik.
• Ahora agregue una carpeta llamada "css" dentro de su carpeta custombartik.
• Continúe y cree un archivo en blanco llamado "style.css" y cárguelo en este directorio. Esta será nuestra hoja de estilo.
• Sin embargo, antes de crear nuestra hoja de estilo, vaya a la página "Apariencia" de su sitio web.
• Desplácese hasta la parte inferior de la página y, en la sección "Tema desinstalado", debería ver su tema personalizado de Bartik. Si no lo ve, asegúrese de que su carpeta custombartik y todos sus archivos estén presentes en la carpeta de temas del sistema de archivos de su sitio.
• Haga clic en "Instalar y configurar como predeterminado" debajo de su tema personalizado para que su sitio comience a usar su tema.
• Una vez hecho esto, navegue a su página de inicio, y debería verse casi exactamente como el tema Bartik predeterminado de Drupal, con la excepción de que probablemente verá un ícono de imagen rota en lugar del logotipo de Drupal. El tema se parece a Bartik porque lo que hemos creado es un subtema de Bartik sin personalización todavía. Si su sitio no se parece a Bartik, y especialmente si se ve como HTML simple sin estilo CSS, vuelva a sus dos archivos .yml y asegúrese de que se vean exactamente como se imprimió arriba.

Finalmente, para corregir la imagen rota del logotipo, copiaremos el logotipo directamente de Bartik en nuestro subtema. Esto está bien porque en realidad no estamos cambiando nada en Bartik.

• Navegue al directorio raíz de su sitio y vaya a core/themes/bartik. Aquí, verá un archivo llamado "logo.svg".
• Copie este archivo en su subtema (el directorio "custombartik").
• En su sitio web, vaya a Configuración > Rendimiento y haga clic en "Borrar todos los cachés". Ahora el logotipo debería aparecer en su sitio.

Parte #5. Dar estilo a sus campos de párrafos

Ahora que tenemos un subtema que podemos editar de manera segura, podemos comenzar a establecer reglas de estilo para los elementos de nuestro contenido controlados por Paragraphs. Antes de hacerlo, debemos crear un nuevo tipo de párrafos que requiera reglas de estilo especiales. Seguiremos nuestro ejemplo de tener un campo que inserta una imagen centrada en medio de un artículo.

• Vaya a Estructura > Tipos de párrafos.
• Haz clic en "Agregar tipo de párrafo".
• Estableceremos la etiqueta para este como "Imagen centrada".
• Haga clic en "Guardar y administrar campos".
• En la página siguiente, haga clic en "Agregar campo" y seleccione "Imagen" en "Agregar un nuevo campo".
• También etiquetaremos este campo como "Imagen centrada".
• Haga clic en "Guardar y continuar".
• En la página siguiente, podemos conservar todos los valores predeterminados, así que haga clic en "Guardar configuración de campo".
• Luego, en la página "Configuración de imagen centrada para Imagen centrada", agregaremos algunas restricciones simples. Establezca la resolución de imagen máxima en 650x450 y la resolución mínima en 50x50. Establezca el tamaño máximo de carga en 1 MB y haga clic en "Guardar configuración". Estas configuraciones específicas no son necesarias para que el tipo Párrafos funcione correctamente; los estamos incluyendo simplemente para imitar un escenario del mundo real.

• Ahora haga clic en la pestaña "Administrar pantalla", configure la etiqueta de la imagen centrada como "Oculta" y haga clic en "Guardar".

En este punto, necesitamos agregar este tipo de Párrafos al campo Párrafos que tenemos en nuestro tipo de contenido Artículo.

• Vaya a Estructura > Tipos de contenido.
• Haga clic en "Administrar campos" junto a "Artículo".

Es posible que tenga la tentación de hacer clic en "Agregar campo" aquí para nuestro nuevo tipo de párrafos "Imagen centrada", pero recuerde, esto se entremezclará con nuestro campo de cuerpo personalizado. Entonces, en su lugar, agregaremos Imagen centrada al campo Cuerpo que creamos.

• Haga clic en "Editar" junto a "Cuerpo" y desplácese hasta la parte inferior de la página.
• Aquí verá "Imagen centrada" disponible debajo de nuestro tipo de párrafos "Cuerpo de texto".
• Marque la casilla junto a "Imagen centrada" para que esté disponible en este campo y guarde su configuración.

Ahora agregaremos una imagen usando este campo.

• Vaya a su página de contenido y edite su artículo "Cómo hacer 100 amigos".
• Imaginemos que queremos agregar una imagen centrada en algún lugar en el medio de nuestro artículo. Debajo del campo de texto del cuerpo, verá nuevamente el botón "Agregar texto del cuerpo" para agregar otro campo de texto del cuerpo dentro de este campo del cuerpo. Sin embargo, si hace clic en la flecha desplegable junto a este botón, verá que "Imagen centrada" ahora también está disponible. Haga clic en este botón y elija algún archivo de imagen para cargar aquí. Luego proporcione algún texto alternativo, ya que es obligatorio.

Ahora hemos agregado la imagen a nuestro contenido, pero actualmente se encuentra debajo de todo el texto. Aquí es donde haremos uso de un campo de texto de cuerpo adicional.

• Haga clic en "Agregar cuerpo de texto". Ahora tenemos, de arriba a abajo, un campo de cuerpo de texto, una imagen centrada y otro campo de cuerpo de texto. Tenga en cuenta que, aunque no debería necesitar hacerlo en este punto, puede moverlos libremente a través de las flechas de arrastrar y soltar en la parte superior izquierda de los campos de Párrafos individuales. Para que la imagen centrada aparezca intercalada entre el texto del artículo, simplemente vaya al primer campo de texto del cuerpo, seleccione el texto que le gustaría que aparezca después de la imagen y corte ese texto del campo. Luego, desplácese hacia abajo y pegue ese texto cortado en el segundo campo de texto del cuerpo (después de su imagen).
• Clic en Guardar."

Cuando vea su artículo ahora, todavía no se verá del todo correcto. Dado que aún no hemos agregado ninguna regla de estilo a nuestro tema, es probable que la imagen flote hacia la izquierda (como está de manera predeterminada), en lugar de estar centrada. Sin embargo, debe aparecer después del texto del primer campo de texto del Cuerpo y antes del texto del segundo campo de texto del Cuerpo. Ahora tenemos un artículo en el que podemos probar algunas reglas de estilo personalizadas.

Parte #6. Controlando párrafos con CSS

Iremos a nuestro subtema personalizado ahora para comenzar a diseñar la salida de los campos de Párrafos que hemos creado. Por ahora, nos centraremos específicamente en el campo "Imagen centrada", en lugar del campo Párrafos que abarca el tipo de contenido. Estamos haciendo esto porque queremos que este campo esté centrado en cualquier momento, independientemente de dónde se encuentre. Por lo tanto, al establecer reglas directamente para "Imagen centrada", evitamos establecer reglas múltiples innecesarias para contextos múltiples.

Sin embargo, necesitamos apuntar a la clase "nodo", porque habrá, de manera predeterminada, algún estilo para este campo dirigido a la clase "nodo". Por lo tanto, tenemos que anular esas reglas.

• Abra la hoja de estilo de su subtema "custombartik" en custombartik/css/style.css.
• El archivo aún debe estar vacío, pero ahora comenzaremos a agregarle reglas. Mantendremos las cosas simples por ahora. Agregue las siguientes líneas de código a su hoja de estilo:

 .node .field--name-field-centered-image {  float: none;  text-align: center; } .node .field--name-field-centered-image img {  max-width: 100%;  max-height: 450px; }

Con el primer conjunto de reglas, simplemente estamos centrando la imagen horizontalmente dentro de su clase de campo y asegurándonos de que ningún texto o cualquier otra cosa flote junto a ella. El segundo conjunto de reglas no es estrictamente necesario, pero es un código común para asegurarse de que las imágenes no terminen más grandes de lo que deberían ser en relación con el área de contenido.

• Una vez que haya agregado esto a su archivo style.css, guarde sus cambios (de ahora en adelante, cualquier referencia a guardar cambios en su subtema también supone cargar o copiar los archivos a su servidor si no está editando directamente en el servidor en donde se encuentra su sitio de prueba).
• Luego, en su sitio, vaya a Configuración > Rendimiento y haga clic en "Borrar todos los cachés" para cargar los cambios de tema en su sitio.
• Vuelva al artículo en el que agregó la imagen para centrarla (o actualice la página si ya la tiene abierta).

La imagen colocada a través del tipo de párrafos "Imagen centrada" ahora debe estar centrada sin texto flotando a ninguno de los lados. Es posible que deseemos agregar más estilo, pero para el propósito de este tutorial, hemos hecho lo que queremos hacer en este momento: asegurarnos de que la salida de este campo esté estrictamente controlada por CSS para que los usuarios que agregan el contenido no tiene que diseñar nada por sí mismo usando el editor WYSIWYG u otros métodos de estilo en línea.

Parte #7. Párrafos con múltiples campos

También podemos crear tipos de párrafos que a su vez constan de varios campos.

Por ejemplo, en lugar de un tipo de "Imagen centrada", podemos crear un tipo de "Imagen centrada con título", que consistiría en un campo de carga de imagen y un campo de texto adjunto para cualquier elemento individual de ese tipo. Esto también nos ayuda a eliminar la carga del diseño de aquellos que agregan contenido al sitio para que podamos controlar la visualización del contenido a nivel de tema.

Vamos a crear este tipo de "Imagen centrada con título" para practicar el proceso de creación de un tipo de Párrafos de campos múltiples. Como es de esperar, este proceso será similar al de crear un tipo de campo único.

• Vaya a Estructura > Tipos de párrafos y haga clic en "Agregar tipo de párrafos".
• Etiquete este tipo como "Imagen centrada con título" y haga clic en "Guardar y administrar campos".
• Haga clic en "Agregar campo".

Dado que nuestro campo "Imagen centrada" creado anteriormente es exactamente lo que queremos para la parte de la imagen de nuestro nuevo tipo de Párrafos, en lugar de crear un nuevo campo, podemos reutilizar el anterior. Por lo tanto, no seleccione nada en "Agregar un nuevo campo" en la página "Agregar campo".

• En "Reutilizar un campo existente", seleccione "Imagen: field_centered_image".
• Mantenga la etiqueta "Imagen centrada" y haga clic en "Guardar y continuar".
• Necesitamos configurar nuestros ajustes para los límites de tamaño de la imagen en la página siguiente. Ingresemos una vez más una resolución de imagen máxima de 650x450 píxeles y una mínima de 50x50 píxeles. Establezca el tamaño máximo de carga en 1 MB.
• Haga clic en "Guardar configuración".

Ahora agregaremos otro campo. Tenga en cuenta que todavía estamos dentro de la configuración de nuestro nuevo tipo de Párrafos, por lo que una vez que agreguemos este segundo campo, "Imagen centrada con título" será un tipo con dos campos.

• Haga clic en "Agregar campo" y agregue un nuevo campo de tipo "Texto (sin formato)".
• Etiquete este campo como "Título".
• Haga clic en "Guardar y continuar".
• Es posible que algunos subtítulos más largos deban superar el límite predeterminado de 255 caracteres, así que cambie la longitud máxima de este campo a 500. Mantenga el número permitido de valores en "Limitado" y 1, y guarde la configuración.
• Los siguientes valores predeterminados de configuración de subtítulos están bien, así que guarde la configuración en esa página también.

Ahora nuestro nuevo tipo de Párrafos tiene todos los campos que necesita, así que controlemos la visualización.

• Haga clic en la pestaña "Administrar visualización" para que podamos eliminar las etiquetas de campo, que son innecesarias en este caso.
• Seleccione "Oculto" en la columna "Etiqueta" para ambos campos y haga clic en "Guardar".
• Si los dos campos estuvieran fuera de orden, los reorganizaríamos para que el campo de título venga después del campo de imagen, pero dado que agregamos el campo de título al final, ya debería estar posicionado después del campo de imagen, tal como queremos que esté .

Ahora agregaremos el nuevo tipo a nuestro tipo de contenido Artículo.

• Vaya a Estructura > Tipos de contenido y haga clic en "Administrar campos" para el artículo. Como fue el caso cuando agregamos nuestro primer tipo de Párrafos de "Imagen centrada" al tipo de contenido, agregaremos este nuevo tipo de Párrafos dentro de nuestro campo Cuerpo personalizado en lugar de agregar un nuevo campo por completo.
• En la página "Administrar campos" para Artículo, haga clic en "Editar" para Cuerpo.
• Desplácese hasta la parte inferior de la página y marque la casilla junto a "Imagen centrada con título" para que ese tipo esté disponible en este campo Cuerpo.
• Haga clic en "Guardar configuración".
• Ahora, este nuevo tipo de párrafos estará disponible para aquellos que agreguen artículos al sitio.

Avancemos y creemos un nuevo artículo usando este campo, y luego agregaremos nuestro estilo para controlar su visualización.

• Vaya a la página Contenido, haga clic en "Agregar contenido" y haga clic en "Artículo".
• Llamemos a este artículo “Aprender a tocar un instrumento puede mejorar tu vida”.
• Haga clic en "Agregar texto del cuerpo" para comenzar a agregar texto al artículo. Introduzca uno o dos párrafos de texto en este campo.
• Luego, debajo del campo de texto del cuerpo, haga clic en la flecha desplegable junto a "Agregar texto del cuerpo" y seleccione la opción "Agregar imagen centrada con título" recientemente disponible. Observe que ahora se nos presentan dos campos para la entrada de datos, como deberíamos esperar: los campos "Imagen centrada" y "Título" que pertenecen a este tipo de párrafos.
• Cargue cualquier imagen en el campo de imagen y proporcione algún texto alternativo.
• Luego escribe: “La Les Paul es una de las guitarras más legendarias del rock and roll”.

Ahora agregaremos parte del resto del texto del artículo después de la imagen y el título.

• Debajo de la imagen y el título Tipo de párrafos, haga clic en "Agregar cuerpo de texto" una vez más.
• Agregue otro párrafo o dos de texto.
• Finalmente, haga clic en "Guardar y publicar".

Actualmente, la visualización de nuestra "Imagen y título centrados" debería ser la mitad correcta. Dado que reutilizamos el campo anterior "Imagen centrada", la imagen en sí ya debería estar centrada tal como lo estaba para el campo anterior que consistía únicamente en una imagen para centrar. El texto del título, por supuesto, aún no tiene reglas CSS, por lo que aparecerá alineado a la izquierda y se parecerá al texto del resto del artículo. Por lo tanto, debemos agregar algunas reglas a nuestro tema para diseñar este texto de título.

Esta vez, al escribir nuestro CSS, apuntaremos a todo el tipo de párrafos "Imagen centrada con subtítulo" y luego profundizaremos hasta el campo de subtítulo dentro de esa clase, en lugar de apuntar al texto del subtítulo independientemente de su contenedor, como hicimos anteriormente con el imagen centrada. Adoptaremos este enfoque porque es posible que deseemos reutilizar este campo de texto de título en otro lugar, y es probable que en algunos casos queramos que tenga un estilo diferente (como estar alineado a la izquierda o a la derecha en lugar de centrado) de cómo está en este tipo particular de párrafos.

Centraremos nuestro texto de pie de foto porque su imagen correspondiente está centrada, y para proporcionar una diferenciación visual entre este texto y el texto del artículo, lo pondremos en negrita (la cursiva también proporcionaría ese efecto).

• Agregue las siguientes líneas de código a su hoja de estilo y guarde los cambios:

{codecitation}.paragraph--type--centered-image-with-caption .field--name-field-caption { font-weight: bold; alineación de texto: centro; {codecitación}

• Luego, para ver nuestros cambios en el sitio, vaya a Configuración > Rendimiento y borre todos los cachés.
• Regrese y actualice el artículo creado recientemente, y debería ver las nuevas reglas de estilo en vigor. El texto de la leyenda ahora debe estar en negrita y centrado debajo de la imagen.

Por supuesto, podemos aplicar algo de estilo a este tipo de Párrafos como un todo. Una razón para hacer esto sería separar el elemento de imagen/título del texto que lo rodea y dejar visualmente claro que debe verse como una sola unidad.

• Agregue el siguiente código a su hoja de estilo y guarde los cambios:

{codecitation}.paragraph--type--centered-image-with-caption { border: 2px gris sólido; margen: 4px 0; relleno: 4px; }

Ahora borre el caché de su sitio una vez más y actualice la página del artículo. La imagen y el pie de foto deben verse prácticamente iguales; sin embargo, ahora toda la unidad de imagen/título está rodeada por un borde gris y tiene pequeños márgenes alrededor de la parte superior e inferior. Podríamos hacer más para mejorar la estética aquí (y es probable que el borde no sea necesario), pero esto demuestra nuestra capacidad para proporcionar estilos para componentes individuales de los tipos de párrafos, así como para los tipos de párrafos en su conjunto.

Ahora, si un usuario no técnico está agregando contenido al sitio y desea incluir una imagen grande y centrada con un título, todo lo que tiene que hacer es seleccionar este campo Párrafos mientras edita el artículo, cargar una imagen e ingresar el texto en el campo de título. El formato se aplicará automáticamente.

Parte #8. Uso de nodos completos en párrafos

En este punto, hemos visto algunos ejemplos de los usos básicos de los párrafos. Ahora abordaremos un ejemplo un poco más avanzado: usar párrafos para colocar un nodo completo dentro del cuerpo de un contenido. Un caso de uso para esto sería colocar una pieza de información complementaria relacionada pero independiente dentro de uno de sus artículos (similar a algo así como una sección "¿Sabías que?" que podrías ver acompañando un artículo de revista).

Para nuestro ejemplo, imaginemos que queremos tener la opción de agregar lo que llamaremos "Cuadros de información" a nuestros artículos, y lo haremos colocando una breve pieza de contenido titulada "Una breve historia del arpa". ” dentro de nuestro artículo creado anteriormente sobre aprender a tocar un instrumento.

Primero, necesitamos crear un tipo de contenido para estos "cuadros de información".

• Vaya a Estructura > Tipos de contenido y haga clic en "Agregar tipo de contenido".
• Le daremos a este tipo de contenido el nombre "Cuadro de información".
• Para la descripción, escriba "Breves fragmentos de información utilizados para complementar los artículos".
• Click the “Display settings” tab, and uncheck “Display author and date information” because we don't want author and date information showing up within our Info box content.
• All of the rest of the default settings on this page should be fine. Click “Save and manage fields.”
• On the “Manage fields” page, we already have a basic long-form “Body” field, and this is all we want for this content type, since all pieces of content of this type should be short and simple. No changes are therefore necessary here. Click “Add field.”

Now that our content type has been created, we need to create the Paragraphs type that will reference it.

• Navigate to Structure > Paragraphs types, and click “Add paragraphs type.”
• Give this type the label “Info box.”
• On the “Manage fields” page, click “Add field".
• Beneath “Add a new field,” select “Content,” found under the “Reference” header.
• For the label, write “Info box,” and save.
• All defaults are fine on the next page, so click “Save field settings” there.
• On the next settings page, scroll down until you see the “Reference type” settings.
• Since we want to use this Paragraphs type to reference and display Info box nodes, check the box next to “Info box” beneath the “Content types” header. You can leave “Sort by” set to “None” because the field will autofill based on what we type and is not a list of all content of this type. Click “Save settings.”
• Back on the “Manage fields” page, click the “Manage display” tab.
• As we've been doing so far, we'll remove the label, so select “Hidden” under the label column for the Info box field.
• Then, because we want to display the entire Info box node whenever we choose to include an Info box in one of our articles, we need to select “Rendered entity” in the column labeled “Format.”
• Click “Save.”

It's time to make this Paragraphs type available to our Article content type.

• Navigate to Structure > Content types, and click the “Manage fields” button for the Article content type.
• As we've been doing, click “Edit” for the Body field.
• Scroll down and check the box next to “Info box” under the “Paragraph types” header.
• Save your settings.

With the structure side of this implementation complete, we'll now create some content to test it out. We'll start by adding our site's first “Info box.”

• Navigate to the “Content” page, and click “Add content.”
• Choose Info box.
• For the title, enter “A Short History of the Harp.”
• Enter two or three paragraphs of text into the Body field, and click “Save and publish.”

At this point we will divert briefly from Paragraphs. Currently the home page of our site lists all of our articles and info boxes, but we don't want the latter to appear on the homepage; we want them only placed within other articles. So, let's quickly edit the view for our homepage to exclude these pieces of content.

• You can either click the “Edit view” icon (which is displayed as a pencil icon) on the top right corner of the view area of the homepage.
• Navigate to Structure > Views, and edit the “Frontpage” view.
• On the view's settings page, next to the “Filter criteria” header, click “Add.”
• Select “Content type,” and then click “Apply (all displays).”
• For the filter criterion, select “Is not one of” under “Operator,” and under “Content types,” check “Info box.” Then click “Apply (all displays).” This, as you probably know, will exclude all content of type “Info box” from the Frontpage view.
• Back at the view's settings page, click “Save.”
• Now when you view the homepage of your site, you will no longer see the “A Short History of the Harp” info box.

Now we'll add our Info box to the “Learning to Play an Instrument” article.

• Scroll down to the bottom of the Body Paragraphs field (the larger field encompassing all individual Paragraphs fields).
• Click the dropdown arrow next to “Add Body text,” and select “Add Info box.” You can type in any piece of the title of your “A Short History of the Harp” Info box node into the autofill field, and that Info box should then be displayed as an option.
• Select it to include that Info box in the body of this article.

With the Info box now included in our Body, we need to place it where we want it.

• Drag and place it after the first Body text field and before the Centered image field.

With this new organization, we should probably have some text between the Info box and the Centered image. To simulate doing this in a real-world scenario, we'll cut some of our current text and paste it into a new Body text field, as opposed to arbitrarily adding text to the article.

• So that we have a field to paste our new text in, go ahead and click the “Add Body text” button beneath all of the Paragraphs fields.
• Then scroll to the first Body text field and select and cut one or two paragraphs of text from the field (making sure to leave at least some text in the field).
• Paste the cut text into the newly created (currently empty) Body text field.
• Once this is done, drag the new Body text field, and place it after the Info box field and before the Centered image field.
• Click “Save and keep published”.

Upon viewing the article, you'll see that the referenced Info box node is displayed in its entirety within the larger article. (If all you see is the title of the Info box node, that means you forgot to select “Rendered entity” in the Format column Paragraph type's “Manage Display” page.) As it currently is, the lack of styling on the referenced Info box is likely to be confusing to most viewers. We won't go through the task of applying additional CSS to these Info box references because we already now how to do that, but it is important to note that, in practice, these references should be styled to appear significantly different from the containing article. It should be made extremely clear—through the use of some combination of background color, borders, text size, and font family—that the information contained in the Info box is not part of containing article and is simply supplementary information.

Part #9. Using Field Layout with Paragraphs

Just as the Field Layout module can be used to control the layout of nodes, it can also be used to control the layout of individual Paragraphs types. In some cases, this can be a viable alternative to controlling the layout via CSS, depending on the situation and on the developer's (your) preference.

Important: As of this writing, Field Layout is an experimental module. As such, any implementation of Field Layout should be considered a risk. If you do decide to use the module during its experimental phase, it should be tested extremely thoroughly on a development site before being used on a production site. Otherwise, play it safe by considering this information useful for future situations after the module has graduated into non-experimental core.

Because Field Layout is a core module, it does not need to be downloaded.

• Begin by navigating to your site's Extend page.
• Select the Field Layout and Layout Discovery (a dependency) modules, and click “Install.”
• Then, if prompted, click “Continue.”

Let's use Field Layout to control the layout of a new Paragraphs type in which we create a two-column unit of “Pros and cons” information.

• Navigate to Structure > Paragraphs types, and add a new Paragraphs type.
• Give it the label “Pros and cons,” and add a field.
• For this field, select “Text (formatted, long),” and give this first field the label “Pros”.
• Save and continue, and keep all of the default settings through the next two pages.
• You are back at the “Manage fields” page. Add another field with a Text (formatted, long) input type, and label this one “Cons”.
• Save, and continue through the subsequent settings pages, once again keeping all default settings.
• Once you're back at the “Manage fields” page, click the “Manage display” tab. This time we will keep the label (positioned above, as is default) for each field so that when visitors are reading them, they know that we are listing pros and cons accordingly.

If we look below the listed fields, we will see a new group of settings called “Layout settings.” This is made available by the Field Layout module. Click to expand these settings.

• We have a handful of options here, and for our Pros and cons lists, we'll select “Two column.”
• Then click “Save,” and you'll be taken back to the “Manage display” page.
• Now we have additional layout areas to place our fields in for this Paragraphs type. In total, we have “Top” for the area spanning the width of the content space above our columns, “First” for the left column, “Second” for the right column, “Bottom” for the area spanning the width of our content space below the columns, and “Disabled” for fields we do not want to display.
• Drag-and-drop your Pros and Cons fields so that Pros is in the “First” column and Cons is in the “Second” column, and save.

Now, as usual, we need to add the new Paragraphs type to our Article content type.

• Navigate to Structure > Content types, and click “Manage fields” for Article.
• Edit the Body field, scroll to the bottom of that field's settings.
• Check the box next to “Pros and cons” to add that Paragraphs type to this custom Body field. Then save.

Now we're ready to begin using this “Pros and cons” Paragraphs type. Let's use it in a new article.

• Create a new article called “Swimming Is a Great Way to Stay in Shape.”
• Add two or so paragraphs of Body text to this article.
• Click the dropdown arrow next to the “Add Body text” button, and select “Add Pros and cons.” Notice that this Paragraphs type has two long-form text areas to fill in, one labeled “Pros” and the other labeled “Cons.”
• Enter text for five or so pros, each separated by a simple line break (in other words, separated by pressing the Enter key). If you'd like, you can alternatively make these 5 bullet points. Do the same in the Cons field.
• If you'd like to fill out this article a bit more, you can then add another field of Body text below the Pros and cons field.
• Click “Save and publish.”

Viewing the article, you'll see your comparison of pros and cons listed, with the pros listed in a left-hand column and the cons listed next to them in a right-hand column. You should also see your “Pros” and “Cons” labels above each list.

In most cases you would likely want to apply some CSS to these elements via your stylesheet. Again, we won't take the time do so here because you have seen how that works. Some styling suggestions might be to add a vertical border between the lists of pros and cons (and potentially borders surrounding the entire Paragraphs type) and to make the “Pros” and “Cons” labels more prominent. Additionally, you may consider going back and editing the Pros and cons Paragraphs type to add a title field which can be displayed in the “Top” area above both columns. In this case, such a field might read, “Some Pros and Cons of Swimming for Exercise.”

Part #10. Permissions for the Paragraphs Module

At this point, we've set up all of our Drupal Paragraphs types and integrated them the way we want, aside from some styling we would need to apply to the Info box and Pros and cons types. However, we have not yet configured any permissions pertaining to Paragraphs. This is an important step. Currently, if an anonymous visitor were to view our site, they would not be able to see any of the content entered via Paragraphs types (which is all of the content we have entered in this tutorial) because by default, only administrators have permission to view such content. You can see this for yourself by logging out of the site in its current state and trying to view the content. You will see the titles of articles but none of the body content.

Additionally, we want to have a “Content creator” (or similar) role on the site so that not everyone adding content has full access to all administrative configuration on the site. These users need permission not only to view Paragraphs content but to create, edit, and delete it.

We'll start by giving everyone permission to view Paragraphs content.

• Vaya a la página Personas de su sitio y haga clic en la pestaña "Permisos".
• Desplácese hacia abajo hasta que vea la sección "Permisos de tipo de párrafos". Debajo de este encabezado, busque "Texto del cuerpo: Ver contenido" y marque las casillas para Usuario anónimo y Usuario autenticado.
• Haga lo mismo con el permiso "Ver contenido" de todos los demás tipos de Párrafos que creamos: Imagen centrada, Imagen centrada con título, Cuadro de información y Pros y contras.
• Haga clic en "Guardar permisos".

En este punto, todos los usuarios pueden ver todo el contenido de Paragraphs. Siéntase libre de cerrar sesión y ver el sitio como un visitante anónimo para confirmar.

Ahora, para crear un nuevo rol para aquellos que agregarán y editarán contenido en nuestro sitio.

• Vaya a Personas, haga clic en la pestaña "Funciones" y haga clic en "Agregar función".
• Llame a este rol "Creador de contenido".
• De vuelta en la página Funciones, haga clic en la flecha desplegable junto a la función Creador de contenido y seleccione "Editar permisos".
• Hay bastantes permisos que necesitaremos otorgar a los usuarios de este rol. Algunos de estos no están relacionados con los párrafos, pero los estamos incluyendo de todos modos para imitar un escenario del mundo real. Además, será difícil probar el nuevo rol de manera confiable si no tiene todos los permisos que tendría en la práctica. Tenga en cuenta también que otorgamos estos permisos asumiendo que todos nuestros creadores de contenido trabajan internamente. Es decir, no tenemos un gran número de usuarios técnicamente autenticados pero aún seudoanónimos que crean contenido en nuestro sitio, por lo que creemos que podemos otorgarles permiso a estos usuarios de manera segura para hacer cosas como usar el formato de texto HTML completo, que en otros casos causaría algunos problemas de seguridad.

Aquí está la lista de permisos que debe otorgarse el rol de creador de contenido:

Comentario

• Editar comentarios propios
• Publicar comentarios
• Omitir aprobación de comentarios
• Ver comentarios

Contacto

• Ver el formulario de contacto de todo el sitio
• Utilizar formularios de contacto personales de los usuarios

Filtrar

• Utilice el formato de texto HTML básico
• Utilice el formato de texto HTML completo
• Utilice el formato de texto HTML restringido

Nodo

• Acceder a la página de descripción general del contenido
• Administrar contenido
• Ver contenido propio no publicado
• Revertir todas las revisiones
• Ver todas las revisiones
• Ver contenido propio no publicado
• Artículo: Editar cualquier contenido
• Artículo: Editar contenido propio
• Artículo: Revertir revisiones
• Artículo: Ver revisiones
• Cuadro de información: Crear nuevo contenido
• Cuadro de información: edite cualquier contenido
• Cuadro de información: Editar contenido propio
• Cuadro de información: Revertir revisiones
• Cuadro de información: Ver revisiones

Permisos de tipo de párrafos

Otorgue todos los permisos en esta sección excepto "Omitir el control de acceso al contenido del tipo de párrafos".

Búsqueda

• Usar búsqueda avanzada
• Usar búsqueda

Sistema

• Utilice las páginas de administración y ayuda
• Usar el sitio en modo de mantenimiento
• Ver el tema de administración

Taxonomía

• Editar términos en Etiquetas

Barra de herramientas

• Usar la barra de herramientas de administración

Usuario

• Ver información del usuario

Asegúrese de hacer clic en "Guardar permisos" cuando haya terminado.

Algunas notas sobre algunos de los permisos que otorgamos y no otorgamos aquí: No otorgamos permiso para administrar tipos de párrafos porque no queremos que creen nuevos tipos de párrafos o cambien la forma en que funcionan los tipos de párrafos existentes. Simplemente ingresarán información utilizando los tipos de párrafos que nosotros, como desarrolladores, hemos creado para ellos. Además, aunque en algunos casos es aconsejable evitar otorgarles a los roles no administrativos la capacidad de eliminar contenido (en la mayoría de los casos, es suficiente que puedan anular la publicación del contenido, y eliminar contenido lo hace irrecuperable), necesitamos darles permiso. para eliminar el contenido de tipos de párrafos en "Permisos de tipo de párrafos". Esto es necesario porque si no pueden eliminar este tipo de contenido, y si accidentalmente hacen clic para agregar cualquier contenido a través del tipo de párrafos que en realidad no necesitan en un artículo determinado, no habrá forma de que eliminen esa unidad de contenido del artículo. Sería similar a no permitir el uso de la tecla Retroceso.

Para probar nuestros nuevos permisos, crearemos un nuevo usuario con la función de creador de contenido y pasaremos por el proceso de agregar un nuevo artículo como ese usuario.

• Vaya a Personas y haga clic en "Agregar usuario".
• Cree un usuario llamado Mary (puede omitir la dirección de correo electrónico), con una contraseña que pueda recordar fácilmente.
• Asegúrese de que el estado del usuario esté marcado como "Activo" y, lo que es más importante, asegúrese de marcar el rol de "Creador de contenido" para este usuario.
• Luego haga clic en "Crear nueva cuenta".
• Cierra la sesión y vuelve a iniciar sesión como Mary. Si los permisos se asignaron correctamente, debería tener acceso a la barra de herramientas de administración.
• Haga clic en "Administrar" en la barra de herramientas si no ve los enlaces administrativos ("Contenido", "Estructura", etc.).
• Luego navegue a Contenido y agregue una nueva pieza de contenido de tipo Artículo. Y
• Puede titular este artículo “El brócoli es excelente para usted”.
• Agregue un campo de texto de cuerpo e ingrese algo de texto.
• Luego, debe revisar e intentar agregar contenido de cada tipo de párrafo que hemos creado: imagen centrada, imagen centrada con título, cuadro de información y pros y contras.
• Después de hacerlo, guarde el artículo y véalo. Este proceso completo debe ser el mismo que cuando lo hicimos como administrador del sitio, y luego debería poder ver todo el contenido sin problemas.

Si no tiene la opción de agregar uno o más de estos, o si encuentra otros problemas al intentar hacerlo, probablemente se perdió uno o más de los permisos necesarios al otorgarlos a la función de creador de contenido. Vuelva a los permisos para el creador de contenido y asegúrese de haberles otorgado todos los permisos enumerados anteriormente, especialmente los que se encuentran debajo del encabezado "Permisos de tipo de párrafo".

Terminando el Tutorial de Párrafos

Una vez que haya confirmado que puede crear y ver contenido utilizando el contenido de Paragraphs como creador de contenido, habrá completado este tutorial. En este punto, debe comprender por qué y cómo usar el módulo Párrafos.

En resumen, la utilidad de este módulo radica en su capacidad para que definamos componentes especiales de contenido en el artículo, como cuadros de información complementaria e imágenes centradas con subtítulos, sin obligar a los creadores de contenido a intentar diseñar las cosas por su cuenta.

Con Paragraphs, simplemente se les pide que proporcionen el contenido para estas partes de nuestros artículos, y nosotros, como desarrolladores, podemos escribir reglas para todo el sitio (usando CSS) sobre cómo se debe mostrar ese contenido. Esto hace que el proceso de creación de contenido sea más fácil para los usuarios no técnicos y hace que la apariencia de dicho contenido sea más consistente para los usuarios técnicos y no técnicos por igual.