--- url: 'https://metadrop.net/es/articulos/custom-layout-api' title: 'Crear un layout custom con Layout API' author: 'Eduardo Morales' date: '2018-05-31T08:00:05+00:00' updated: '2026-06-10T07:38:40+00:00' type: article summary: 'Aprende a registrar tu primer layout custom desde cero en Drupal 8, de esta manera tendrás disponibles plantillas personalizadas en tus contenidos. Una guía básica para que a partir de unas nociones básicas de programación y tematizado puedas hacer más sencillo el maquetado de tu web Drupal.' tags: - 'Drupal Planet' - 'Layout API' published: true og: determiner: Automatic site_name: Metadrop 'image:alt': 'Crear un layout custom con Layout API' 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/custom-layout-api#article' name: 'Crear un layout custom con Layout API' headline: 'Crear un layout custom con Layout API' description: |- Aprende a registrar tu primer layout custom desde cero en Drupal 8, de esta manera tendrás disponibles plantillas personalizadas en tus contenidos. Una guía básica para que a partir de unas nociones básicas de programación y tematizado puedas hacer más sencillo el maquetado de tu web Drupal. about: 'Layout API' datePublished: '2018-05-31T10:00:05+0200' dateModified: '2026-06-10T09:38:40+0200' author: '@type': Person name: 'Eduardo Morales' publisher: '@type': Organization '@id': 'https://metadrop.net/#organization' mainEntityOfPage: 'https://metadrop.net/es/articulos/custom-layout-api' - '@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/custom-layout-api' 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) # Crear un layout custom con Layout API Jueves 31 de Mayo de 2018 Aprende a registrar tu primer layout custom desde cero en Drupal 8, de esta manera tendrás disponibles plantillas personalizadas en tus contenidos. Una guía básica para que a partir de unas nociones básicas de programación y tematizado puedas hacer más sencillo el maquetado de tu web Drupal. Podemos usar [Layout API](https://www.drupal.org/docs/8/api/layout-api "Guía de Layout API") de Drupal 8 para evitar usar módulos cómo [Field Group](https://www.drupal.org/project/field_group "Módulo Field Group") para definir contenedores, ya que podemos definir plantillas reutilizables para varios contenidos. A partir de la salida de la versión 8 de Drupal, el módulo [Layout Plugin](https://www.drupal.org/project/layout_plugin "Layout Plugin") ha servido para definir estructuras de plantillas que posteriormente se usaban junto con otros módulos cómo [Panels](https://www.drupal.org/project/panels "Módulo Panels"), [Display Suite](https://www.drupal.org/project/ds "Módulo Display Suite"), [Radix Layouts](https://www.drupal.org/project/radix_layouts "Módulo Radix Layouts") o [Bootstrap Layouts](https://www.drupal.org/project/bootstrap_layouts "Módulo Bootstrap Layouts"). Además este módulo te permitía registrar nuevas plantillas de una manera simple. Afortunadamente a partir de la versión 8.3.x se ha hecho una transición del módulo Layout Plugin a Layout Discovery ahora situado en el *core*. Junto a Layout Discovery y de manera experimental tenemos [Field Layout](https://www.drupal.org/node/2844297 "Registro de cambio de Field Layout como módulo experimental"), permitiendo elegir los layouts disponibles desde la pestaña de manage display del contenido. Una novedad en la versión 8.5.x es el de [Layout Builder](https://www.drupal.org/node/2924128 "Registro de cambio de Field Builder como módulo experimental"), ofreciendo un *live preview* para poder aplicar los layouts registrados y mediante un interfaz *drag&drop* construir la estructura del contenido. A continuación vamos a explicar cómo crear un layout y aplicarlo a un tipo de contenido básico. Se recomienda tener nociones de Drupal, PHP y Twig. ## **Cómo crear mi primer layout sin morir en el intento** ### Introducción Lo primero a tener en cuenta es elegir cómo queremos añadir los layouts custom. Layout Discovery te permite registrarlos a partir de un módulo o un template. En nuestro ejemplo vamos a guiarnos por el más simple, el del módulo. ### Generar módulo Vamos a crear nuestro módulo custom, podemos hacerlo con [Drupal Console](https://drupalconsole.com/ "Drupal Console") si lo tienes instalado. ```bash drupal generate:module ``` Vamos a crear el siguiente yaml con el nombre **mi\_modulo.layouts.yml** en la raíz de nuestro módulo, esto servirá para definir las plantillas que tenemos. Aquí tienes un ejemplo de lo que va a contener. ```apache my_custom_layout: label: 'Mi plantilla custom' category: 'Mis plantillas' template: templates/my-layout default_region: main regions: main: label: 'Contenido Principal' sidebar: label: Sidebar ``` - my\_custom\_layout": Va a ser el nombre del nuevo layout. - Label: Etiqueta para diferenciar el layout. - Category: Se pueden agrupar los layouts por categoría. - Template: Será el fichero twig (la plantilla) sin la extensión. - default\_region: Será la región donde se pondrá los elementos por defecto. - regions: Todas las regiones, posteriormente se usarán en el twig. ### Crear el template Debemos situar el fichero twig en nuestra carpeta *templates;* si el directorio no está creado lo creamos. El nombre del fichero en este caso será *my-layout.html.twig* ya que así lo hemos escrito en el fichero **mi\_modulo.layouts.yml**. El contenido del fichero twig será básico. ```html
{{ content.main }}
{{ content.sidebar }}
``` Cómo vemos las dos regiones que teníamos definidas en el fichero yaml las estamos usando aquí. ### Usar estilos en la plantilla Un layout no sirve de mucho sin tematizado por lo que también vamos a registrar una librería CSS en el módulo. En la raíz del módulo vamos a crear el fichero *mi\_modulo.libraries.yml* que es donde se deberá registrar todas las librerías disponibles. Aquí os dejo un ejemplo de cómo registrar una librería propia del módulo: ```plaintext my-custom-library: version: 1.x css: theme: css/styles-library.css: {} ``` Una vez que ya existe la librería debemos indicar en el yml del layout, \*.layouts.yml, que queremos usarla. ```plaintext my_custom_layout: label: 'Mi plantilla custom' category: 'Mis plantillas' template: templates/my-layout default_region: main library: mi_modulo/my-custom-library regions: main: label: 'Main Content' sidebar: label: Sidebar ``` Cómo se puede ver en el ejemplo anterior hemos añadido la línea **"library"** con el nombre de nuestro módulo y la librería que hemos registrado en el fichero **\*.libraries.yml** Ya podemos tematizar nuestra plantilla en el fichero *css/styles-library.css*. ### Pasos finales Quedaría activar nuestro módulo y activar el módulo Layout Discovery si no está activo para que encuentre la plantilla. Después activar un módulo que gestione esas plantillas, cómo Display Suite o Panels. En este caso vamos a activar Field Layout que aunque es experimental lo tenemos en el *core* y no necesitamos instalar nada más . Si vamos a un display de un tipo de contenido en "**Structure/Content types/contenido/Manage display"** en la parte inferior tendremos disponible los layouts. Entre ellos tendremos el nuestro. Al seleccionarlo vemos que nos aparecen las regiones definidas, y vemos los campos que están activos en la región por defecto, ahora sólo queda distribuir cada campo en la región que nos convenga.​ Guardamos el display y ya podemos ver el resultado en un contenido creado. ## Más información - [Layout Builder: https://evolvingweb.ca/blog/using-layout-builder-module-drupal-8](https://evolvingweb.ca/blog/using-layout-builder-module-drupal-8 "Layout Builder") - [Documentación de twig: https://www.drupal.org/docs/8/theming/twig - https://twig.symfony.com/doc/2.x/](https://www.drupal.org/docs/8/theming/twig - https://twig.symfony.com/doc/2.x/ "Twig") - [Agregar una librería: https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module](https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module "Agregar una librería") [Layout API](https://metadrop.net/es/articulos?text=Layout%20API) - Eduardo Morales Senior Drupal developer [Desarrollo de módulos e integraciones de terceros con Drupal](https://metadrop.net/es/servicios/drupal/integraciones " See Desarrollo de módulos e integraciones de terceros con Drupal") Metadrop conecta Drupal con tu CRM, ERP, pasarela de pago y stack de marketing — Salesforce, Microsoft Dynamics, TPV virtual de BBVA, Workday y Keepeek — mediante módulos personalizados y APIs seguras y conformes con el RGPD. Ver más