--- url: 'https://metadrop.net/es/articulos/layout-kit' title: 'Layout Kit' author: 'Cristian Aliaga' date: '2018-07-29T16:03:19+00:00' updated: '2026-06-10T07:52:30+00:00' type: article summary: 'Nueva contribución a la comunidad que aprovecha el potencial que ofrece el Layout API para Drupal 8.' tags: - 'Drupal Planet' - Front-end image: 'https://metadrop.net/sites/default/files/styles/full/public/imce/image/article/layout_kit.jpg.webp?itok=oZkgwpzT' published: true og: determiner: Automatic site_name: Metadrop 'image:url': 'https://metadrop.net/sites/default/files/styles/full/public/imce/image/article/layout_kit.jpg.webp?itok=oZkgwpzT' 'image:type': image/jpeg 'image:width': '955' 'image:height': '535' 'image:alt': 'Layout Kit' street_address: 'Calle Manuel Luna, 12, 3 Dcha' locality: Madrid region: Madrid postal_code: '28020' country_name: España email: hola@metadrop.net phone_number: '910053180' schema: '@context': 'https://schema.org' '@graph': - '@type': Article '@id': 'https://metadrop.net/es/articulos/layout-kit#article' name: 'Layout Kit' headline: 'Layout Kit' description: "Nueva contribución a la comunidad que aprovecha el potencial que ofrece el\_Layout API para Drupal 8." about: Front-end image: '@type': ImageObject url: 'https://metadrop.net/sites/default/files/styles/full/public/imce/image/article/layout_kit.jpg.webp?itok=oZkgwpzT' width: '955' height: '535' datePublished: '2018-08-20T18:03:19+0200' dateModified: '2026-06-10T09:52:30+0200' author: '@type': Person name: 'Cristian Aliaga' publisher: '@type': Organization '@id': 'https://metadrop.net/#organization' mainEntityOfPage: 'https://metadrop.net/es/articulos/layout-kit' - '@type': Organization '@id': 'https://metadrop.net/#organization' url: 'https://metadrop.net/' name: Metadrop sameAs: - 'https://www.drupal.org/metadrop' - 'https://twitter.com/metadrop' - 'https://asociaciondrupal.es/partner/metadrop' - 'https://www.linkedin.com/company/metadrop' logo: '@type': ImageObject url: 'https://metadrop.net/themes/custom/mdrop_radix/logo-metadrop-500-500.jpg' width: '500' height: '500' - '@type': ItemPage '@id': 'https://metadrop.net/es/articulos/layout-kit' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://metadrop.net/es' - '@type': ListItem position: 2 name: 'Artículos expertos sobre Drupal y tecnología' item: 'https://metadrop.net/es/articulos' publisher: '@type': Organization '@id': 'https://metadrop.net/#organization' --- 1. [Artículos](https://metadrop.net/es/articulos) # Layout Kit Lunes 20 de Agosto de 2018 Nueva contribución a la comunidad que aprovecha el potencial que ofrece el [Layout API](https://www.drupal.org/docs/8/api/layout-api) para Drupal 8. [**Layout Kit**](https://www.drupal.org/project/layout_kit) es un módulo para Drupal 8 que ofrece un **conjunto de plantillas listas para utilizar** y compatibles con cualquier tema. En la primera versión encontramos: - **Acordeón**. - **Conmutador** (acordeón en los que se puede plegar/desplegar todas sus secciones). - **Solapas horizontales**. - **Solapas verticales**. ## Layout Kit Antes de nada, ésto es lo que puedes hacer con Layout Kit: Hasta la fecha, si necesitábamos mostrar contenido mediante un acordeón, solapas o similar, aún siendo componentes sencillos y muy utilizados, debíamos optar por la inclusión de Bootstrap (o similar) como tema principal o había que realizarlo con código propio. Con [Field Group](https://www.drupal.org/project/field_group) también se podría llegar a conseguir crear alguno de estos componentes aunque implica una mayor configuración ya que se aplica a otro nivel, especialmente si queremos que cada "brick" o "paragraph" perteneciente a un mismo campo suponga un elemento de nuestro acordeón (por ejemplo), y más aún si queremos dar la posibilidad al editor de modificar el modo de presentación. Ahora, con Layout Kit, **podemos usar estos componentes con Bartik o cualquier tema**, ya que tienen todo lo necesario para que se visualicen correctamente independientemente del tema, lo que simplifica enormemente la tarea de adaptación a un diseño. De esta forma, mediante Layout Kit se amplía la oferta de componentes disponibles *out-of-the-box* con una configuración mínima, y sin la necesidad de tener que emplear pesados temas como Bootstrap sólo por la inclusión de componentes de este tipo. Las plantillas adoptan [BEM](https://getbem.com/naming/) para nombrar a sus componentes y modificadores. Se ha prestado especial atención en que éstas plantillas sean funcionales con los siguientes módulos: - **Field Layout** (core): Lo que nos permite configurar la visualización de cualquier entidad con sus campos a modo de acordeón, por ejemplo. - [**Field Group**](https://www.drupal.org/project/field_group): Útil si, por ejemplo, necesitamos agrupar varios campos en un único elemento del acordeón. - [**Bricks**](https://www.drupal.org/project/bricks): Muy recomendable ya que de base se integra con Layout API. Esto nos permite crear un *brick* de tipo 'layout' y definir qué plantilla utiliza, visualizando sus elementos anidados en función de lo que seleccionemos. De esta forma además podemos cambiar la forma de visualización sin tener que volver a construir el *brick* entero, simplemente a golpe de ratón. Los editores te agradecerán no tener que repetir la carga de la misma información una y otra vez solo para cambiar cómo se visualiza. También puedes usar bricks con [Paragraphs](https://www.drupal.org/project/paragraphs "Módulo Paragraphs") si lo prefieres (ten en cuenta que Paragraphs no tiene el atributo *label* de base por lo que tendrás que añadirle un ''field\_title"). Si quieres utilizar Layout Kit y Bricks, necesitas usar la versión de desarrollo y aplicar un parche (está todo explicado en la descripción/readme del módulo). Puedes instalar "Bricks Default ECK" o "Bricks Default Paragraphs" (acorde a lo que necesites) para tener el *setup* inicial (crea las entidades y tipos de entidad necesarias para usar Layout API). Aunque si prefieres hacerlo tú, solo tienes que asegurarte de que añades un subtipo de entidad "layout". Lo que conseguimos empleando Bricks y Layout API es reducir enormemente el número de tipos de entidad (ECK o Paragraphs) necesarios para construir este tipo de componentes, ya que todos los que no tienen contenido y solo sirven para definir el "layout" o el modo de representación se aúnan en plantillas aplicables a un único tipo de entidad "layout". El único requisito es que tengan un campo/atributo que sirva como título. Veamos ahora unos ejemplos de uso. ## Layout Kit + Field Layout + Field Group (opcional) En este primer ejemplo vamos a configurar un conmutador con dos elementos, el primero contiene una imagen y el segundo dos campos de texto. La configuración es sencilla: Y el resultado puede verse en esta imagen: ## Layout Kit + Bricks Para el segundo ejemplo vamos a usar Layout Kit con Bricks, añadiendo elementos para mostrar las cuatro plantillas disponibles: conmutador, acordeón y solapas horizontales y verticales. La configuración se puede ver aquí: Y el resultado sería lo que muestra la siguiente imagen: ## Layout Kit + Bricks + Anidar componentes ¿Y si hay que anidar componentes? No hay problema, Layout Kit lo permite fácilmente: El resultado de la configuración de la imagen anterior es el que se puede ver en la siguiente imagen. Cómo puede comprobarse los componentes se muestran sin problemas. Eso es todo, si echas en falta alguna plantilla más, háznoslo saber y lo tendremos en cuenta para futuras versiones. [Front-end](https://metadrop.net/es/articulos?text=Front-end) [Drupal UX/UI Diseño digital](https://metadrop.net/es/servicios/estrategia-digital/drupal-uxui-diseno-digital " See Drupal UX/UI Diseño digital") Metadrop diseña sistemas UX/UI accesibles y basados en datos para plataformas digitales enterprise: sistemas de diseño escalables que cumplen WCAG y mejoran la conversión. Ver más