Visual Layout Suite (VLSuite)
VLSuite es una experiencia integral de edición de contenido construida sobre Layout Builder de Drupal, proporcionando una experiencia de edición WYSIWYG lista para usar con layouts altamente configurables, blocks, clases de utilidad, animaciones y componentes de colección.
vlsuite
Install
composer require 'drupal/vlsuite:^2.3'
Overview
Visual Layout Suite (VLSuite) ofrece el máximo valor en el menor tiempo posible para la construcción de sitios y contenido con Layout Builder de Drupal. Proporciona una experiencia What You See Is What You Get (WYSIWYG) tanto a nivel de layout como de contenido, incluyendo vista previa en vivo de variantes de apariencia.
El módulo ofrece un conjunto de layouts altamente configurables (1-4 columnas más slider), blocks básicos (Image, Icon, Text, CTA, Local Video, Remote Video para YouTube/Vimeo), y blocks de colección compuestos con variantes preestablecidas extensibles como Hero, Card, Gallery y Statement/Quote.
VLSuite utiliza un concepto de clases de utilidad CSS con un sistema basado en identificadores que permite cambiar las clases CSS reales sin editar el contenido creado previamente. Esto proporciona gran flexibilidad e independencia del theme o framework CSS utilizado. Por defecto, funciona de inmediato con themes basados en Bootstrap 5.
El módulo incluye controles de permisos completos que permiten diferentes niveles de edición de contenido para los usuarios, con utilidades que pueden marcarse como 'Avanzadas' para editores experimentados. No tiene dependencia de distribución, perfil o theme, y es compatible con otros enfoques de Layout Builder.
Features
- Construido sobre Layout Builder del núcleo de Drupal con experiencia de edición mejorada
- Experiencia WYSIWYG a nivel de layout y contenido con vista previa en vivo de variantes de apariencia
- Layouts configurables: 1-4 columnas con regiones superior/inferior opcionales, más soporte de slider
- Blocks básicos: Image, Icon, Text, CTA, Local Video, Remote Video (YouTube/Vimeo)
- Blocks de colección: Hero, Card, Gallery, Statement/Quote con variantes preestablecidas extensibles
- Sistema de clases de utilidad CSS con valores predeterminados de Bootstrap 5 (configurable para cualquier framework CSS)
- Sistema de clases basado en identificadores que permite cambios CSS sin actualizaciones de contenido
- Vista previa en vivo de clases de utilidad al pasar el cursor con funcionalidad de clic para aplicar
- Animaciones activadas por scroll usando Animate.css con efectos de entrada/salida configurables
- Funcionalidad de slider para secciones y campos multivalor usando parámetros personalizables
- Integración de fuentes de iconos con Material Icons por defecto (configurable)
- Diálogos modales para UX mejorada de Layout Builder
- Integración de biblioteca de secciones para secciones reutilizables y layouts completos
- Tipo de contenido de página de destino listo para uso inmediato
- Control de acceso basado en permisos con marcado de utilidades 'Avanzadas'
- Generador Drush para crear módulos VLSuite personalizados
- Soporte de fondo multimedia para secciones (imágenes y videos)
- Layout de pestañas para pestañas horizontales y funcionalidad de acordeón
- Función de duplicación de blocks en Layout Builder
- Modos de visualización superior/inferior de contenido para secciones de encabezado/pie de página fijos
Use Cases
Creación de páginas de destino
Crea páginas de destino visualmente atractivas usando el tipo de contenido vlsuite_landing. Añade secciones Hero con medios de fondo, cuadrículas de Cards para características, secciones Gallery para portafolios y bloques CTA para conversiones. Usa clases de utilidad para personalizar espaciado, colores y tipografía sin CSS personalizado.
Páginas de campañas de marketing
Construye rápidamente páginas promocionales combinando bloques de colección (Hero, Cards, Statements) con layouts configurables. Aplica animaciones para efectos de entrada activados por scroll. Usa la funcionalidad de slider para carruseles de testimonios o exhibiciones de características.
Empoderamiento de editores de contenido
Permite que los editores de contenido creen páginas de aspecto profesional sin asistencia de desarrolladores. La función de vista previa en vivo permite a los editores ver los efectos de las clases de utilidad al pasar el cursor antes de aplicarlas. Los controles de permisos aseguran que los editores solo vean las opciones apropiadas (utilidades básicas vs avanzadas).
Desarrollo de biblioteca de componentes
Usa VLSuite como base para construir una biblioteca de componentes específica del sitio. Extiende bloques de colección existentes o crea nuevos usando el generador. La integración con Section Library permite guardar y reutilizar layouts aprobados en todo el sitio.
Implementación de consistencia de marca
Configura clases de utilidad para coincidir con el sistema de diseño de tu marca. Establece colores aprobados, valores de espaciado y opciones de tipografía. Los editores de contenido solo pueden elegir entre estas opciones preaprobadas, asegurando consistencia de marca en todas las páginas.
Construcción de páginas responsivas
Crea layouts responsivos usando las configuraciones de ancho de columna y clases de utilidad responsivas. Los fondos de medios manejan automáticamente el comportamiento responsivo. Los componentes de slider incluyen configuración de puntos de quiebre responsivos.
Experiencias ricas en animación
Añade animaciones activadas por scroll a secciones y bloques para experiencias de usuario atractivas. Elige entre tipos de animación de entrada, salida e infinita. Configura los ajustes del intersection observer para un timing preciso de animación.
Desarrollo de bloques personalizados
Extiende VLSuite creando tipos de Block personalizados usando el generador o manualmente. Los nuevos bloques heredan automáticamente el soporte de clases de utilidad y animación cuando siguen las convenciones de VLSuite.
Tips
- Habilita VLSuite Demo para la configuración inicial más rápida con todas las características, contenido de muestra y configuraciones apropiadas
- Usa el sistema de clases de utilidad basado en identificadores para cambiar implementaciones CSS sin editar contenido
- Marca las utilidades especializadas como 'Advanced' para mantener la interfaz del editor limpia para usuarios básicos
- Aprovecha la función de vista previa en vivo - pasa el cursor sobre las opciones de utilidad para ver los efectos antes de hacer clic para aplicar
- Usa Section Library para guardar y reutilizar diseños de sección exitosos en todo tu sitio
- Configura tipos de medios para fondos en los ajustes de VLSuite Media antes de usar medios de fondo en layouts
- El Block Headings Menu requiere formato HTML apropiado - asegúrate de que tu formato de texto permita atributos 'id' en etiquetas de encabezado
- Para Themes personalizados, ajusta los mapeos de clases de utilidad en el formulario de configuración para coincidir con tu framework CSS
- Usa 'Edge to edge background' con contenido contenido para secciones visuales de ancho completo con ancho de contenido legible
- Prueba las animaciones a diferentes velocidades de scroll y tamaños de dispositivo para asegurar una buena experiencia de usuario
Technical Details
Admin Pages 7
/admin/config/vlsuite
Centro de configuración principal para los módulos de Visual Layout Suite. Proporciona acceso a todas las configuraciones de los submódulos de VLSuite.
/admin/config/vlsuite/utility-classes
Configura clases de utilidad CSS que los editores pueden aplicar a layouts, secciones, regiones y bloques. Define prefijos de clase, valores, iconos y especifica a qué elementos se puede aplicar cada utilidad.
/admin/config/vlsuite/animations
Configura animaciones activadas por desplazamiento usando clases de animación CSS. La configuración predeterminada usa clases de la biblioteca Animate.css.
/admin/config/vlsuite/icon-font
Configura los ajustes de fuente de iconos para usar en todos los componentes de VLSuite. Por defecto usa Google Material Icons.
/admin/config/vlsuite/block
Configura qué campos de entidad y tipos de bloque pueden tener clases de utilidad aplicadas.
/admin/config/vlsuite/media
Configura qué tipos de medios se pueden usar como fondos y medios principales en los componentes de VLSuite.
/admin/config/vlsuite/modal
Configura los ajustes de diálogo modal para la integración con Layout Builder.
Permissions 5
Hooks 2
hook_entity_view_alter
Añade los view modes vlsuite_full_content_top y vlsuite_full_content_bottom a las entidades que usan Layout Builder para secciones de contenido fijo de encabezado/pie de página.
hook_help
Proporciona contenido de página de ayuda renderizando README.md con el filtro Markdown si está disponible.
Drush Commands 1
drush generate vlsuite-module
Genera un módulo VLSuite personalizado con componentes de bloque basados en plantillas de biblioteca. Crea la estructura del módulo, definiciones de entidad y configuración.
Troubleshooting 8
Asegúrate de que tu plantilla views-view.html.twig añada un envoltorio 'div.view-content' alrededor de la salida de filas. Verifica que el componente SDC artisan:views se use como referencia.
Asegúrate de estar usando variantes de Block 'vlsuite_x', no plugins de Block del core. Otorga permisos de VLSuite a tu rol de usuario.
Otorga permisos de VLSuite ('Use advanced utility classes', 'Use advanced layout options', etc.) al rol de usuario apropiado.
Si usas un tema Bootstrap 5, asegúrate de que la clase 'container' no se añada a páginas que usen Layout Builder y VLSuite. El editor elige borde a borde por sección.
Verifica la configuración de Layout Builder Restrictions en 'Layout options' para permitir el nuevo tipo de Block. Esto es configurable por visualización de Entity.
Verifica que la clase de utilidad esté configurada para aplicarse a los objetivos 'apply_to' correctos. Comprueba que las clases del framework CSS estén disponibles en tu Theme.
Verifica que Animate.css (o tu CSS de animación personalizado) esté cargado. Revisa la configuración de threshold (predeterminado 0.25) y la configuración de root_margin. Asegúrate de que JavaScript no esté bloqueado.
Verifica que el tipo de medios esté habilitado en los ajustes de VLSuite Media (bg_types). Asegúrate de que el view mode 'vlsuite_background' exista para tu tipo de medios.
Security Notes 5
- El permiso 'administer vlsuite settings' tiene 'restrict access: true' y solo debe otorgarse a administradores de confianza
- Los identificadores de clases de utilidad se transliteran para prevenir caracteres especiales que podrían causar problemas de inyección
- Los fondos de medios usan validación de referencia de Entity para asegurar que solo se usen Entity de medios apropiados
- El contenido de Block sigue los controles de acceso de Entity estándar de Drupal
- Los permisos de acceso de Layout Builder se respetan para todas las operaciones de layout de VLSuite