--- url: 'https://metadrop.net/es/articulos/usando-vlsuite-para-copiar-la-portada-de-drupalorg' title: 'Usando VLSuite para copiar la portada de Drupal.org' author: 'Ricardo Sanz' date: '2024-01-05T13:05:38+00:00' updated: '2026-06-10T13:39:07+00:00' type: article summary: 'Demostración de las capacidades del módulo de Drupal VLSuite que copia la portada de Drupal.org usando la configuración por defecto de VLSuite.' tags: - 'Drupal Planet' - VLSuite - Demo - 'Drupal modules' - Contribution published: true og: determiner: Automatic site_name: Metadrop 'image:alt': 'Usando VLSuite para copiar la portada de Drupal.org' 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/usando-vlsuite-para-copiar-la-portada-de-drupalorg#article' name: 'Usando VLSuite para copiar la portada de Drupal.org' headline: 'Usando VLSuite para copiar la portada de Drupal.org' description: 'Demostración de las capacidades del módulo de Drupal VLSuite que copia la portada de Drupal.org usando la configuración por defecto de VLSuite.' about: - VLSuite - Demo - 'Drupal modules' - Contribuciones datePublished: '2024-01-08T17:00:00+0100' dateModified: '2026-06-10T15:39:07+0200' author: '@type': Person name: 'Ricardo Sanz' publisher: '@type': Organization '@id': 'https://metadrop.net/#organization' mainEntityOfPage: 'https://metadrop.net/es/articulos/usando-vlsuite-para-copiar-la-portada-de-drupalorg' - '@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/usando-vlsuite-para-copiar-la-portada-de-drupalorg' 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) # Usando VLSuite para copiar la portada de Drupal.org Lunes 08 de Enero de 2024 Demostración de las capacidades del módulo de Drupal VLSuite que copia la portada de Drupal.org usando la configuración por defecto de VLSuite. El módulo [Visual Layout Suite](https://www.drupal.org/project/vlsuite "Página del módulo Visual Layout Suite en Drupal.org") provee una **gran mejora de la experiencia editorial principal**, gracias a que se apoya Layout Builder y varios módulos contribuidos relacionados con Layout Builder, junto con la magia que aporta VLSuite. Una de las características más importantes es el uso de ***utility classes*** que permiten la configuración del tematizado fácilmente desde el *frontend*, incluyendo una vista previa instantánea. Además, permite restringir las *utility classes* que un usuario puede usar, para evitar que usuarios poco técnicos se vean abrumados por las muchas opciones disponibles. Esto también permite que el aspecto de la página pueda limitarse para cumplir con la guía de estilo del sitio, evitando que los usuarios puedan acceder a *utility classes* que puedan romper la coherencia del diseño. Se pueden también agregar fácilmente nuevas *utility classes* y es posible configurar los componentes para usar solo un conjunto limitado de *utility classes*, lo que permite limpiar más la interfaz de usuario. VLSuite se integra con cualquier componente de Drupal que se integre con Layout Builder y otros componentes: campos de entidad, *Paragraphs*, *Views*, SDC, medias, etc. Y no hay dependencia con un *theme* concreto, servicio externo o entidades específicas. La única **dependencia ligera** es un *theme* Bootstrap 5 para poder usar todas las funciones de VLSuite sin configuraciones adicionales. Pero es posible utilizar cualquier *theme* siempre y cuando proporcione las *utility classes* que se necesiten. Toda la información anterior significa que s**e puede añadir VLSuite a un sitio existente** con un esfuerzo mínimo siempre que esté basado en Bootstrap. Si el *theme* no está basado en Bootstrap pero proporciona *utility classes* (como Tailwind CSS), se necesitará algo más de trabajo para mapear las *utility classes* y las clases de CSS para usarlo. Si el *theme* no utiliza *utility classes* en absoluto se necesitará más esfuerzo para implementarlas en el *theme* pero aun así VLSuite no alterará el sitio y en vez de descartar el *theme* bastará con extenderlo. Pero todas estas frases están vacías y son difíciles de visualizar simplemente leyéndolas. Es por eso que **hemos creado un video de demostración sobre algunas de las capacidades de VLSuite**. La idea es hacer una copia de la página de inicio actual de Drupal.org utilizando solo VLSuite y un *theme* Bootstrap 5 sin ninguna otra personalización (aparte de lo que se indica en la página del módulo). El resultado es bastante similar, especialmente teniendo en cuenta que el *theme* no ha sido editado en absoluto, ni siquiera los colores. Es solo un *subtheme* de Radix. Puedes juzgar el resultado en la siguiente imagen: *A la izquierda, una captura de la página de inicio de Drupal.org (Enero de 2024). A la derecha, la copia realizada con el módulo VLSuite.* Como se puede ver, hay diferencias. Los colores son similares pero distintos, el espaciado no es el mismo, la copia de VLSuite no incluye el pie de página (no lo añadí por ser parte del pie general de la web, pero podría haberse hecho), no todos los componentes tienen la misma alineación, etc. Pero no se debe olvidar que esto **se ha hecho sin ninguna personalización**. Las posibilidades de VLSuite si añadimos las técnicas de tematización estándar de Drupal y *utility classes* propias son enormes. ## Video demostrativo de las capacidades de VLSuite Aquí puede verse la demo completa (en inglés): El vídeo es largo, casi 40 minutos, así que aquí dejo un índice: 1. [00:00](https://www.youtube.com/watch?v=9EgFcl43K_M&t=0s) Intro 2. [00:47](https://www.youtube.com/watch?v=9EgFcl43K_M&t=47s) VLSuite and Utility Classes 3. [02:01](https://www.youtube.com/watch?v=9EgFcl43K_M&t=121s) Environment 4. [02:58](https://www.youtube.com/watch?v=9EgFcl43K_M&t=178s) Copying D.org home page: hero component 5. [04:27](https://www.youtube.com/watch?v=9EgFcl43K_M&t=267s) Using Utility classes 6. [09:33](https://www.youtube.com/watch?v=9EgFcl43K_M&t=573s) Copying D.org home page: Drupal 7 EOL banner component 7. [11:32](https://www.youtube.com/watch?v=9EgFcl43K_M&t=692s) Copying D.org home page: Ukraine banner component 8. [13:13](https://www.youtube.com/watch?v=9EgFcl43K_M&t=793s) Copying D.org home page: Drupal for component 9. [20:31](https://www.youtube.com/watch?v=9EgFcl43K_M&t=1231s) Copying D.org home page: Drupal Con Sponsorship banner component 10. [25:17](https://www.youtube.com/watch?v=9EgFcl43K_M&t=1517s) Copying D.org home page: CTA collection component 11. [29:32](https://www.youtube.com/watch?v=9EgFcl43K_M&t=1772s) Copying D.org home page: Drupal in the Real World banner component 12. [31:40](https://www.youtube.com/watch?v=9EgFcl43K_M&t=1900s) Copying D.org home page: Carousel component 13. [35:53](https://www.youtube.com/watch?v=9EgFcl43K_M&t=2153s) Copying D.org home page: Last components 14. [36:43](https://www.youtube.com/watch?v=9EgFcl43K_M&t=2203s) Outro ### Comentarios sobre el video #### Mejoras Se podría haber habilitado alguna *utility class* adicional para mejorar la copia. Además, usando un tipo de contenido para los CTA de las secciones «By Industry» y «By Feature», se podrían haber utilizado sus campos (incluso *Paragraphs* si los hubiese). Para esas secciones, una *View* es la mejor opción. Sin embargo, quería mantener la demo lo más simple posible, pero no se debe olvidar que esas opciones están abiertas con VLSuite. #### Rendimiento Existen algunas reservas sobre el rendimiento al usar Layout Builder debido al rendimiento. VLSuite depende en gran medida de Layout Builder y la página de inicio que copia la página de inicio de Drupal.org tiene muchos bloques y entidades. Sin embargo, al revisar su rendimiento con Webprofiler, los resultados son bastente buenos: | **Pagina \\ Recursos** | Memoria | Tiempo | |---|---|---| | **Página de inicio vacía** | ~40 MB | ~260 ms | | **Página de inicio copiada de D.org** | ~50 MB | ~900 ms | La página vacía es simplemente la página de inicio del sitio sin contenido mostrado. Ambas páginas se han cargado después de borrar las cachés y acceder a algunas otras páginas para que la caché general no esté vacía. Mientras que la página de VLSuite requiere más recursos, algo esperado dado que la página tiene contenido mientras que la otra página estaba vacía, no se observa que haya una gran diferencia. Y es que la página creada con VLSuite usa muchos bloques y entidades. ## Cierre Consideramos que este video es un buen ejemplo de lo que se puede lograr utilizando VLSuite. El módulo está en desarrollo activo y planeamos agregar más características y mejorar las actuales. Si crees que este módulo te puede ser útil úsalo y envíanos cualquier comentario sobre errores o posibles mejoras. ¡Gracias! [VLSuite](https://metadrop.net/es/articulos?text=VLSuite) [Demo](https://metadrop.net/es/articulos?text=Demo) [Drupal modules](https://metadrop.net/es/articulos?text=Drupal%20modules) [Contribuciones](https://metadrop.net/es/articulos?text=Contribuciones) - Ricardo Sanz CTO [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